Mini Slide Navigation

Originally Published: January 3, 2006

I was playing around with a couple of navigation treatments that I've seen - Simplebits' MiniTabs and SlayerOffice's Focus Slide and I came up with a navigation "mash-up" of the two. I'm calling it the Mini-Slide Navigation (my blog post permalink. Feel free to leave comments here).

This has been tested on IE 5+ and Firefox 1.5+, however I made no changes to the Slayeroffice JS so the testing done there should be valid for this. Let me know if you make any enhancements or edits so I can update my version. Enjoy!


 

The style sheet and Javascript for the navigation is below:

The markup for the navigation you see above is as follows.

<ul id="navheader">
<li id="home"><a href="#" title="Home">Home</a></li>
<li id="portfolio"><a href="#" title="Portfolio">Portfolio</a></li>
<li id="methodology"><a href="#" title="Methodology">Methodology</a></li>
<li id="prices"><a href="#" title="Prices">Prices</a></li>
<li id="contact"><a href="#" title="Contact">Contact</a></li>
</ul>
Updates:
  1. The middle navigation being off center has been resolved. The slider width paramater in the javascript had to be fixed to align with the slider class in the CSS.
  2. I took Martin's advice and changed the CSS to activate the whole area over the slider vs. just the word.
  3. I updated the navigation CSS so now it has an "active" tab so to indicate where the user is within the navigation/site. I used the "decendant selectors" method in creating the active tab, where I gave both the page's <body> tag and each navigation item its own unique id so I could style specific elements of the page based on the relationship to the parent element.
  4. Since the original publication, two people have built on what I did and improved this some more.
    Visit Rob Glazebrook's Smart Mini Tabs and Brian McAllister's Animated MiniTabs