<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2 style="text-align:center;font-family:calibri;">Hamburger MENU</h2> <h2 style="text-align:center;font-family:calibri;margin-top:0;">try (windows) less than 768px</h2> </div> <div class="menu"> <div id="res-men-btn" class="men-close"> <div> <span class="line one"></span> <span class="line two"></span> <span class="line three"></span> </div> </div> <ul class="list-inline"> <li> <a href="#">MENU 1</a> </li> <li> <a href="#">MENU 2</a> </li> <li> <a href="#">MENU 3</a> </li> <li> <a href="#">MENU 4</a> </li> <li> <a href="#">MENU 5</a> </li> <li> <a href="#">MENU 6</a> </li> <li> <a href="#">MENU 7</a> </li> <li> <a href="#">MENU 8</a> </li> <li> <a href="#">MENU 9</a> </li> <li> <a href="#">MENU 10</a> </li> </ul> </div> </div>

*{ box-sizing: border-box; } body{ font-family: calibri; } /*RESPONSIVE MENU BUTTON CSS*/ #res-men-btn{ display: none; border-bottom: 1px solid #000; } .list-inline{ list-style-type: none; margin: 0; padding:0; text-align:center; } .list-inline > li{ display: inline-block; } .list-inline > li > a{ text-decoration: none; display: block; padding: 5px 7px; color: #000; } .list-inline > li > a:hover{ background: purple; color: #fff; } @media (max-width:767px){ #res-men-btn + ul.list-inline{display: none;} .list-inline > li{ display: block; } #res-men-btn.men-open .list-inline > li{margin-bottom: 5px;} .menu-bar-inner > ul > li > a{display: block;} #res-men-btn{display: table;width: 100%;padding: 5px 0;} #res-men-btn > div{float: right;} } #res-men-btn > div{ border: 1px solid purple; height: 30px; width: 35px; border-radius: 6px 6px; cursor: pointer; padding: 6px; } #res-men-btn.men-open > div, #res-men-btn.men-close > div:hover{ border-color: #000; } #res-men-btn .line{ display: block; width: 100%; height: 2px; background-color: purple; margin-bottom: 5px; position: relative; -webkit-transition: .3s; -ms-transition: .3s; transition: .3s; } #res-men-btn.men-open .line, #res-men-btn.men-close > div:hover .line{ background-color: #000; } /*#res-men-btn.men-open > div:hover .line{ background-color: #ADC11E; }*/ #res-men-btn .line.one.active{ transform: rotate(50deg); top: 7px; } #res-men-btn .line.two.active{ display: none; } #res-men-btn .line.three.active{ transform: rotate(-50deg); }

$(function () { (function () { $('#res-men-btn > div').click(function () { var parent = $(this).parent('#res-men-btn'); var lines = $(this).find('span'); parent.toggleClass('men-close men-open'); if (parent.hasClass('men-open')) { lines.addClass('active'); parent.next('ul.list-inline').slideDown(400); } else { lines.removeClass('active'); parent.next('ul.list-inline').slideUp(400); } }); })(); });