Cascading Style Sheets (CSS) is a style sheet language used to describe the look and formatting of a document written in a markup language, most commonly use in (x)HTML. These menus are based on the <ul> tag (Unordered List) and structure and designed in the CSS. In the CSS you can define what direction to “list” the menu: Horizontal or Vertical. I’ll be covering both in this two part tutorial and will be provide a complete code for both examples.
Starting off, type out an unordered list in the body section of the web page, which will look something like this:
<ul id="nav"> <li><a href="#" class="current"><span>Home</span></a></li> <li><a href="#"><span>About Us</span></a></li> <li><a href="#"><span>Services</span></a></li> <li><a href="#"><span>Our Work</span></a></li> <li><a href="#"><span>Contact Us</span></a></li> </ul>
Ok so breaking down the structure. The <ul> tag tells the browser to display a bullet’ed list (to which disable the bullets in the css) and show the list items (<li>) one on top of each other.
Starting with vertical, we’ll need to create the embed <style> tag inside of the <head></head> tags. We’ll need to type out all the variables that need to be altered so feel free to copy the following:
<head>
<style type="text/css">
<!--
#nav {/*The UL tag itself*/}
#nav li {/*The individual List Items*/}
#nav li a {/*The links to each List Item*/}
#nav li a:hover {/*When the mouse hovers over the link*/}
#nav li a.current, #nav li a.current:hover {/*For the links with the class of current*/}
-->
</style>
</head>
Working from the top down here’s the attributes for #nav
#nav {/*The UL tag itself*/
margin:0;
padding:0;
list-style-type:none; /*disable the bullets*/
font:bold 16px Helvetica, Verdana, Arial, sans-serif;
line-height:165%; /*Increase height between links*/
width:200px; /*Set overall width of the navigation*/
}
Next define the individual list items
#nav li {
margin:0;
padding:0;
border-top:1px solid #003300;
border-bottom:1px solid #176A1A;
}
Then the individual links for each list items
#nav li a {
display:block; /*Ensures that background color fills the entire link*/
text-decoration:none; /*Disables the default underline*/
color:#ffffff; /*Font color White*/
background:#066000; /*Forest Green*/
padding:0 0 0 20px; /*20 pixels form the left*/
width:180px; /*New width minus the 20 padding from the left*/
}
Now the individual link’s hover states
#nav li a:hover {
background:#099000; /*Lime Green*/
}
Finally the individual link’s hover states
#nav li a.current, #nav li a.current:hover {
background:#399333; /*Sea Foam Green*/
}
So you should end up with this
<html>
<head>
<title>Vertical CSS Menu</title>
<style type="text/css">
<!--
#nav {
margin:0;
padding:0;
list-style-type:none;
font:bold 16px Helvetica, Verdana, Arial, sans-serif;
line-height:165%;
width:200px;
}
#nav li {
margin:0;
padding:0;
border-top:1px solid #003300;
border-bottom:1px solid #176A1A;
}
#nav li a {
display:block;
text-decoration:none;
color:#fff;
background:#066000;
padding:0 0 0 20px;
width:180px;
}
#nav li a:hover {
background:#099000;
}
#nav li a.current, #nav li a.current:hover {
background:#399333;
}
-->
</style>
</head>
<body>
<ul id="nav">
<li><a href="#" class="current"><span>Home</span></a></li>
<li><a href="#"><span>About Us</span></a></li>
<li><a href="#"><span>Services</span></a></li>
<li><a href="#"><span>Our Work</span></a></li>
<li><a href="#"><span>Contact Us</span></a></li>
</ul>
</body>
</html>