Awesome drop down menu on JQuery, HTML5 and CSS3

vegasNavigation

A script for implementing navigation on a site with a normal drop-down list and with mega content.

The application is written in JQuery, html5 and ССS3 using the compiler SCSS

Demo

https://vegas-dev.github.io/vegas-nav/

Install

npm i vgnav

or download here

Dependencies

• jQuery >= 3

Usage

HTML markup

<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">
                ...
            </ul>
        </li>
        <li class="dropdown-mega">
            <a href="#">Mega Menu</a>
            <div class="dropdown-mega-container">
                ... 
            </div>
        </li>
        <li class="dropdown">
            <a href="#">Right dropdown</a>
            <ul class="right">
		       ...
            </ul>
        </li>
    </ul>
</nav>

JQuery init

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

Hamburger folding. Use the following classes next to the main:

.vg-nav-xl // Desktop and laptop
.vg-nav-lg // Tablets landscape
.vg-nav-md // Tablets portrait
.vg-nav-sm // Phone landscape
.vg-nav-xs // Phone portrait

Opening the expanded menu on hover:

.vg-nav-hover

<nav class="vg-nav vg-nav-md">
    The menu will collapse on the tablet in portrait mode
</nav>

Download Details:

Author: vegas-dev

Live Demo: https://vegas-dev.github.io/vegas-nav/

GitHub: https://github.com/vegas-dev/vegas-nav

#javascript #jquery #html5 #css3