Multi-purpose Navigation Menu for Javascript Library

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate.

11 Default Menu
2 Responsive Navigation
7 Event Menu
6 Attributes Header
3 Mode Menu Position
9 Layout Navigation
More Themes & Custom

Must Read: Hamburger Navigation Menu Using JavaScript and jQuery

How to make use of it:

1. Load the JavaScript coreNavigation.js and the coreNavigation.css stylesheet into the HTML page.

<link rel="stylesheet" href="/path/to/coreNavigation.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/coreNavigation.js"></script>

2. Load the Font Awesome toggle button.

<link rel="stylesheet" href="/path/to/fontawesome.min.css">

3. Generate the HTML for the navigation menu.

<nav>
  <div class="nav-header">
    <a href="#" class="brand">
      <img src="/path/to/brand.png">
    </a>
    <button class="toggle-bar">
      <span class="fa fa-bars"></span>
    </button> 
  </div>                
  <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">Category</a></li>
      <li><a href="#">Jobs</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>
  </ul>
</nav>

4. Call the function to initialize the navigation menu.

$(function(){

  $('nav').coreNavigation();

});

5. Plugin options available which can be used to customize the navigation menu.

$('nav').coreNavigation({

  // default, brand-center, fullscreen, sidebar, sidebar-toggle, section, side-icon
  layout: "default",

  // menu selector
  menu: ".menu",

  // full width or not
  menuFullWidth: false,

  // header selector
  header: ".nav-header",

  // left, right, center, bottom
  menuPosition: "left",

  // true or false
  container: true,

  // selector of toggle button
  toggleMenu: ".toggle-bar",

  // Only for "side-icon" layout mode
  toggleHoverSidebar: false,

  // true or false
  responsideSlide: false,

  // click, hover, accordion
  dropdownEvent: "hover",

  // default, fixed, sticky
  mode: "default",

  // enable animations
  // requires animate.css
  animated: false,
  animatedIn: "bounceIn",
  animatedOut: "bounceOut"

});

6. Callback functions available.

$('nav').coreNavigation({

  onInit: null,
  onResize: null,
  onOpenDropdown: null,
  onCloseDropdown: null,
  onOpenMegaMenu: null,
  onCloseMegaMenu: null,
  onStartSticky: null,
  onEndSticky: null,

});

Options

Must Read: [~60fps animation] Morphing Fullscreen Floating Circle Navigation Menu

Setting	Default	Description
layout	default	String value for layout `coreNavigation:defaultbrand-centerfullscreensidebarsidebar-togglesectionside-icon`
menuFullWidth	false	true or false
menuPosition	left	String value for menu position:leftrightcenterbottom
container	true	true or false
toggleHoverSidebar	false	true or falseOnly for the “side-icon” layout mode
responsideSlide	false	true or false
dropdownEvent	hover	String value for the dropdown event:clickhoveraccordion
mode	default	String value for the dropdown event:defaultfixedsticky
animated	false	true or false
animatedIn	bounceIn	More animate css by Animated https://daneden.github.io/animate.css/
animatedOut	bounceOut
onInit	Initial function on init
onResize	On Resize windows Callback function
onOpenDropdown	Callback event open dropdown
onCloseDropdown	Callback event close dropdown
onOpenMegaMenu	Callback event open megamenu
onCloseMegaMenu	Callback event close dropdown
onStartSticky	The callback event starts sticky mode
onEndSticky	Callback event sticky mode