🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Simple jQuery menu slider.Call the menuSlider on the container ({Border Thickness, Border Style, Border Color, Sides of Border, Background Color, Background Border Radius, Transition Speed, Transition Type}).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 .

Menus Plugins

Documentation

menuSlider

Simple jQuery menu slider

Steps to use the Slider:

Wrap your navigation menu in a container as shown:

 <div id="slideContainer"> 	<ul> 		<li class="selectedMenuItem">One</li> 		<li>Two</li> 		<li>Three</li> 		<li>Four</li> 	</ul> </div> 

Call the menuSlider on the container ({Border Thickness, Border Style, Border Color, Sides of Border, Background Color, Background Border Radius, Transition Speed, Transition Type}):

 <script> $("#slideContainer").menuSlider({thickness:"2px",borderStyle:"solid",borderColor:"blue",borderSides:"border-bottom",  				 bgColor:"rgba(0,0,150,0.4)", bgRadius:"10px",  				 speed:.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.

See Demo Here


You May Also Like