Web Design by Sheriar Designs: Impeccable Code | Beautiful Design

In Semantic and Gorgeous Navigation Bars I explained the method I use for creating nav bars based on unordered lists which display as images and have hover and on states. Today I want to take that concept a bit further.

The idea is really the same, I’m just doing two things a little differently. First, I’m including photographs as part of my “nav button,” and secondly, I’m using some absolute positioning. First, have a look at the project I’m talking about (designed by Travis D. Falls) and check out the left sidebar. You’ll see that hovering over the “buttons” or the images associated with them will cause the entire block to light up. Let me quickly show you just how easy that actually is to accomplish.

The XHTM

Yeah … it’s this simple.

<ul id="leftnav">
<li>About</li>
<li>Our Flavors</li>
<li>Events</li>
<li>Contact Us</li>
</ul>

The CSS

Believe it or not, this is pretty simple too. Looks long ’cause of all the helpful commenting. ;o)

/* gives the leftnav ul a width and height and positions it relatively so that the links can be positioned within it absolutely */
#leftcol #leftnav {
width:206px;
height:239px;
list-style-type:none;
position:relative;
}

/* links are given a display of block so they can be given a width and height */
#leftcol #leftnav a {
display:block;
position:absolute;
}

/* link text is hidden */
#leftcol #leftnav a span {
position:absolute;
width:500px;
margin-left:-5000px;
}

/* all the links below will be given appropriate widths and heights. the graphics for them are just one graphic each (which means that no pre-loading of graphics is necessary to prevent flicker), the off state stacked above the on state. when the link is inactive, the top image is viewable. when the link is hovered over, the background position of the background image changes, revealing the bottom image. links are also given aboslute positions corresponding to the four corners of the containing ul. the addition of a class of "on" allows you to turn each button on permanently on any page. */

#leftcol #leftnav a#ln_about {
width:101px;
height:119px;
background:url(../_images/ln_about.jpg) no-repeat 0 0;
top:0;
left:0;
}
#leftcol #leftnav a#ln_flavors:hover,
#leftcol #leftnav a#ln_flavors.on {
background:url(../_images/ln_flavors.jpg) no-repeat 0 -119px;
}
#leftcol #leftnav a#ln_flavors {
width:105px;
height:119px;
background:url(../_images/ln_flavors.jpg) no-repeat 0 0;
top:0;
right:0;
}
#leftcol #leftnav a#ln_about:hover,
#leftcol #leftnav a#ln_about.on {
background:url(../_images/ln_about.jpg) no-repeat 0 -119px;
}
#leftcol #leftnav a#ln_events {
width:101px;
height:120px;
background:url(../_images/ln_events.jpg) no-repeat 0 0;
bottom:0;
left:0;
}
#leftcol #leftnav a#ln_events:hover,
#leftcol #leftnav a#ln_events.on {
background:url(../_images/ln_events.jpg) no-repeat 0 -120px;
}
#leftcol #leftnav a#ln_contact {
width:105px;
height:120px;
background:url(../_images/ln_contact.jpg) no-repeat 0 0;
bottom:0;
right:0;
}
#leftcol #leftnav a#ln_contact:hover,
#leftcol #leftnav a#ln_contact.on {
background:url(../_images/ln_contact.jpg) no-repeat 0 -120px;
}

The Images

Taking It Further

If you wanted to have an “on” state that was different from the hover one, just increase the heigh of your nav graphics and place another image below the other two, then change your css from:

#leftcol #leftnav a#ln_about:hover,
#leftcol #leftnav a#ln_about.on {
background:url(../_images/ln_about.jpg) no-repeat 0 -119px;
}

to:

#leftcol #leftnav a#ln_about:hover {
background:url(../_images/ln_about.jpg) no-repeat 0 -119px;
}
#leftcol #leftnav a#ln_about.on
background:url(../_images/ln_about.jpg) no-repeat 0 -238px;
}

That’s a Wrap

You can take another look at the finished product. I think it’s actually a lot easier than I would have thought when I first received this mockup to code. What do you think?

This entry was posted on Monday, April 24th, 2006 at 10:04 am and is filed under CSS, Tips and Tricks, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.