menuSlider
Tagged with: menuslider js slideshow menuslider slideshow jquery image slide jquery menu slider menuslider tutorial menuslider demos slider demo
Mar 06, 2014 in Slideshow 3439 views
menuSlider is jQuery menu slider plugin that creates the slider over the menu items. It's easy to use and create menus with slide animation effect.
<div id="slideContainer"> <ul> <li class="selectedMenuItem">One</li> <li>Two</li> <li>Three</li> <li>Four</li> </ul> </div>
<script> $("#slideContainer").menuSlider({thickness:"2px",borderStyle:"solid",borderColor:"blue", borderSides:"border-bottom", bgColor:"rgba(0,0,150,0.4)", bgRadius:"10px", speed:0.4, tStyle:"linear"}); </script>
Note: Ensure to include the JQuery library
The item the slider returns to has an class of "selectedMenuItem". To switch which item is the current item, change which item has the selectedMenuItem class. I achieved it above by adding a click function in the script (Not included in download) because I wasn't linking to any pages.
Tested and Functions in Chrome, Firefox, Opera, IE10 and IE9. IE8 and below do not support the border radius or transparent background. IE7 and below do not support box sizing.
Tagged with:
menuslider
js slideshow
menuslider slideshow
jquery image slide
jquery menu slider
menuslider tutorial
menuslider demos
slider demo
Related Articles