Here i come up with small and simple tea time script “Vertical Menu with Jquery” made in less than 30 mins. This is single level menu made with Jquery, CSS and LI. You can customize menu with change in CSS file. Jquery animate function gave it a cool look.
I’m also planning to extend this plugin and add multilevel support.
hope to get free time soon 🙂
I’m also planning to extend this plugin and add multilevel support.
hope to get free time soon 🙂
jquery sliding menu plugin
Include Javascrips and Initialize Plugin
|
1 2 3 4 5 6 7 |
<script src="jquery.js"></script> <script src="jquery.slidemenu.js"></script> <script language="javascript"> $(function() { $(".list").slideMenu(); }); </script> |
Add Style Sheet
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
* {margin: 0; padding: 0;} body { margin: 0; padding: 0; font-family : verdana; font-size : 12px; } .list{ margin:20 auto; overflow:hidden; width:200px; background : #1F6A98; } #active{ border-top: 1px solid #399CD7; border-right: 1px solid #399CD7; border-bottom: 1px solid #247CB0; border-left: 1px solid #247CB0; cursor : pointer; color : #F5F5F5; display : block; width : 100%; background : #1B5B83; } .list li a{ list-style:none; border-top: 1px solid #2C94D1; border-right: 1px solid #2C94D1; border-bottom: 1px solid #247CB0; border-left: 1px solid #247CB0; padding : 5px; margin : 2px; cursor : pointer; color : #C5C5CB; font-weight : bold; text-decoration : none; } .list li a{ color : #C5C5CB; display : block; width : 92%; } |
Wireframe
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<ul class="list"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Clients</a></li> <li><a href="#">Contact Us</a></li> </ul> |
Plugin Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
(function($){ $.fn.extend({ slideMenu : function(options){ var defaults = { moveBy : "20px", delay : 200, initialPadding : "5px", activeClass : "active" }; var options = $.extend(defaults, options); return this.each(function() { var obj = $(this); var moveBy = options.moveBy var delay = options.delay var initialPadding = options.initialPadding var activeClass = options.activeClass var items = $('li a', obj); items.mouseover(function(){ $(this).attr("id",activeClass); $(this).animate({ "padding-left": moveBy },delay); }); items.mouseout(function(){ $(this).animate({ "padding-left": initialPadding, "id" : "" },delay); }); }); } }); }) (jQuery); |
Slide menu not run Internet Explorer. Where is the problem ?
There was extra comma, its working now. i have updated the demo as well as download. many thanks for the bug report.
thanks for answer and new version
I loved your article again as it has no competent. Further I’m waiting more articles like this.
Not working in Firefox 8
Do u see any error ?? because i just tested it once again and can see its working in IE9 also