With BubbleUP, images in a list will enlarge with a smooth animation when you move your mouse over it. Then, if you move the mouse out, it will reset to the original size with the same smooth animation. It has been tested on IE 7, Opera 10, Firefox 3.5, Safari 4, and Chrome 5 Beta.

Requirements: jQuery Framework
Demo: http://aext.net/jquery-menu-plugin-bubbleup/
License: License Free

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

There is one gradient image is used. A white-transparent image is used to achieve the gradient effect. Because the new CSS3 gradient feature is not supported by all browsers yet, it is safer to use a gradient background image.

Requirements: -
Demo: http://www.webdesignerwall.com/demo/css3-dropdown-menu/
License: License Free

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

At the very basic level, Quicksand replaces one collection of items with another. All you need to do is provide those two sets of items. Advanced demonstrations include custom jQuery code to achieve some of the goals, like sorting or making Ajax calls. This code can be copied and used freely, but it’s not part of the plugin.

Requirements: jQuery Framework
Demo: http://razorjack.net/quicksand/
License: MIT and GPL2 License

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

As such, the “magic line” will only be appended via JavaScript. Once added to the list and styled, as you mouse over the different links, it figures out the left positioning and the width and animates to match.

Requirements: jQuery Framework
Demo: http://css-tricks.com/examples/MagicLine/
License: License Free

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

Janko has written a throughout tutorial that shows you How to Use jQuery to Create Dynamic Tabs that can be added and removed dynamically. He has also mentioned how to use tabs and in which context should they be used in order to make them meaningful and usable.

Requirements: jQuery Framework
Demo: http://www.jankoatwarpspeed.com/examples/dynamic_tabs/
License: License Free

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

SohTanaka has created a tutorial about how to recreate the Facebook Style Footer Admin Panel with CSS and jQuery Part I and Part II. The footer panel can be useful for admin driven applications and much more. There are many useful techniques like the fixed footer, CSS tooltips, height calculation function, and multiple toggle function, that can be used in various ways for your future projects.

Requirements: jQuery Framework
Demo: http://www.sohtanaka.com/web-design/examples/footer-panel/
License: License Free

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

Some uses the stop() method to prevent animation queue buildup. While this helps solve the initial problem, it introduces another: When you now do a fast mouseover/-out, you will see no animation at all or just a part of the animation. This behavior seems somehow unnatural.

The HoverFlow Plugin is the solution, which honors a single mouseover/-out with a full animation cycle while preventing animation queue buildup. A queued animation will only run if it corresponds with the current mouse position at “runtime”. That is, a mouseover animation will only run if the mouse is currently over the element, and a mouseout animation will only run if the mouse is currently not over the element. Otherwise, the animation queue is emptied.

Requirements: jQuery Framework
Demo: http://www.2meter3.de/code/hoverFlow/
License: MIT and GPL License

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

Now SohTanaka has come up with another solution – Mega Drop Down Menus. According to usability expert Jakob Nielson, mega drop down menus tested to be more efficient for large scale websites.

Requirements: jQuery Framework
Demo: http://www.sohtanaka.com/web-design/examples/mega-dropdowns/
License: License Free

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

For those of us with scroll wheels of some kind on our mouses, it’s not a big deal. For those without, those lower menu items are totally inaccessible, because to use the browser scrollbar means mousing off the menu and probably having it close.

CSS Tricks has come up with a Solution For Very Long Dropdown Menus, and tell us how to implement a technique where as you scroll down, the menu actually moved in an accelerated fashion. Therefore the menu can be accessible even the user has no scroll wheels on his mouse.

Requirements: jQuery Framework
Demo: http://css-tricks.com/examples/LongDropdowns/
License: License Free

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

Requirements: jQuery Framework
Demo: http://adrianpelletier.com/sandbox/jquery_hover_nav/
License: License Free

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images