Rounded Menu with CSS3 and jQuery
-
In this tutorial we are going to make use of the incredibly awesome rotating and scaling jQuery patch from Zachary Johnson that can be found here. We will create a menu with little icons that will rotate when hovering. Also, we will make the menu item expand and reveal some menu content, like links or a search box.Similar to the spinner demo button we use
To make things easier, we created two functions, one for expanding an item and one for collapsing it. The expand function will make the icon rotate 4 times around itself (360 times 4 are 1440). We will also make the item expand by animating an increase in its width. Then, we let the content appear, first the whole div and then the paragraph element.
The collapse function will rotate the icon back, decrease the width of the item and make the content disappear.
Author: Mary Lou
Download: From here
Tutorial: Found hereRelated Posts:
- Latest Tweets Tooltips
- ShineTime: jQuery & CSS3 Gallery With Animated Shine Effects
- Catch 404 A jQuery And CSS3 Modal Plugin For Handling Broken Links Elegantly
- jQuery fancy Draggable Captcha
- timeAGO a jQuery plugin
GD Star Rating
loading…








Comments are closed.