
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.
- Publication date: 11.07.2018
- Source