Posts Tagged ‘css menu’
Creating a navigation using lists
Posted by: Amit Nazare on: November 24, 2009
- In: CSS
- Leave a Comment
Almost every developer uses list to create a navigation, even I uses ul li’s to create a navigation. I feel its easy to create navigation with ul li’s rather than using any other tag or method.
Below is just a sample code for navigation.
<ul>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a></li>
<li><a href=”#”>Link 3</a></li>
</ul>
and the css code is as below
ul {
list-style: none;
}
ul li a {
display: block;
width: 130px;
height: 30px;
text-align: center;
color: #666666;
float: left;
background: #cccccc;
border: solid 1px #333333;
margin: 30px 5px;
}
Try this code and see, you will find different output in different browsers. In mozilla you get a clear aligned menu, but when you view it in IE 6 you will find somewhat a staircase effect is been generated. Very funny right.
So to get a clear navigation, we should fix this IE bug. The easiest solution for this bug is to use a float:left; for the li element.
Just add this and you are done,
ul li {
float: left;
}
Another solution would be to add display:inline; to the enclosing li element.
Just add this code and you are done
ul li {
display: inline
}
If any problem persists do contact me or comment on this.
Tabbed Rounded corner CSS Menu
Posted by: Amit Nazare on: April 28, 2009
Here is another example for making a rounded corner menu with ul li. I have seen most of use full image to make a rounded corner menu. But the problem with this is we need to have n images for n number of menu items. That is if the text or words more then we need to make use of seperate image for this and seperate for some others. So here is an example how we can make use of two cropped images left and right and use these images to create a rounded corner menu.
Example:
Put this code in the body section of your page.
<div id=”menu”>
<ul>
<li><a class=”active”><span>Home</span></a></li>
<li><a><span>About Us</span></a></li>
<li><a><span>Products</span></a></li>
<li><a><span>Services</span></a></li>
<li><a><span>Contact Us</span></a></li>
</ul>
</div>
Put this code in the Head section of your page
<style type=”text/css”>
#menu{
height:30px;
width:1000px;
text-align:center;
}
#menu ul li{
list-style-type:none;
display:inline;
}
#menu a{
padding-left:10px;
background:url(images/menuInactiveLeft.jpg) no-repeat left top;
font-family:Verdana;
font-size:12px;
color:#434343;
float:left;
margin-right:10px;
}
#menu a span{
padding-right:10px;
background:url(images/menuInactiveRight.jpg) no-repeat right top;
font-family:Verdana;
font-size:12px;
color:#434343;
float:left;
}
#menu a:hover{
padding-left:10px;
background:url(images/menuActiveLeft.jpg) no-repeat left top;
color:#666666;
float:left;
}
#menu a span:hover{
padding-right:10px;
background:url(images/menuActiveRight.jpg) no-repeat right top;
color:#666666;
float:left;
}
#menu a.active{
padding-left:10px;
background:url(images/menuActiveLeft.jpg) no-repeat left top;
color:#666666;
float:left;
}
#menu a.active span{
padding-right:10px;
background:url(images/menuActiveRight.jpg) no-repeat right top;
color:#666666;
float:left;
}
</style>
You can see that I have used a span in between anchor tags.The #menu a makes the left image to be aligned whose background position is left, and for the right image the background position is right top which is made with the help of #menu a span. That is why I have used the span class now this makes the completed rounded corner. Make sure that your right image width is big enough so that the largest text could fit in that. The other class is the active class which is used for making any one of the menu item as selected. On mouse hover the same procedure holds good.
Try this code with your rounded corner images. If you are getting any problem then put your comments will try to help you out.
Simple CSS Menus
Posted by: Amit Nazare on: January 22, 2009
- In: CSS
- Leave a Comment
If you are looking for simple CSS based menu try these as your options
HTML goes here
<div id=”menu”>
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Profile</a></li>
<li><a>Gallery</a></li>
<li><a>Contacts</a></li>
</ul>
</div>
CSS goes here
#menu{
font-family:Verdana,Arial;
background-color:#000000;
height:30px;
line-height:30px;
}
#menu ul li{
display:inline;
list-style-type:none;
}
#menu a{
font-weight:bold;
font-size:12px;
color:#ffffff;
text-decoration:none;
padding:0 5px;
}
#menu a{
font-weight:bold;
font-size:12px;
color:#cccccc;
text-decoration:none;
padding:0 5px;
}
How to set transparent dropdown menu?
Posted by: Amit Nazare on: January 22, 2009
- In: CSS
- Leave a Comment
If you looking for the transparent background for your drop down menu, either it might be for vertical menu or for horizontal menu. This is how you can get it done
#menu{
background-color:green;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); // for IE
opacity:0.5; // rest all browsers
}
Mywebdunia's Blog 