coreNavigation is a multi purpose navigation menu for javascript library based on jquery, come with more style and easy to custom.
Features :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>
Make sure to install jQuery NPM & css-loader for import 'corenav/coreNavigation.css'
npm i corenav --save
import 'corenav/coreNavigation.css';
import 'corenav';
Setting | Default | Description |
---|---|---|
layout | default |
String value for layout coreNavigation :
|
menuFullWidth | false | true or false |
menuPosition | left |
String value for menu position :
|
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 :
|
mode | default |
String value for dropdown event :
|
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 | |
onResize | On Resize windows Callback function | |
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 |