jQuery Sliding Menu (AKA Lavalamp Menu)
Finally, I am back after a long time with a refreshing new jQuery plugin to make your Web Page menus look better. Its the jQuery Sliding Menu also known as the Lavalamp Menu or Fancy menu by some.
Demo: Click Here
Download: Click Here
Project Repository: Click Here
Usage:
-
In the head section add the following code:
<link rel="stylesheet" href="stylesheets/jquery.sliding-menu.css" type="text/css" media="screen" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <!-- jQuery UI is Optional. Its only required if using easing functions. --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> <script type="text/javascript" src="javascripts/jquery.sliding-menu.js"></script> <script type="text/javascript"> jQuery(function(){ jQuery('#HorizontalSlidingMenu .SlidingMenu').slidingMenu(); jQuery('#VerticalSlidingMenu .SlidingMenu').slidingMenu({ initialOpacity: 0.5 }); }); </script>
-
Add the form in the body as shown below
<div id="HorizontalSlidingMenu"> <ul class="SlidingMenu Horizontal"> <li><a href="#">First Link</a></li> <li><a href="#">Second Link</a></li> <li><a href="#">Third Link</a></li> <li><a href="#">Fourth Link</a></li> <li><a href="#">Fifth Link</a></li> </ul> </div> <div id="VerticalSlidingMenu"> <ul class="SlidingMenu"> <li><a href="#">First Link</a></li> <li><a href="#">Second Link</a></li> <li><a href="#">Third Link</a></li> <li><a href="#">Fourth Link</a></li> <li><a href="#">Fifth Link</a></li> </ul> </div>
That’s it you are done!
For advanced users:
List of options available:
| backgroundClass | Class of the moving background (Default: “Background”) |
| initialOpacity | Opacity of the moving background (Default: 1) |
| slideSpeed | Speed at which the background should slide (Default: 1, should be a fraction less than 1 which is max speed) |
| easing | Type of easying with which the background should slide (Default: “linear”, must include jQuery UI core for this to work) |
| callback | Callback of the sliding menu event (Default: “”) |
| backgroundContent | HTML for moving background (Default: “<div></div>”) |
| activeClass | Class for the clicked link (Default: “ActiveLink”) |
| highlightOnClick | Tells whether the menu item should get highlighted on clicking it (Default: false) |
Hope you liked the plugin. Awaiting your comments
If you liked the plugin please spread it for your friends to use and please rate it at http://plugins.jquery.com/project/jquery-sliding-menu
[...] Follow this link: jQuery Sliding Menu (AKA Lavalamp Menu) | GeekTantra [...]
Great work! Tnx Master!
Thnx for the appreciation.
The Demo http://www.geektantra.com/projects/jquery-sliding-menu/# doesn’t seem to be working.
Thanks. It was easy to understand this material. I am waiting for new information about this theme.
Social comments and analytics for this post…
This post was mentioned on Twitter by geektantra: jQuery Sliding Menu (AKA Lavalamp Menu) | GeekTantra http://tinyurl.com/y9ozwwp...
Any kind of help regarding google adsense contact anytime – adsensehelpers@yahoo.com
Thanks
[...] jQuery Sliding Menu (AKA Lavalamp Menu) | GeekTantra / jquery menu navigation webdev [...]
Awesome menus. They look great in Firefox. But in Internet Explorer 8 the menus don’t look nearly as good. How can I fix this problem for IE?
Thanks this is an awsome menu , i use it on so many of my clients websites now , i cant get enough !
class=”ActiveLink” doesn’t work
the initialOpacity doesnt work on IE7, Javascript error
the demo breaks too.