Creating A More Dynamic Navigation Bar

This week’s tutorial is a step deeper into navigation rollovers. Instead of having the roll over effect on the button the mouse is over, we will add it to all other navigation buttons.

To begin, we need to create our navigation button. First, we make a full navigation bar like below with all the states included.

Then we splice each button from the other so we have something like this.

Now that we have our images built and ready to go, let’s begin building the CSS coding. We begin by building the main navigation div.

#main_nav { list-style: none; margin: 0; padding: 0; }

Then we build the main hovers. This section will make every button we are not currently on show it’s defaulted hover state. The position, background-position: 0 -100px;, this section tell the CSS to start the image 100px from the top.

#main_nav:hover li a { background-position: 0 -100px; }

Then, we build the secondary default settings. We want each list item to sit snuggly to the next so we float them left. Then we code the hyperlinks within the list. So here we set the text indent so the text will not show. We set the overflow, or anything we do not wish to display, to be hidden. Lastly we set the link to be a block and the height to 49px.

#main_nav li { float: left; }

#main_nav li a { text-indent: -999999px; overflow: hidden; display: block; height: 49px; }

The last part of the CSS is to create the different states of each button. I will only show you one here to make the process more clear. So we need to set the “home” id’s background and width.

#home { background: url(http://images.ientrymail.com/nowcss/navibutton/home.jpg); width: 100px; }

Then we build the true hover state. This will overwrite the default hover. It is very important to set the background position on the hover to 0 pixels and 0 pixels, this with make sure the image is at the top rather then 100 pixel from the top.

#home:hover { background: url(http://images.ientrymail.com/nowcss/navibutton/home.jpg) 0 0 !important; }

Lastly, we build the active state so if you are on the page that the image links to it will display correctly.

#home.active { background: url(http://images.ientrymail.com/nowcss/navibutton/home.jpg) 0 -50px; }

Now that we have our CSS created, let’s build our HTML.

<ul id="main_nav">

<li><a href="index.html" accesskey="3" id="home" title="Home Page">Home Page</a></li>

<li><a href="about.html" accesskey="4" id="about" title="About Us">About Us</a></li>

<li><a href="design.html" accesskey="5" id="design" class="active" title="Web Design and Development">Design</a></li>

<li><a href="style.html" accesskey="6" title="Graphical Influences" id="style">Style</a></li>

<li><a href="innovation.html" accesskey="7" title="Building From Nothing" id="innovation">Innovation</a></li>

<li><a href="imagination.html" accesskey="7" title="Seeing What Is Not Yet" id="imagination">Imagination</a></li>

<li><a href="contact.html" accesskey="8" id="contact" title="Contact Us">Contact Us</a></li>

<li><a href="career.html" accesskey="8" id="career" title="Join Our Team">Career</a></li>

</ul>

And you are done. Click here to see the final version.

Leave a comment