This time I will share jQuery Plugin and tutorial about Basic Responsive Overlay Menu With jQuery And CSS3, hope it will help you in programming stack.
A basic responsive menu jQuery plugin that converts the regular horizontal menu into a fullscreen overlay navigation on mobile devices.
Click the hamburger button to toggle the navigation sliding from the left or right-hand side of the screen.
Built with JavaScript (jQuery), Font Awesome, and CSS3 transitions/transforms.
How to use it:
1. Load the Font Awesome and basicResponsiveMenu.css
in the head
section of the document.
2 |
< link rel = "stylesheet" href = "dist/css/basicResponsiveMenu.css" > |
2. Create a nav list for the site navigation.
1 |
< nav class = "response--main-navigation" > |
2 |
< ul class = "response--site-menu" > |
3 |
< li >< a href = "#" >HOME</ a ></ li > |
4 |
< li >< a href = "#" >Jobs</ a ></ li > |
5 |
< li >< a href = "#" >Products</ a ></ li > |
6 |
< li >< a href = "#" >About</ a ></ li > |
7 |
< li >< a href = "#" >Contact</ a ></ li > |
3. Attach the plugin to the navigation. That’s it.
2 |
$( '.response--main-navigation' ).basicResponsiveMenu(); |
4. Enable/disable the sliding animation. Default: true.
2 |
$( '.response--main-navigation' ).basicResponsiveMenu({ |
5. Set the sliding direction. Default: right.
2 |
$( '.response--main-navigation' ).basicResponsiveMenu({ |
6. Set the animation speed in milliseconds. Default: 250.
2 |
$( '.response--main-navigation' ).basicResponsiveMenu({ |
7. Set the responsive breakpoint in pixels.
2 |
$( '.response--main-navigation' ).basicResponsiveMenu({ |
This awesome jQuery plugin is developed by Katrine-Marie. For more Advanced Usages, please check the demo page or visit the official website.