Fullscreen Sliding Navigation with jQuery and CSS3 - menuFullpage

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

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:

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>

3. Create the Html for the fullscreen navigation.

<nav id="menu" class="panel" role="navigation">
    <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>

4. Enable the smooth scroll on your webpage.


5. Call the function to enable the fullscreen navigation.

$(document).ready(function() {

6. Options and defaults.


This awesome jQuery plugin is developed by carmelocatalfamo. For more Advanced Usages, please check the demo page or visit the official website.