• 3D
  • Illustration
  • Web Design
“Rockin’ the Tab Slot”

Cleaning House

I recently decided that I wanted to add a little organization to my sidebar. Previously, links of different groups ran together with the post categories, archives, meta and links under different categories, as modules all jumbled together. There was no distinguishing one from the other. It had bugged me for some time.
Also, I didn’t necessarily like viewers of my blog seeing the “login” section simply because there was no need for them to. At the same time, I wanted to make it convenient for me to get to when I wanted to log in.

My solution? The use of tabs to logically group categories, archives and the meta/login modules together. This would then allow me to group all links together in their own section, and keep the “meta” section out of the view of users but still allowing me to get to it rather easily.

“A Great Tab System”

tabs-exampleSo off I went to find a good jquery tab system. There are various systems out there, from the straight forward “click-change” to more robust plugin-geared tabs with animated transitions. In my search, I came across a rather nice modular-based one. It treats the labels for the tabs across the top as an “unordered list”. Brilliant!

This allows for adding tabs as you go along with very little overhead. Quite nice. Besides the implications of using something like this to “dynamically” generate tabs using a database-driven site, i.e. something like WordPress—mmm, my favorite ; ) —it grants you a generous level of control over the tab states (“hover,” “active,” and so on), so that you can let your users know what tab is currently active, for example.

queness-thumbThe tab system is found on Queness. The tutorial that the owner of the blog has set forth is well-written and fairly easy to follow, but keep in mind that it’s written specifically for duplication of the tab setup that he has in his own sidebar. For customizing, some may consider this a little more involved/advanced, so if your jquery and CSS skills are basic, expect customization to take some time and learning. Otherwise, it was fairly simple to figure out.

Comments:

Leave a Reply

Spam protection by WP Captcha-Free