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 here
Related 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…
Enjoyed this post? Subscribe to our RSS feeds!About The Author
Steve
Hi I am a webdeveloper based in Brisbane, Australia. Fanatical about the internet and website code and development. Hence this site, a showcase resource site for you to get the latest greatest code , scripts , apps and demos all from the one venue.
Leave a Reply
Adverts / Sponsors
subscribe to our feed
vBulletin Offers
5 Responses and Counting...
Read Rounded Menu with CSS3 and jQuery now at http://bit.ly/9ct1eV
Reply
loading...
Rounded Menu with CSS3 and jQuery: In this tutorial we are going to make use of the… http://goo.gl/fb/KKkb2
Reply
loading...
RT @SiteHelpComAu: Rounded Menu with CSS3 and jQuery: In this tutorial we are going to make use of the… http://goo.gl/fb/KKkb2
Reply
loading...
Rounded Menu with CSS3 and jQuery | Site Help: http://bit.ly/egGXe6
Reply
loading...
Rounded menu with CSS 3 and jQuery http://t.co/hjOO6AY1
Reply
loading...