Responsive & Mobile-friendly jQuery Toggle Menu Plugin

A simple jQuery plugin to create a responsive horizontal toggle menu that will be converted into a sliding dropdown menu on mobile devices. Works perfectly on modern browsers which support CSS3 transitions and media queries.

How to use it:

1. Create the Html for a toggle button, which will sit absolutely outside the menu and wrapper. Setting the entire nav outside the wrapper will let me push the wrapper down when toggling.

<div id="toggle_m_nav" href="#">
  <div id="m_nav_menu" class="m_nav">
    <div class="m_nav_ham" id="m_ham_1"></div>
    <div class="m_nav_ham" id="m_ham_2"></div>
    <div class="m_nav_ham" id="m_ham_3"></div>
  </div>
</div>

2. The CSS to style the toggle button as an animated hamburger icon.

#m_nav_menu {
  width: 45px;
  height: 45px;
  position: fixed;
  background: rgba(0, 0, 0, 0);
  top: 30px;
  right: 40px;
  z-index: 3;
}

.m_nav_ham {
  width: 35px;
  height: 5px;
  background: #fff;
  margin: 5px auto;
}

.m_nav_ham_1_open {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  margin-top: 15px;
}

.m_nav_ham_2_open {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  margin-top: -10px;
}

.m_nav_ham_3_open { opacity: 0; }

.button_open { background: #333;/*	-webkit-transform: rotate(45deg);*/
}

3. Create the Html for the navigation menu.

<div id="m_nav_container" class="m_nav">
  <ul id="m_nav_list" class="m_nav">
    <li class="m_nav_item" id="m_nav_item_1"> <a href="#section_1"> nav_item_1 </a> </li>
    <li class="m_nav_item" id="moble_nav_item_2"> <a href="#section_2"> nav_item_2 </a> </li>
    <li class="m_nav_item" id="moble_nav_item_3"> <a href="#section_3"> nav_item_3 </a> </li>
    <li class="m_nav_item" id="moble_nav_item_4"> <a href="#section_4"> nav_item_4 </a> </li>
    <li class="m_nav_item" id="moble_nav_item_5"> <a href="#section_5"> nav_item_5 </a> </li>
  </ul>
</div>

4. The required CSS styles for the navigation menu.

#m_nav_container {
  width: 100%;
  height: 200px;
  background-color: #fff;
  position: fixed;
  display: none;
  top: 0px;
}

#m_nav_bar {
  width: 80%;
  margin: auto;
}

#m_nav_list { list-style: none; }

.m_nav_item { margin-top: 15px; }

.m_nav_item a {
  text-decoration: none;
  color: #333;
  font-size: 1.0em;
  font-family: 'Bree Serif', serif !important;
  -webkit-transition-duration: 0.5s;
}

.m_nav_item a:hover { color: tomato; }

.container_open {
  position: fixed !important;
  display: block;
  height: 120px;
}

/*Media query for all non-mobile devices*/

@media screen and (min-width: 780px) {

/*Nav bar media queries!*/


#m_nav_container {
  text-align: left;
  height: 120px !important;
}

.m_nav_item {
  display: inline;
  line-height: 100px;
  margin-right: 50px;
}

.m_nav_item a {
  margin-top: 10px;
  font-size: 1.2em;
}

#m_nav_item_1 { margin-left: 5px; }

#m_nav_menu:before {
  content: "MENU";
  color: white;
}

.open_wrapper { top: 130px !important; }
}

/*Media query for larger, non-mobile devices*/

@media screen and (min-width: 1150px) {

#m_nav_container {
  text-align: center;
  height: 110px !important;
}

#m_nav_menu { top: 15px; }

.m_nav_item {
  display: inline;
  line-height: 70px;
  margin-right: 80px;
  padding-bottom: 10px
}

.m_nav_item a {
  margin-top: 10px;
  font-size: 1.5em;
}
}

5. Include the needed jQuery javascript library at the bottom of your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

6. The Javascript to enable the responsive toggle menu. Add the following JS snippet in your existing JS file or include the main.js directly in your web page, after JQuery library.

$(document).ready(function(){

toggle_nav_container();
gotoByScroll();
});

var toggle_nav_container = function () {

var $toggleButton = $('#toggle_m_nav');
$navContainer = $('#m_nav_container');
$menuButton = $('#m_nav_menu')
$menuButtonBars = $('.m_nav_ham');
$wrapper = $('#wrapper');

// toggle the container on click of button (can be remapped to $menuButton)

$toggleButton.on("click", function(){

// declare a local variable for the window width
var $viewportWidth = $(window).width();

// if statement to determine whether the nav container is already toggled or not

if($navContainer.is(':hidden'))
{
$wrapper.removeClass('closed_wrapper');
$wrapper.addClass("open_wrapper");
$navContainer.slideDown(200).addClass('container_open').css("z-index", "2");
// $(window).scrollTop(0);
$menuButtonBars.removeClass('button_closed');
$menuButtonBars.addClass('button_open');
$("#m_ham_1").addClass("m_nav_ham_1_open");
$("#m_ham_2").addClass("m_nav_ham_2_open");
$("#m_ham_3").addClass("m_nav_ham_3_open");

}
else
{
$navContainer.css("z-index", "0").removeClass('container_open').slideUp(200)
$menuButtonBars.removeClass('button_open')
$menuButtonBars.addClass('button_closed')
$wrapper.removeClass('open_wrapper')
$wrapper.addClass("closed_wrapper")
$("#m_ham_1").removeClass("m_nav_ham_1_open");
$("#m_ham_2").removeClass("m_nav_ham_2_open");
$("#m_ham_3").removeClass("m_nav_ham_3_open");

}
});

}

// Function that takes the href value of links in the navbar and then scrolls 
//the div on the page whose ID matches said value. This only works if you use 
//a consistent naming scheme for the navbar anchors and div IDs

var gotoByScroll = function (){

$(".m_nav_item a").on("click", function(e) {

e.preventDefault();
// var $divID =$(this).attr("href");
// var $scrollToDiv = "$(" + "'" + $divID + "'" +")";

$('html,body').animate({
   scrollTop: $($(this).attr("href")).offset().top - 50
}, "slow");

});

}

---

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