Cross-platform Multi-level Dropdown Menu - jQuery Vegas Nav

Cross-platform Multi-level Dropdown Menu - jQuery Vegas Nav
File Size: 42 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Vegas Nav is a jQuery based cross-platform navigation system to help you create a responsive, mobile-friendly, multi-level dropdown navbar for your web app.

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.

See It In Action:

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/css/vgnav.css" rel="stylesheet" />
<link href="/path/to/dist/css/vgnav-theme.css" rel="stylesheet" />

2. Create a multi-level dropdown navbar from nested HTML lists as follows:

<div class="navigation">
  <nav class="vg-nav vg-nav-lg">
    <ul>
      <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">
          Mega Menu Content Here
        </div>
      </li>
      <li>
        <a href="#">Any page</a>
      </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>
</div>

3. Load jQuery library and the main JavaScript vgnav.min.js at the end of the document.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/js/vgnav.min.js"></script>

4. Attach the function to the top container. That's it.

$(function(){
  $('.vg-nav').vegasMenu();
});

5. Determine at which breakpoint the navbar will be collapsed into a hamburger button that enables the visitor to toggle the off-canvas menu.

  • .vg-nav-xl: Desktop and laptop
  • .vg-nav-lg: Tablet landscape
  • .vg-nav-md: Tablet portrait
  • .vg-nav-sm: Smartphone landscape
  • .vg-nav-xs: Smartphone portrait
<nav class="vg-nav vg-nav-lg">
  ...
</nav>

5. Make the off-canvas side nav slide in from the left side of the screen instead.

<nav class="vg-nav vg-nav-lg" data-sidebar-open="left">
  ...
</nav>

6. Open the dropdown menus on hover instead of click.

<nav class="vg-nav vg-nav-lg" vg-nav-hover>
  ...
</nav>

Changelog:

2020-03-25

  • Toggle customization
  • Minor bugs fixed

 

2020-03-18

  • Bugfix

2020-03-17

  • Open submenus on hover

2020-03-10

  • Fixed bugs.

2020-03-05

  • Added left menu.

2020-03-03

  • Updated sidebar width

This awesome jQuery plugin is developed by vegas-dev. For more Advanced Usages, please check the demo page or visit the official website.