Multi Purpose Navigation Sytem For Modern Web - jQuery Corenav

Corenav is an easy, responsive, multi-purpose, jQuery based navigation system for modern, cross-platform web development.

Features:

• 7 built-in layouts: default, brand-center, fullscreen, sidebar, sidebar-toggle, section, side-icon.
• Full width or not.
• Off-canvas side menu.
• Hamburger menu toggle button.
• Can be placed anywhere on the navbar: left, right, center, bottom.
• Sticky/fixed dropdown menu.
• Custom dropdown event: click, hover, accordion
• Scrollspy.

Basic usage:

1. Load the JavaScript coreNavigation.js and stylesheet coreNavigation.css in the html page which has jQuery library loaded.

<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 for the toggle button.

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

3. Create 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. Available plugin options 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"
});

6. Available callback functions.

$('nav').coreNavigation({
  onInit: null,
  onOpenDropdown: null,
  onCloseDropdown: null,
  onOpenMegaMenu: null,
  onCloseMegaMenu: null,
  onStartSticky: null,
  onEndSticky: null,
});

About Author:

Author: Adam Muhammad Nurdin

Website: https://corenav.com/

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