Mini Slide Navigation
So I was recently 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...leave comments here). I'm not sure this is any great innovation here, and I'm not claiming it to be.
I essentially applied the small Javascript created by Steve Chipman @ Slayeroffice for his neat Focus Slide navigation to the equally neat Mini Tab navigation treatment created by Dan Cederholm @ Simplebits, with a few CSS tweaks. So instead of having the bottom indicators "appear" when you hover over the navigation link, the indicator slides between the navigation choices. So if you are a CSS purist, you can go with Dan's creation. Or you can add Steve's little Javascript (so Web two point oh-ish) and give the navigation a little bit of life. For some reason, the middle navigation (it says "Methodology" in the example) seems a bit off center. I'll look into this sometime soon.
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. Enjoy!
The markup for the navigation you see above is as follows.
<ul id="navheader">
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Portfolio">Portfolio</a></li>
<li><a href="#" title="Methodology">Methodology</a></li>
<li><a href="#" title="Prices">Prices</a></li>
<li><a href="#" title="Contact">Contact</a></li>
</ul>
-->
<