Now a days CSS based navigation menus are much popular among the designers. Undoubtedly the reason is, as these menus are created with pure HTML and CSS, hence they are crawler friendly and every one of us wants our website to be visible by the search engines. With the help of CSS we can create single level menu, 2 level menu or multiple level menus. Here I would like to share a method to create pure CSS horizontal navigation menu.
Note: Previous knowledge about some basic HTML and CSS is required.
Let’s take a blank document to use for the tutorial.
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> </body> </html>
Let’s create a container for the navigation links using a div. Let’s assign id “navigation” to the div.
<body> <div id="navigation"> </div> </body>
Now, let’s style our navigation container.
<style>
#navigation{width:100%; height:30px; background:#ccc}
</style>
Let’s have a look at our navigation container.
Now move forward in creating our navigation menu and add menu items to our navigation container in the HTML by using the unordered list method. Also add some dummy link to your menu items (which can be replaced at any point of time as per your need).
<body> <div id="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> </body>
Here is how our navigation should look now.
Well this looks like a vertical menu, isn’t it? Isn’t supposed to be vertical as we have unordered list? Yes true, however still we need to add certain styles to transform the menu into horizontal orientation. Let’s go back to CSS and add the following rules.
<style>
#navigation{ width:600px; height:30px; background:#6A9F00}
#navigation ul{ }
#navigation ul li{ }
</style>
” #navigation ul ” tells the browser to start adding specific rules to any <ul> in the navigation container.
” #navigation ul li ” tells the browser to start reading specific rules to any <ul> <li> in the navigation container. Let’s add some style property to these. The most important trick to transform the menu into horizontal orientation lies here.
<style>
#navigation{ width:600px; height:30px; background:#6A9F00;}
#navigation ul{ margin:0; padding:0;}
#navigation ul li{ display:inline; list-style:none; float:left;}
</style>
Woo Hoo! Here is the orientation of navigation has changed to horizontal. Before we proceed to add further style properties and make the navigation look more professional here is an explanation about the CSS style we just did.
First of all, we have set the position of the navigation inside the container to top left by setting ” margin:0 ” and ” padding:0 ” of #navigation ul. Later we can play around to set the position of navigation how much we want off the top or left of the navigation container.
Next we have styled the #navigation ul li with properties like display, float, height, list-style.
” display:inline ” setting the display of the items li to inline; li items goes in horizontal order (The Trick)
” float:left ” makes sure li items floats left to each other
” height:30px ” to match the height of the container
” list-style:none ” to remove the default round bullets or dots
Okay, now that we have something inline with horizontal navigation but link items are look like glued to each other. To fix this lets go to our css and add left-margin and right margin for <li> items.
#navigation ul li{ display:inline; list-style:none; float:left; margin: 0 30px;}
Here is how the menu looks like now.
This looks much better now. However the default solid blue color for the link doesn’t stand with the green background. Let’s style the default link color and add some link mouse over effect. First add the following css rule to <a> tag of the li item.
#navigation li a{ }
#navigation li a:hover{ }
Now add some properties to the css rules such as color, text-decoration etc. We are also going to be set a hover rule to our link tags in order to give a proper underline text decoration when a user hovers over a link.
#navigation li a{ color:#fff; text-decoration: none;}
#navigation li a:hover{ color:#fcee8d; text-decoration: underline;}
Now the links should have a white font color but no underline if we are not hovering over them.
If we are hovering over a link then the links should have a font color of yellow and text decoration of underline.
Here is the navigation looks like now.
The navigation is almost there, just links seems to be more close to the top edge of the green background, so just add some top padding to the #navigation ul
#navigation ul{ margin:0; padding: 3px 0 0 0;}
That’s it, here is our pure css horizontal navigation menu ready.
I have another unobstrusive nav menu
Check out here:
xhtml-valid-websites.com/demos/simple-site-with-jquery-dropdown-menu/index.html
If you deactivate jQuery it still works fine
[...] article will continue from where I left of with Pure CSS Horizontal Menu. A lot of websites having a menu such as the one we built in the previous article, however for some [...]