rootarcana testbed

Smart Mini Tabs

I wanted a navigation bar that was aesthetically minimalistic. I also wanted it to be interactive — something more than your average CSS-based hovers. I wanted a navbar that would tell the user where they were and where they were going. And I wanted the flexibility to have links of many sizes. This is the result of those wants.

See it in Action

• About
• Contact Us
• Case Studies
• Portfolio
• Client Login

Features Include

This is a little navigation bar that packs a lot of user-friendly punch:

• The tab follows the user's cursor, helping them see what they've moused over.
• The tab resizes to match the size of the link, allowing for fixed or variable widths.
• The JavaScript sets a class on the current link, meaning it can be styled using CSS.
• The tab reverts back to the current link when not in use, creating a visual breadcrumb.

On the Shoulders

During development I borrowed concepts and code from the following fine individuals, without whose work my little project would not exist:

• sgclark's Mini-Slide
• SimbleBit's Mini Tabs
• slayeroffice's focus slide menu

Get You Some

• Download the navbar XHTML (<1k)
• Download the CSS file (1k)
• Download the JavaScript (3.5k)

Your Call is Important

If you have any questions, comments, or suggestions, please leave them on the associated weblog post.

 

This site was developed and is maintained by Rob L Glazebrook of rootarcana.com.