Learning Web Design : Create simple CSS web navigation / menu
Here is the code to create a simple CSS web navigation menu. This article is in continuation to my previous post Learning Web Design : 5 New Free CSS Website Templates. The navigation menu is based on the CSS and DIV (created using an unordered list) code. I have tried to make it short and simple to understand. The code is explained in a manner assuming the reader has a basic knowledge of HTML. I hope you will find this example beneficial.
The code includes two parts one HTML and another CSS which is well explained below:
HTML:
<body>
<div id=”nav”>
<ul>
<li><a href=”#” class=”active”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Portfolio</a></li>
<li><a href=”#”>Blog</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</div>
</body>
HTML code explained:
Line 1 – body tag starts
Line 2 – DIV tag with unique ID (nav) starts
Line 3 – Unordered list starts
Line 4 – Linked list item having class active (active class – to point out which page is active)
Line 5-9 – Other linked list item in menu.
Line 10 – Unordered List closed.
Line 11 – DIV tag closed
Line 12 – body tag closed
CSS:
body { margin: 0px; padding: 0px; }
#nav { height:40px; width:465px; margin:20px auto; padding:0; }
#nav ul { margin:0; padding:0; list-style:none; }
#nav ul li { line-height:40px; float:left; }
#nav ul li a{ line-height:40px; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; text-decoration:none; padding:0 20px 0 20px; color:#FFFFFF; background-color:#999999; display:block; }
#nav ul li a:hover { background-color:#333333; }
#nav ul li a.active{ background-color:#333333; }
CSS code explained : Style Sheet code explained to describe the presentation of a document written in a markup language.
Line 1 – Set margin and padding to 0 as browser takes default margin and padding which can make trouble for you by creating some extra white space.
Line 2 – Created unique ID (nav), the main container to navigation and defined its height, width, margin (20 from top and auto{0} to others) and padding.
Line 3 – Defined list style (none) to Unordered List as it will not take its default bullet signs.
Line 4 – Defined line height to every list item we will be having in our Unordered List and gives its direction to left by just adding float to left.
Line 5 – As we having every item of our list linked to another page, defined some styles to decorate list items by font-family, font-size, font-weight, text-decoration (none to remove default link color), padding (20px from left and right), color (to text), background-color and display:block (display background color to link box).
Line 6 – Defined link hover properties to set OnMouseOver effect to every linked list item. I have only changed the color in link hover property.
Line 7 – Defined active link class which will show the defined style properties to the active page link. Just change the class to page link as in Line 4 of HTML.
So whenever needt o create a simple web navigation / menu based on CSS and DIV you can referto this example.
April 8th, 2009 at 3:05 pm
No demo? Not picture?