Rollover menus are all the rage. I can't stand a menu that doesn't rollover * cough * To me it is just feels icky when I mouse over a menu item and nothing happens. CSS makes pretty menus quite easy. Today we are going to learn how to make horizontal and vertical menus that are pretty and creative
Let's get started.
First I will show you the basics with a horizontal menu, so lets make a list:
CODE
<div id="menu1">
<ul>
<li><a href="#">Freaking</a></li>
<li><a href="#">Pretty</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Just</a></li>
<li><a href="#">For</a></li>
<li><a href="#">You</a></li>
</ul>
</div>
Easy enough. Now let's start off with the basics for a horizontal menu:
CODE
#menu1{
height:25px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#menu1 ul{
margin:0;
padding:0;
list-style-type:none;
}
#menu1 ul li{
display:inline;
}
#menu1 ul li a{
text-decoration:none;
float:left;
height:25;
margin:12px 0;
padding:15px;
width:65px;
text-align:center;
}
Well thats nice but it sure is ugly! Let's make it pretty now...time to go to photoshop...don't freak out it is the easiest step: Make a new file that is 25px in height and 3px in width:
Pick any two colors you like, put one on the forground and one on the background. I am going to go with dream-in-code orange. Now get your gradient tool, make sure the gradient is set on foreground to background:
Now make a line from the top to bottom and save it for the web in your images folder:
Now make a line from the bottom to the top and do the same:
Now here add this to your CSS, using your own image names:
CODE
#menu1 a:link, #menu1 a:visited{
color:#fff;
background-image:url(images/link.gif);
background-repeat:repeat-x;
background-position:center;
}
#menu1 a:hover, #menu1 a:active{
color:#000;
background-image:url(images/hover.gif);
background-repeat:repeat-x;
background-position:center;
}
Still not good enough for ya? OK let's spruce it up a bit with a border:
CODE
#menu1 a:link, #menu1 a:visited{
color:#fff;
background-image:url(images/link.gif);
background-repeat:repeat-x;
background-position:center;
border: 1px solid #f16b12;
}
#menu1 a:hover, #menu1 a:active{
color:#000;
background-image:url(images/hover.gif);
background-repeat:repeat-x;
background-position:center;
border: 1px solid #e89642;
}
Wow!!! Pretty!!...as pretty as orange can be...ok let's make a vertical one, use the same unordered list and here is the basic CSS for the vertical menu:
CODE
#menu2{
padding:24px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#menu2 ul {
margin:0px;
padding:0px;
list-style-type:none;
}
#menu2 ul li{
padding:0;
}
#menu2 ul li a{
display: block;
width:150px;
height:30px;
margin:0;
padding: 10px;
text-decoration:none;
text-align:right;
}
But we need to make it pretty now! Go to photoshop and do the same as before
only make the width the same as your ul li a width + padding on each side = 170 and make the height 3px, then take your gradient from right to left and then left to right. Then add this to your CSS:
CODE
#menu2 a:link, #menu2 a:visited{
color:#fff;
background-image:url(images/link2.gif);
background-repeat:repeat-y;
background-position:center;
border: 1px solid #f16b12; /* this border doesn't work in IE6 */
}
#menu2 a:hover, #menu2 a:active{
color:#000;
background-image:url(images/hover2.gif);
background-repeat:repeat-y;
background-position:center;
border: 1px solid #e89642;
}
The possibilities are endless, you can play with margins, padding, color, borders--
just remember DON'T mess with the ul margins and don't cop out w/ the a's you MUST have them in this order link, visited, hover, active. Otherwise they won't work properly. Let me know how it goes!
You can see these menus at:
http://www.webtestinglab.com/tutorials/
CSS pretty Horizontal and Vertical Menus
18 Sep, 2007 - 01:44 PM
|