Multi Purpose Navigation Sytem For Modern Web - jQuery Corenav

Multi Purpose Navigation Sytem For Modern Web - jQuery Corenav
File Size: 85.4 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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,

});

Changelog:

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: 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.