Horizontal Menu Bar Using Style Sheets

How to construct a horizontal menu bar using CSS.

The HTML

First we will create a div, in the body of our HTML, to hold the navigation bar in and we will give it an id (better explanation of the id attribute) of “nav” (short for navigation). The id will allow us to easily reference to in the style sheet later on.

…<body>…
<div id="nav">
   
</div>

…</body>…

Now we are going to create an unordered list to hold the liks in. One of the reasons that a list is being used is because a list is for related items; each element of the list is a link to navigate around the site. In the future with XHTML 2.0, there is going to be a navigation list “<nl>” just for this; it will also include the ablitly to easily create drop down menus.

<div id="nav">
   <ul>
      <li></li>
   </ul>

</div>

Now for each list item (li) we are going to place one of the links we want.

<div id="nav">
   <ul>
      <li><a href="http://mywebpages.comcast.net/moronicbajebus/">Sea Mus N Squirrel</a></li>
      <li><a href="http://mywebpages.comcast.net/moronicbajebus/about/">About</a></li>
      <li><a href="http://mywebpages.comcast.net/moronicbajebus/cssplay/">CSS Play</a></li>
      <li><a href="http://mywebpages.comcast.net/moronicbajebus/rantsandlike/">Rants &amp; Like</a></li>
   </ul>
</div>

So now our HTML is done and it should look something like this:


Basic CSS

Now we will apply some CSS to the list to create the basic navigation bar. We will refer to the HTML elements in our CSS with the id name of the div “#nav” followed by the the tag; So when we refer to the list (ul) we will do “#nav ul”. This way our code will be easier to read and we do not need to create a class for the list, list items, and links.

The unordered list by default in the web browser has margins and padding to indent and add white-space at the top and bottom of the list. So let us override in our stylesheet the defaults, to prevent odd problems later on, with “padding : 0;” and “margin : 0;” for “#nav ul”.

#nav ul{
   padding : 0;
   margin : 0;
}

It should look something like this now:

To get each list item on the same line we will apply “display : inline;” to “#nav ul li” to override the default value of block. The value block is how paragraphs (p), headers (h1 through h6), list (ol, ul, etc), divisions (div), and other tags display by default; these elements are placed in rectangular boxes. While value inline is how hyperlinks (a) and span display; these are displayed in across lines of text. An inline element can appear inside of a block element.

Block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block inline inline inline inline inline inline inline inline inline inline inline inline inline inline inline inline inline inline inline inline inline inline inline inline inline inline block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block block

And one last thing, to prevent the items of the list from wrapping around when the screen is to small we will add “white-space : nowrap;” to “#nav ul”.

#nav ul{
   padding : 0;
   margin : 0;
   white-space : nowrap;
}

#nav ul li{
   display : inline;
}

Now you should have a basic horizontal menu that should look very much like:


Styling It

The navigation menu is now horizontal, but there is nothing to set it apart from the rest of the text on a webpage making it harder to find. We will add a background color of #003399 (“background-color: #003399;”) and a foreground color of White (“color: White;”) to our list (“#nav ul”).

#nav ul{
   padding : 0;
   margin : 0;
   white-space : nowrap;
   background-color : #003399;
   color : White;
}

#nav ul li{
   display : inline;
}

Notice the links are not easy to read nor do they look very navigationable. We can improve this by styling the hyperlinks themselves (“#nav ul li a”). Make the background color #0066CC to offset it and a foreground color of White. To make it look more like a button we can get rid of the underline “text-decoration : none;” and make the text bold so it will stands out more “font-weight : bold;”.

#nav ul{
   padding : 0;
   margin : 0;
   white-space : nowrap;
   background-color : #003399;
   color : White;
}
#nav ul li{
   display : inline;
}
#nav ul li a{
   background-color : #0066CC;
   color : White;
   font-weight : bold;
   text-decoration : none;
}

It is now getting there but there are a few things we can tweak. To increase the visual pleasantries of the links add padding on the right of one (1) empadding-right : 1em;” and left “padding-left : 1em;”. Also, change the padding for the list from 0 to 3px (“padding : 3px;”). Please note that there should be no space between the number and the measurement unit; correct: 3em, incorrect: 3 em.

#nav ul{
   padding : 3px;
   margin : 0;
   white-space : nowrap;
   background-color : #003399;
   color : White;
}
#nav ul li{
   display : inline;
}
#nav ul li a{
   background-color : #0066CC;
   color : White;
   font-weight : bold;
   text-decoration : none;
   padding-left : 1em;
   padding-right : 1em;
}

Now it looks like the final product but it is still missing the mouse-over effect. To add a mouse over effect we need to use the selector :hover with on the link; add a new entry in our CSS “#nav ul li a:hover”. Now any style rules we place with this will be applied when the mouse cusor is placed over the link (a). Make the background color for it #99CCFF; and the foreground color #000066.

#nav ul{
   padding : 3px;
   margin : 0;
   white-space : nowrap;
   background-color : #003399;
   color : White;
}
#nav ul li{
   display : inline;
}
#nav ul li a{
   background-color : #0066CC;
   color : White;
   font-weight : bold;
   text-decoration : none;
   padding-left : 1em;
   padding-right : 1em;
}
#navmed ul li a:hover{
   background-color : #99CCFF;
   color : #000066;
}

View an example page and stylesheet.


Advance Styling

More can be done to style the menu bar.

#nav ul{
   padding : 0;
   margin : 0;
   white-space : nowrap;
   background-color : #003399;
   color : White;
   float : left;
   width : 100%;
   border-style : solid;
   border-color : #0066CC;
   border-width : 2px 0 2px 0;
}
#nav ul li{
   display : inline;
}
#nav ul li a{
   padding-left : 1em;
   padding-right : 1em;
   background-color : #003399;
   color : White;
   font-weight : bold;
   text-decoration : none;
   float : left;
   border-right-color : #0066CC;
   border-right-style : solid;
   border-right-width : 1px;
}
#nav ul li a:hover{
   background-color : #99CCFF;
   color : #000066;
}


#nav{
   white-space : nowrap;
   background-color : #003399;
   float : left;
    color : White;
   width : 100%;
   border-style : solid;
   border-color : #0066CC;
   border-width : 2px 0 2px 0;
}
#nav ul{
   padding : 0;
   margin : 0;
   float : right;
}
#nav ul li{
   display : inline;
}
#nav ul li a{
   padding-left : 1em;
   padding-right : 1em;
   background-color : #003399;
   color : White;
   font-weight : bold;
   text-decoration : none;
   float : left;
   border-right-color : #0066CC;
   border-right-style : solid;
   border-right-width : 1px;
}
#nav ul li a:hover{
   background-color : #99CCFF;
   color : #000066;
}

More Resources

© 2003 Seamus P. H. Leahy
You may take and improve upon this.