Mobile-first Fullscreen Navigation Plugin With jQuery - Snavvy

File Size: 6.27 KB
Views Total: 4588
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Mobile-first Fullscreen Navigation Plugin With jQuery - Snavvy

Snavvy is a lightweight and simple-to-use jQuery plugin for creating a mobile-friendly navigation that slides out a fullscreen, off-canvas menu covering the whole page when toggled.

How to use it:

1. To get started, you need to load jQuery library and the jQuery Snavvy plugin's JS & CSS files in the webpage.

<link href="snavvy.css" rel="stylesheet" type="text/css">
<script src="//"></script> 
<script src="snavvy.js"></script> 

2. Create a menu toggle link and the insert it together with the menu items into your webpage. In this case, we're going to use Font Awesome 4 for the menu toggle icons.

<ul class = "fullmenu">
    <a id="snavvy">
    <div id="nav-icon">
      <i class="fa fa-menu">
  <div class="snavvy-links" id="snavvy-links">
    <ul class="links">
      <li> <a href=""> Home </a> </li>
      <li> <a href=""> About </a> </li>
      <li> <a href=""> Contact </a> </li>

3. Initialize the plugin and done.

  menuItems: '#snavvy-links'

4. All plugin settings with default values.


  // 100%
  width: 100,

  // left, right, top, bottom
  location: 'right',

  // parent container
  parent: 'body',

  // true or false
  close: 'true',

  // selector for menu items
  menuItems: null

Change log:


  • v1.0.2

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