Introduction

coreNavigation is a multi purpose navigation menu for javascript library based on jquery, come with more style and easy to combination.

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

Download Star Follow @adamnurdin01


Browser Support
Instalations
Install from NPM

Make sure to install jQuery NPM & css-loader for import 'corenav/coreNavigation.css'

npm i corenav --save
import 'corenav/coreNavigation.css';
import 'corenav';
Install from static

Include coreNavigation assets CSS & Javascript

<link rel="stylesheet" href="./css/coreNavigation.css" />
<script type="text/javascript" src="./js/coreNavigation.js"></script>

Create coreNavigation code & options

<nav hidden>
    <div class="nav-header">
        <a href="#" class="brand">
            <img src="./assets/img/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="#">About</a></li>
        <li><a href="#">Service</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</nav>
<script type="text/javascript"> 
    $('nav').coreNavigation({
        onInit: function(){
            console.log('Init coreNav');
        }
    });
</script>
Options
Setting Default Description
layout default

String value for layout coreNavigation :

  • default
  • brand-center
  • fullscreen
  • sidebar
  • sidebar-toggle
  • section
  • side-icon
menuFullWidth false true or false
menuPosition left

String value for menu position :

  • left
  • right
  • center
  • bottom
container true true or false
toggleHoverSidebar false

true or false

Only for "side-icon" layout mode
responsideSlide false true or false
dropdownEvent hover

String value for dropdown event :

  • click
  • hover
  • accordion
mode default

String value for dropdown event :

  • default
  • fixed
  • sticky
animated false true or false
animatedIn bounceIn More animate css by Animated https://daneden.github.io/animate.css/
animatedOut bounceOut
onInit Initial function on init
onOpenDropdown Callback event open dropdown
onCloseDropdown Callback event close dropdown
onOpenMegaMenu Callback event open megamenu
onCloseMegaMenu Callback event close dropdown
onStartSticky Callback event start sticky mode
onEndSticky Callback event event sticky mode
Log
20 July 2018 V.1.0.5
  • Fix bug for hidden on prepare elements
  • Dropdown on sidebar
14 July 2018 V.1.0.2
  • Animation style for dropdown & megamenu
12 July 2018 V.1.0.1
  • Attributes feature on sidebar menu
25 Juni 2018 v1.0.0
  • Initilize