I created a YUI widget that is based on my imAnimTabber JQuery Plugin. The imSliderMenu displays content by animating the height or the width of the contents container. I use the imSliderMenu widget on my marketing site, http://1st-steps-to-success.com. The slider menu is handy in that I am able hide content on a page until it is needed and still maintain the look and feel of my website design. As with the imAnimTabber JQuery plugin, The imSliderMenu dynamically creates the menu items based on CSS and a few lines of code.
I decided to redesign my company site (intriguingminds.com). I hadn’t touched it in about 3-4 years, so it was long overdue. With its simplistic design, I decided to use the imUpSideDownTabber JQuery plugin that I had created a few months ago. I soon learned that, due to my design, the plugin was not robust enough for the functionality that was necessary, so I decided to create an upgrade. The new functionality was significant enough (it does more than just up-side-down-tabbing) that I decided to rename the plugin altogether (imAnimTabber). I never did like the name ‘imUpSideDownTabber’. The imAnimTabber plugin can be used to display content with the following animated options:
As with the imUpSideDownTabber, the tabs can be created dynamically (‘auto’ mode), but I added a ‘manual’ mode so that the plugin can function when the tabbing interface is already created (the ‘carousel’ option can only be used in ‘manual’ mode). One of the major changes in this JQuery plugin is that the tabs can be individually styled. I needed this functionality for my IntriguingMinds.com (link) site. Unlike the imUpSideDownTabber, I created a demo page so that you can see how to set it up.