Fullscreen Sliding Navigation with jQuery and CSS3 - menuFullpage
File Size: | 448 KB |
---|---|
Views Total: | 5861 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

menuFullpage is a lightweight jQuery plugin to create a responsvie navigation overlay covering the whole page that slides out from the edge of your screen.
See also:
- Fullscreen Off-canvas Navigation with jQuery and CSS3
- Fullscreen Perspective Navigation with jQuery and CSS3 - MenuPuncher
- Responsive Fullscreen Navigation Menu with jQuery and CSS3
- Fullscreen Responsive Menu with jQuery and CSS3 - hamburgler.js
- Flexible Fullscreen Navigation Menu with jQuery and CSS3
- jQuery Plugin For Responsive Fullscreen Navigation Menu - Full Screen Nav
How to use it:
1. Include the jQuery menuFullpage plugin's CSS in the head section of the document.
<link href="css/menufullpage.css" rel="stylesheet">
2. Create a link to toggle the fullscreen navigation.
<a href="#menu" class="menu-link"> <span>toggle menu</span> </a>
3. Create the Html for the fullscreen navigation.
<nav id="menu" class="panel" role="navigation"> <ul> <li><a data-scroll href="#">Home</a></li> <li><a data-scroll href="#">Portofolio</a></li> <li><a data-scroll href="#">Blog</a></li> <li><a data-scroll href="#">contact</a></li> <li><a data-scroll href="#">About</a></li> </ul> </nav>
4. Enable the smooth scroll on your webpage.
smoothScroll.init();
5. Call the function to enable the fullscreen navigation.
$(document).ready(function() { $('.menu-link').menuFullpage(); });
6. Options and defaults.
$('.menu-link').menuFullpage({ menu:"#menu", push:".push", side:"left", menuWidth:"100%", speed:"600", activeBtn:"menu-open" });
This awesome jQuery plugin is developed by carmelocatalfamo. For more Advanced Usages, please check the demo page or visit the official website.