jNav Features

Please take a look on our plugin features before you download. We believe you will enjoy it.

  • Multi-level menu support
  • Multiple nav supports
  • 7+ ready made skin pack
  • Helpful documentation included
  • Flexible, simple mark-up, lightweight
  • Cross-browser compatibility
  • And much more...

Usage Instructions

Installing jnav is a simple as like other jquery plugins and we hope you already installed it. If not go ahead and check our insturctions below.

Folder Structure

Download the latest version of jNav and Unzip the archive. (current version 1.0)

  • master
    • css // demo site css
    • js // demo site js
    • plugin-file // plugin files
      • jnav.css //plugin stylesheet
      • jnav.js //plugin javscript functions
      • skin.css //plugin skin stylesheet
      • jnav.min.css //plugin stylesheet minified
      • jnav.min.js //plugin javscript functions minified
      • skin.min.css //plugin skin stylesheet minified
    • demo.html // plugin demo site

Link css file before your site HEAD tag

Include all css files from the master/plugin-file/css/ on your site HEAD tag.

// Recommended responsive menu css
<link rel="stylesheet" href="master/plugin-file/jnav.min.css">
<link rel="stylesheet" href="master/plugin-file/skin.min.css">

Link js file on your footer before BODY tag

Include js file from the plugin js folder and also before plugin js don't forget to include jquery lib.

// Recommended responsive menu js
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="master/plugin-file/jnav.min.js"></script>

Markup

Add html on your site body

<span id="click">Click here</span>
<ul id="menu">
<li><a href="#">item 1 </a></li>
<li><a href="#">item 2 </a></li>
<li><a href="#">item 3 </a></li>
<li><a href="#">item 4 </a></li>
<li><a href="#">item 5 </a></li>
</ul>

Initialize

<script>
$(function(){
$('#menu').jNav({
clickbar: "#click"
});
});
</script>

Available Options

Property Default Description
clickbar null Identifier to toggle menu. When someone click on this element menu will start toggling.
defaultOpen true True or False to hide or show menu on firs time load.
skin "default" Available options("black", "red", "yellow", "green", "skyblue", "white")
speed "fast" Menu toggling speed.Available options("fast", "slow", "medium")
closedSymbol "▼" Icon for multilevel menu expand button. You can use anything within this string html,font-awesome icon etc.
openedSymbol "►" Icon for multilevel menu expand button. You can use anything within this string html,font-awesome icon etc.

Examples