$('.icon').click(function(){ $('.icon, ul').toggleClass('active'); });
<nav> <div class="toggle"> <div class="icon"> <div class="hamburger"></div> </div> </div> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Sercices</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </nav>
body{ margin: 0; padding: 0; font-family: sans-serif; } nav{ width: 100%; background: #00316b; } ul{ width: 80%; margin: 0 auto; } ul li{ list-style: none; display: inline-block; padding: 20px; } ul li:hover{ background: #e91e63; } ul li a{ color: #fff; text-decoration: none; } .toggle{ width: 100%; padding: 10px 20px; background: #001f44; box-sizing: border-box; display: none; } @media(max-width:768px){ .toggle{ display: block; } ul{ width: 100%; display: none; } ul li{ display: block; text-align: center; } .active{ display: block; } } .icon{ position: relative; width: 80px; height: 80px; cursor: pointer; margin: 0 0 0 auto; } .hamburger{ width: 50px; height: 6px; background: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 2px 5px rgba(0,0,0,.2); transition: .5s; } .hamburger:before, .hamburger:after{ content: ''; position: absolute; width: 50px; height: 6px; left:0; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.2); transition: .5s; } .hamburger:before{ top: -16px; } .hamburger:after{ top: 16px; } .icon.active .hamburger{ background: rgba(0,0,0,0); box-shadow: 0 2px 5px rgba(0,0,0,0); } .icon.active .hamburger:before{ top: 0; transform: rotate(45deg); } .icon.active .hamburger:after{ top: 0; transform: rotate(135deg); }