Responsive & Mobile-friendly jQuery Toggle Menu Plugin

File Size: 5.33 KB
Views Total: 4925
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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>

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>

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="//"></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.



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

$navContainer.slideDown(200).addClass('container_open').css("z-index", "2");
// $(window).scrollTop(0);

$navContainer.css("z-index", "0").removeClass('container_open').slideUp(200)



// 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) {

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

   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.