Fullscreen Overlay Nav Menu Plugin With jQuery - hotmenu

Yet another jQuery responsive fullscreen menu which makes it easy to create an user-friendly site navigation with a fullscreen overlay for your webpage.

How to use it:

1. Create a navigation menu for your webpage.

<nav class="nav-menu">
  <a href="#">Home</a>
  <a href="#">Contact</a>
  <a href="#">About</a>
</nav>

2. Create a toggle element which allows to open/close the fullscreen nav menu.

<div class="toggle"></div>

3. Convert the toggle element into a hamburger toggle button.

.toggle {
  position: fixed;
  z-index: 101;
  top: 10px;
  right: 10px;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  cursor: pointer;
}

.toggle::after, .toggle::before {
  display: block;
  content: '';
  border-top: 4px solid white;
}

.toggle:after {
  height: 16px;
  margin: 16px 0 0;
  border-bottom: 4px solid white;
}

.toggle.active:after, .toggle.active:before { border-color: #ffa248; }

4. Load jQuery library and the jQuery hotmenu plugin's JS & CSS files in the webpage.

<script src="//code.jquery.com/jquery-2.2.2.min.js"></script>
<script src="jquery.hotmenu.js"></script>
<link rel="stylesheet" href="hotmenu.css">

5. Call the function on the nav and specify the toggle element.

$('nav').hotMenu({
  toggleSelector: '.toggle'
});

6. Specify the media query at which the menu should be active. This resets the link height if the user extends the window beyond the specified media query.

$('nav').hotMenu({
  toggleSelector: '.toggle',
  mediaQuery: '(max-width: 640px)' 
});

7. Style the menu links in the CSS.

.links { background-color: #229F8E; }

.links a, .links a:hover, .links a:active, .links a:visited {
  font-size: 2em;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
}

.links a:hover {
  color: #61B2A0;
  background-color: white;
}

---

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