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",

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

});

6. Available callback functions.

$('nav').coreNavigation({

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

});

Changelog:

2020-11-25

• v1.1.7: update mega menu fullwidth

2020-11-19

• v1.1.5: fixed mode & dropdown menu

2020-11-19

• v1.1.4

2018-08-13

• v1.1.3: Fix: event onresize

2018-08-08

• v1.1.2: added more options & callbacks

2018-08-05

• v1.1.1: added more options & callbacks

2018-08-04

• v1.1.0: added more options & callbacks

2018-07-21

• v1.0.5: Fix bug for hidden on prepare elements Dropdown on sidebar

2018-07-14

• v1.0.2: Support animation dropdown & megamenu

About Author:

Author: Adam Muhammad Nurdin

Website: http://corenav.anurdin.net/

---

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