 |
| Cross-platform Multi-level Dropdown Menu - Vegas Nav |
Vegas Nav is a JavaScript-powered, cross-platform navigation system nested dropdown menu to help you create a responsive, mobile-friendly, multilevel drop-down navigation navbar for your web applications.
More Features:
- Collapses the navbar into an off-canvas side nav on small screens.
- Supports desktop, laptop, tablet, and mobile.
- Supports multi-column mega menu.
- Ultra light and dead simple to use.
- Semantic and SEO-friendly. Built with nested HTML lists.
- Without 3rd-party dependencies (v3+).
- Scrollspy functionality (v3+).
How to use it:
1. Load the core stylesheet vgnav.css and theme CSS vgnav-theme.css in the document.
<link href="/path/to/dist/vgnav.css" rel="stylesheet" /> <link href="/path/to/demo/css/vgnav-theme.css" rel="stylesheet" />
2. Create a multi-level dropdown navbar from nested HTML lists as follows:
<nav class="vg-nav">
<ul class="vg-nav-wrapper">
<li class="active">
<a href="/">Home page</a>
</li>
<li class="dropdown">
<a href="#">Left dropdown</a>
<ul class="left">
<li><a href="/">Any page</a></li>
<li class="dropdown">
<a href="#">Second level</a>
<ul class="left">
<li><a href="/">Another page</a></li>
<li><a href="/">Any page</a></li>
<li class="dropdown">
<a href="#">Third level</a>
<ul class="left">
<li><a href="/">Any page</a></li>
<li><a href="/">Another page</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="/">Another page</a></li>
</ul>
</li>
<li class="dropdown-mega">
<a href="/">Mega Menu</a>
<div class="dropdown-mega-container">
<div class="row">
<div class="col-md-4 text-left">
Left
</div>
<div class="col-md-4 text-center">
Center
</div>
<div class="col-md-4 text-right">
Right
</div>
</div>
</div>
</li>
<li class="dropdown">
<a href="#">Right dropdown</a>
<ul class="right">
<li><a href="/">Any page</a></li>
<li class="dropdown">
<a href="#">Second level</a>
<ul class="right">
<li><a href="/">Another page</a></li>
<li><a href="/">Any page</a></li>
<li class="dropdown">
<a href="#">Third level</a>
<ul class="right">
<li><a href="/">Any page</a></li>
<li><a href="/">Another page</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="/">Another page</a></li>
</ul>
</li>
</ul>
</nav>
3. Load the main JavaScript vgnav.min.js at the end of the document. Note that the plugin has removed jQuery dependency since v3.0.
<script src="/path/to/dist/vgnav.umd.js"></script>
4. Initialize the plugin and done.
new VGNav({
// options
});
5. Determine at which breakpoint the navbar will be collapsed into a hamburger button that enables the visitor to toggle the off-canvas menu.
- xl: Desktop and laptop
- lg: Tablet landscape
- md: Tablet portrait
- sm: Smartphone landscape
- xs: Smartphone portrait
new VGNav({
expand: 'lg',
});
5. Make the off-canvas side nav slide in from the left side of the screen instead.
new VGNav({
sidebar: {
placement: 'left',
clone: null,
width: 250
}
});
6. Open the dropdown menus on hover instead of click.
new VGNav({
isHover: true
});
7. Determine the location of the nav. Default: 'horizontal'.
new VGNav({
placement: 'vertical'
});
8. Add a custom heading for mobile navigation.
let vg_nav = new VGNav('#myNav',{
mobileTitle: 'Navigation'
});
9. Customize the toggle element.
new VGNav({
toggle: '<span class="default"></span>'
});
10. Customize the hamburge button.
new VGNav({
expand: 'lg',
mobileTitle: 'Mobile Title',
hamburger: '<svg id="ham-menue" viewBox="0 0 100 100"><path class="line line1" d="M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058"></path><path class="line line2" d="M 20,50 H 80"></path><path class="line line3" d="M 20,70.999954 H 80.000231 C 80.000231,70.999954 94.498839,71.182648 94.532987,33.288669 94.543142,22.019327 90.966081,18.329754 85.259173,18.331003 79.552261,18.332249 75.000211,25.000058 75.000211,25.000058 L 25.000021,74.999942"></path></svg>'
});
11. Move links to the drop-down menu if the total width of all links is greater than the main container..
new VGNav({
move: true,
});
Live Demo
See the Pen Untitled by Teguh Sigit (@teguhsigit) on CodePen.
File Info
- File Name :
- vegas-nav-master.zip
- Size :
- 112.40KB
- Site Download :
- Github.com
- Official Website:
- Go to website
- License:
- MIT