Hello readers, today I will guide you "How to create custom Hamburger menu using jquery"

Hamburger menu is just a symbol which is consists of three parallel horizontal lines and used as similar to button in graphical user interfaces. It displays at top left or top right.

Normally, we can use bootstrap Hamburger menu but if you want to create you own custom Hamburger menu use the below HTML + CSS + jQuery code.

HTML Code:-

<section class="inside">
    <!--MENU-->
    <nav>
        <div id="dropdown" class="menu clear">
            <ul id="main-menu" class="sf-menu">
                <li>Home</li>
                <li>About Us</li>
                <li>Services</li>
                <li>Portfolio</li>
                <li>Contact Us</li>
            </ul>
        </div>
    </nav>
    <div class="smenu">
        <select class="select-menu">&nbsp;</select>
    </div>
    <!-- /MENU-->
</section>

CSS Code:-

.inside { width:980px; margin:0 auto; }
.select-menu { display:none; }
nav { float:right;margin-top: 25px;}
.menu ul li { float:left; margin-right:1px; }
.menu ul li a:link, .menu ul li a:visited { padding:10px 30px; /*background:#F0F0F0; */font:14px 'Open Sans', sans-serif; color:#797979; }
.menu ul li a:hover { background:#4b71fc !important; color: #fff;}
.menu ul li a.sf-with-ul {padding-right: 40px;}
.menu ul li.current_page_item a, .menu ul li.current-menu-ancestor a { background:#4b71fc; color:#fff; }
.clear:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

JQuery  Code:-

(function($) {
	"use strict";  
	$('.inside .menu').find('li:has(ul)').addClass('has-menu');

	$('.select-menu').change(function(){					
		window.location = $(this).val();
	});

	$("<option />", {
		"selected": "selected",
		"value"   : "",
		"text"    : "Go to Page..."
	}).appendTo(".select-menu");

	$('.inside .menu').find('li').each(function(){	
		var cur_link = $(this).children("a");

		if (!$(this).parent('ul').hasClass('sub-menu')) {
			$('.select-menu').append('<option value='+cur_link.attr("href")+' > &nbsp; '+cur_link.text()+'</option>');		
		}else if (!$(this).parent('ul.sub-menu li ul').hasClass('sub-menu')) {
			$('.select-menu').append('<option value='+cur_link.attr("href") +' > &nbsp;&ndash; '+cur_link.text()+'</option>');
		}else {
			$('.select-menu').append('<option value='+cur_link.attr("href") +' > &nbsp;&ndash;&nbsp;&ndash; '+cur_link.text()+'</option>');
		}

	});
})(jQuery);

The "use strict" directive is new in JavaScript. The main purpose of "use strict" is to indicate that the code should be executed in "strict mode".

Strict mode is declared by adding "use strict"; to the beginning of a script or a function. If you use this keyword in your js code so the declaration of a variable should be proper.

See the below example:-

function firstFunction() {
  y = 3.14;   // error (y is not defined)
}

function secondFunction() {
  var y = 3.14;   // y is defined properly.
}

That's it. I hope it helps you.