ZLOG Icon Rollover Tutorial
While working through ZLOG with Zach, we quickly discovered how to push each other in our own environments. After checking off the big list items, we began to dig through the site content seeing how we could clarify while adding more to the table.
The navigation rollover icons were one:
Zach began drafting up some icons, which finalized to these:
Here’s the foundation to our navigation, luckilly for us WordPress created the list item classes in the HTML.
<li class="page_item page-item-3"><a href="http://zlogblog.com/blog/" title="Blog">Blog</a></li>
<li class="page_item page-item-2 haschildren"><a href="http://zlogblog.com/about/" title="About">About</a></li>
<li class="page_item page-item-78"><a href="http://zlogblog.com/gumwall/" title="Gumwall">Gumwall</a></li>
<li class="page_item page-item-10"><a href="http://zlogblog.com/contact/" title="Contact">Contact</a></li>
<li class="page_item page-item-7"><a href="http://www.zlog.bigcartel.com" target="_blank">Boutique</a></li>
header.php rendered HTML of navigation.
This is where the magic happens.
Moving over to the stylesheet we can create the rollover code for each list item class.
.page-item-3:hover {
background:url(images/icon-home.gif) 0 0 no-repeat;
}
Cool, it works. But I notice a glitch upon first rollover. What this means is the image hasn't fully loaded yet, causing the flicker. You can use Javascript to preload the images but that seems prehistoric doesn't it? Isn't CSS what the cool kids are doing?
We hide images via CSS on the daily, all it takes is a lot of negative pixels to push something off the screen, causing it to temporarily be hidden — but still fully load. Cool, no extra javascript, no ugly preload. Let's do this.
.page-item-3 {
background:url(images/icon-home.gif) -99999px 0 no-repeat;
}
.page-item-3:hover {
background-position: top right;
}
Not bad, everything loads fine with no glitches. Can we go outside yet?
BUILDING THE REST
After going through each list item, we see some redundency in the code that can be cleaned up.
For example: Every .page-item has the same :hover property to move the background image into visibiality.
.page-item-3:hover {
background-position: top right;
}
.page-item-2:hover {
background-position: top right;
}
.page-item-7:hover {
background-position: top right;
}
.page-item-78:hover {
background-position: top right;
}
.page-item-10:hover {
background-position: top right;
}
EXTRA CREDIT
Let's simplify this:
.page-item-3:hover,
.page-item-2:hover,
.page-item-7:hover,
.page-item-78:hover,
.page-item-10:hover {
background-position: top right;
}
Everything still loads properly, the images are preloaded with no glitches or extra script resources, and now ZLOG has rollover icons for their navigation.
YEAH!