Flickr Photos
Support
Currently Enjoying
Subscribe
Archives
- September 2008
- August 2008
- July 2008
- June 2008
- May 2008
- April 2008
- March 2008
- February 2008
- January 2008
- December 2007
- November 2007
- October 2007
- September 2007
- August 2007
- July 2007
- June 2007
- May 2007
- April 2007
- March 2007
- February 2007
- January 2007
- December 2006
- November 2006
- October 2006
- September 2006
- August 2006
- July 2006
- June 2006
- May 2006
- April 2006
- March 2006
- February 2006
- January 2006
- December 2005
- November 2005
- October 2005
- September 2005
- August 2005
- July 2005
- June 2005
- May 2005
- April 2005
- March 2005
- February 2005
- January 2005
- December 2004
- November 2004
- October 2004
- September 2004
- August 2004
- July 2004
- June 2004
- May 2004
- April 2004
- March 2004
- February 2004
- January 2004
- December 2003
- November 2003
- October 2003
- September 2003
- August 2003
- July 2003
- June 2003
- May 2003
- April 2003
- March 2003
- February 2003
- January 2003
- December 2002
- November 2002
- October 2002
When it comes right down to it, I am a fan of navigation. I like organizing websites and designing navigation bars. I read about information architecture in my spare time. My thesis work is thick with IA-type issues. So when a friend (Quinn) recently pointed me towards Stephen Clark’s Mini Slide Navigation, I was impressed, intrigued, and above all, inspired. I decided to see if I could improve upon this fantastic idea.
Click here (or on the sample image above) to see the results of that inspiration. I’m calling my creation Smart Mini Tabs, with “smart” being the key word in that title. See, good navigation should always serve two purposes: it should tell you where you can go, and it should tell you where you are. It’s easy to develop a navbar to do the former, while the latter takes some doing. Smart Mini Tabs accomplish the latter by recognizing where the user is located in the grand scheme of things, and making that location obvious. This is accomplished in the JavaScript by:
- Comparing the browser’s location with the href tags located in the navigation anchors,
- Marking that anchor with a “current” class, and
- Returning the tab to that anchor when the user isn’t using the navigation.
As such, the sliding tab not only serves as an indication of which link the user is currently mousing over, it also acts as a visual breadcrumb, marking their location in site’s hierarchy. In other words, the tabs are both attractive and functional.
The Smart Mini Tabs are also smart in that they allow for variable tab sizes. No longer must each tab be a fixed width. As the tab slides from one location to the next, it also changes size to match that of the link to which it is moving. This means that not only can you create variable width tabs (”home” and “design portfolio” needn’t take up the same space), but that Smart Mini Tabs are also friendlier when the user changes text sizes.
Smart Mini Tabs are known to work in Firefox 1.5, IE6, and Safari. If you know them to work/fail in other browsers, please let me know. Tweaking must inevitably ensue, and updates will be noted on the Smart Mini Tabs Testbed page. If you have any comments or suggestions, I’d love to hear them. Comment away!
Responses to “Introducing Smart Mini Tabs”
February 15th, 2006 at 1:01 pm
This is great. The only problem is if the user re-sizes the text size and then the navigation is all disjointed. I don’t have the time right now to peruse the CSS, but I will if time allows.
Again, very good extension.
March 27th, 2006 at 9:09 am
Hi, excellent!
Just one little problem: when the user choose a very big font, the text goes onto two lines, but the mini tags remain at the same height.
December 14th, 2006 at 3:03 am
Congratualtion.. Realy cool job.. i like it very much.. but there is a problem, it’s not working with the OPERA browser.. :(
May 5th, 2007 at 2:12 pm
Great navbar! Something I can’t sort out is: can it be centered? That would be a great help if you could help me with that.
February 13th, 2006 at 8:19 am
Excellent! A fantastic addition! I am especially impressed with how smoothly the tabs “morph” from small to large (and back to small) when you go from link to link. Great stuff!