Pure CSS Horizontal Menu (SEO Friendly)
(NOTE!!! This Tutorial Has An Update In Order To Support IE5.5 and IE6 with pseduo CSS hover states)CLICK HERE FOR THIS TUTORIALS UPDATE!
Today I wanted to share the easy method of creating a pure CSS horizontal navigation menu with you.You see a lot of sites using them and while some are very creative others are way off base as far as functionality and SEO is concerned.So without further ado let’s begin to create this horizontal navigation menu.
Here is our blank document we will use to for this 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 start off by creating a container for our navigation links by using a div box. I will give my div box an id of “navigation" but you may name it whatever you like as long as it corresponds to our CSS that we will write here in a second.
<body> <div id="navigation"></div> </body>
Ok now that we have a simple container for our navigation links we can begin to add some style rules to it. In order to give style rules to our navigation we will need to make some open and close style tags that will contain all of this tutorials CSS.
<head> <style type="text/css"> </style> </head>
Let’s now start styling our navigation container by giving it a width, height and background color.
<style type="text/css">
#navigation{
width:100%;
height:30px;
background-color:#999;
}
</style>
If you are unfamiliar with writing CSS I strongly suggest you read up on some CSS basic tutorials you can find out on the internet for free.
Ok so let’s look at what we have done to our container.
Nothing special looking yet but we now have our container setup to move forward in creating our navigation menu. Now let’s add our menu items to our navigation container by using the unordered list method. Go back to our navigation container and add the following.
<body> <div id="navigation"> <ul> <li>Menu Item 1</li> <li>Menu Item 2</li> <li>Menu Item 3</li> <li>Menu Item 4</li> </ul> </div> </body>
Here is what our navigation menu should look like now.
You might be wondering how this is going to be a horizontal menu when our list items are ordered like a vertical menu. Well we still need to create a few more rules in order to turn our menu into a horizontal look. Go back up to our CSS and add the following rules.
<style type="text/css">
#navigation{
width:100%;
height:30px;
background-color:#999;
}
#navigation ul
{}
#navigation ul li
{}
</style>
(#navigation ul) tells our browser to start adding specific rules to any <ul> in our navigation container. (#navigation ul li) tells our browser to start reading specific rules to any <ul> <li> in our navigation container. Now that we are directly pointing to our <ul> and <li> lets add some property's to these guys. Make these new rules in your CSS look like this.
#navigation ul
{margin:0px; padding:0px;}
#navigation ul li
{display:inline; height:30px; float:left; list-style:none;}
What we have done here is we first told our <ul> to have a margin and padding to have a 0px. We do this to tell our navigation to be positioned into our container at top left. Later we can play with how much we want the navigation to be positioned off the top and left of our container.
Next we point directly to our list items and give them style rules of display, height, float and list style. The display rule is set to inline to position our list items in a horizontal fashion and the float rule has a style of left to help with the list items and their horizontal fashion. We have also set our height rule to 30px to match the height of our over all menu and list-style rule is set to none to remove our list item bullets or dot.
Great now we are on track to creating a horizontal menu, but hmm it looks kind of bunched up in there and hard to read where one menu item starts and another menu item ends. To fix this lets go back to our CSS rule for our <li> and add a left margin.
#navigation ul li
{display:inline; height:30px; float:left; list-style:none; margin-left:5px;}
Here are our results.
Much better now, we can clearly see where each menu item starts and ends.
Let’s now turn our menu items into links. Make your menu items look like the following.
We will not worry about where each item links to because this is out of the scope of this tutorial.
<ul>
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
<li><a href="#">Menu Item 4</a></li>
</ul>
Here are our results now that we have wrapped each of our list items text around links.
YIKES, that’s just plain ugly looking right?
Ok let’s look at two things wrong here and see if we can’t fix this with CSS. First our menu items now have a solid blue color that is standard for all links but this is our navigation and we may want to style it differently for obvious reasons. The other problem is that each link now has underline text decoration. It’s common for menu items to only display an underline text decoration when the menu item is being hovered over.
Ok let’s fix these two issues now by adding rules to our link tags <a> in CSS.
#navigation li a
{}
#navigation li a:hover
{}
Like before with our navigation container and our unordered list and items we need to tell our CSS to specifically point to our <a> link tags and to follow our specific rules we will set for it. We are also going to be setting a hover rule to our link tags in order to give a proper underline text decoration when a user hovers over a link.
Here are our rules and their new property's for our <a> tags.
#navigation li a
{color:#fff; text-decoration:none;}
#navigation li a:hover
{color:#fff; text-decoration:underline;}
Now our 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 our links should still have a font color of white but now should have a text decoration of underline.
Here are our results now.
Our menu is looking great now, but you might be asking yourself. "Self", what if I want to have sub menu items? How would I go about creating something like that?" Good question, let’s look at how we can create a sub menu's for each menu item that is displayed only when a user hovers over our main menu items.
First let’s get an idea of what our sub menu should look like. Usually sub menus are in a vertical fashion similar to when we first started our navigation menu.
Let’s start to create our sub menu.
<ul>
<li>sub menu item 1</li>
<li>sub menu item 2</li>
<li>sub menu item 3</li>
<li>sub menu item 4</li>
</ul>
You now might be asking, "Where do we put this second unordered list of sub menu items?". Well believe it or not we actually put it within each of our main menu items <li>.
Make your code look like the following.
<div id="navigation">
<ul>
<li>
<a href="#">Menu Item 1</a>
<ul>
<li>sub menu item 1</li>
<li>sub menu item 2</li>
<li>sub menu item 3</li>
<li>sub menu item 4</li>
</ul>
</li>
<li>
<a href="#">Menu Item 2</a>
<ul>
<li>sub menu item 1</li>
<li>sub menu item 2</li>
<li>sub menu item 3</li>
<li>sub menu item 4</li>
</ul>
</li>
<li>
<a href="#">Menu Item 3</a>
<ul>
<li>sub menu item 1</li>
<li>sub menu item 2</li>
<li>sub menu item 3</li>
<li>sub menu item 4</li>
</ul>
</li>
<li>
<a href="#">Menu Item 4</a>
<ul>
<li>sub menu item 1</li>
<li>sub menu item 2</li>
<li>sub menu item 3</li>
<li>sub menu item 4</li>
</ul>
</li>
</ul>
</div>
Ok let’s look at the results of add our sub menu items to our overall menu.
YIKES AGAIN! What happen to our menu it’s all messed up now! Well we still have to create just a few more CSS rules in order to get the look we are trying to accomplish.
Before we begin to write our new CSS rules lets think about how the whole thing is set up as far as parent to child elements are concerned.
#navigation -> ul -> li -> ul -> li
We have our navigation container, and its list of menu items. In each menu list item we start another list of menu items. So we need to create CSS rules that point specifically to our sub menu items. Add the following to your CSS.
#navigation li ul
{ }
#navigation li:hover ul
{ }
#navigation li li
{ }
Here we are setting up rules that say if our navigation container list item has a sub unordered list and list items in it, then follow these CSS rules. We are also setting up a rule for when a user hovers over a list item in our main menu to display our sub menu.
So let’s add these property's to our new rules and start making this submenu perform the way we need it to.
#navigation li ul
{
margin:0px;
padding:0px;
display:none;
}
#navigation li:hover ul
{
display:block;
width:160px;
}
#navigation li li
{
list-style:none;
display:list-item;
}
Again we set our sub menu <ul> to have a margin and padding of 0px but we now have added a display rule to it. This display rule is telling our main menu to hide our sub menu from the user.
Next we set a hover state to our main menu list items that says if a user hovers over any one of our main menu items then indeed display its sub menu.
Finally we have to style our sub menu items to have no list item dots and also be listed in a vertical fashion instead of following its parent’s rule of the horizontal look.
Let’s see what our results look like now.
Ok well we in fact have our sub menu list items styled correctly and our sub menu only displays when we hover over our main menu list items. The problem we now have is that the sub menu items are not being displayed under our main menu items respectively but rather always to the far left resulting in some undesirable effects. We also have no background colors set for our sub menu making it look a little weird.
How do we fix these two issues? Well to position our sub menu correctly we have to go back to our main menu list item rule we wrote a while back and add a position property to it. So make your main menu list item rule look like the following.
#navigation ul li
{
display:inline;
height:30px;
float:left;
list-style:none;
margin-left:15px;
position:relative;
}
This is preparing our submenu to be positioned relatively absolute to our main menu items. So now add the a (position:absolute;) to our sub menu <ul> rule.
#navigation li ul
{
margin:0px;
padding:0px;
display:none;
position:absolute;
}
We not only have to add a position of absolute to our sub menu <ul> rule but also a left:0px; and top:20px; property in order to stop the browser from trying to guess where we specifically want the sub menu to be positioned relatively absolute to our main menu items.
All this left rule is saying is that we want our sub menu to be position left by 0px to our relatively positioned main menu list item.
#navigation li ul
{
margin:0px;
padding:0px;
display:none;
position:absolute;
left:0px;
top:20px;
}
We also wanted to fix our sub menus background color so let’s add it and make it the same color as our main menu.
#navigation li ul
{
margin:0px;
padding:0px;
display:none;
position:absolute;
left:0px;
top:20px;
background-color:#999;
}
Let’s again take a look at our results.
Excellent we now have a great responding sub menu that pops up when you roll over our main menu items! But hey how come our sub menu items have a font color of black and they don’t have any text decoration? Well in short we again need to wrap our sub menu items around a link <a></a> and write our last CSS rules.
Make each sub menu look the following.
<ul> <li><a href="#">sub menu item 1</a></li> <li><a href="#">sub menu item 2</a></li> <li><a href="#">sub menu item 3</a></li> <li><a href="#">sub menu item 4</a></li> </ul>
And finally add the following CSS rules and property's.
#navigation li li a
{color:#fff; text-decoration:none;}
#navigation li li a:hover
{color:#fff; text-decoration:underline;}
Here we are pointing specifically to our sub menu links and saying if a link is not being hovered over then have a font color of white and no text decoration. If a sub menu link is being hovered over then still have a font color of white and a text decoration of underline.
Here are our final results.
And that’s it folks! You have now created a pure horizontal CSS menu that has a pop out sub menus.
This method of a horizontal menu is both cross-browser friendly and also the best method for a SEO approach.
Here is the demo if you want to have a peek.(NOTE!!! This Tutorial Has An Update In Order To Support IE5.5 and IE6 with pseduo CSS hover states)
CLICK HERE FOR THIS TUTORIALS UPDATE!
Enjoy! Devin R. Olsen
