Press "Enter" to skip to content

Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

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

navigation menu css, navigation menu bootstrap, navigation menu examples, navigation menu html, responsive navigation menu css, navigation menu in website

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

How to make use of it:

1. Load the JavaScript coreNavigation.js and the coreNavigation.css stylesheet into the HTML page where the jQuery library is 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 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

SettingDefaultDescription
layoutdefault

String value for layout coreNavigation :

  • default
  • brand-center
  • fullscreen
  • sidebar
  • sidebar-toggle
  • section
  • side-icon
menuFullWidthfalsetrue or false
menuPositionleft

String value for menu position :

  • left
  • right
  • center
  • bottom
containertruetrue or false
toggleHoverSidebarfalse

true or false

Only for “side-icon” layout mode
responsideSlidefalsetrue or false
dropdownEventhover

String value for dropdown event :

  • click
  • hover
  • accordion
modedefault

String value for dropdown event :

  • default
  • fixed
  • sticky
animatedfalsetrue or false
animatedInbounceInMore animate css by Animated https://daneden.github.io/animate.css/
animatedOutbounceOut
onInitInitial function on init
onResizeOn Resize windows Callback function
onOpenDropdownCallback event open dropdown
onCloseDropdownCallback event close dropdown
onOpenMegaMenuCallback event open megamenu
onCloseMegaMenuCallback event close dropdown
onStartStickyCallback event start sticky mode
onEndStickyCallback event event sticky mode

Multi Purpose Navigation Sytem For Modern Web, Corenav Plugin/Github


See Demo And Download

Official Website(adamnurdin01): Click Here

This superior jQuery/javascript plugin is developed by adamnurdin01. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *