<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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="toggle"></div> <div class="overlay"></div> <div class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Team</a></li> <li><a href="#">Portfolio</a></li> </ul> </div> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

body { margin:0; padding:0; background:url(https://www.planwallpaper.com/static/images/beach-cool-wallpaper-hd_1_tKvqLtf.jpg); background-size:cover; font-family:sans-serif; } .toggle { position:fixed; top:20px; right:20px; width:50px; height:50px; border-radius:50%; cursor:pointer; z-index:1; } .toggle:before { content:'+'; position:absolute; top:0; left:0; font-size:50px; width:100%; height:100%; color:#fff; text-align:center; line-height:50px; border-radius:50%; background:#000; transition:0.5s; } .toggle.active:before { transform:rotate(405deg); background:#ffeb3b; color:#000; } .overlay { position:fixed; top:20px; right:20px; width:50px; height:50px; border-radius:50%; background:rgba(0,0,0,.95); transition:transform 0.5s; } .overlay.active { transform:scale(100,100); } .menu { width:100%; height:100%; overflow:hidden; z-index:1; visibility:hidden; } .menu.active { visibility:visible; transition-delay:0.5s; } .menu ul { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); margin:0; padding:0; } .menu ul li { list-style:none; } .menu ul li a { color:#fff; position:relative; font-size:48px; text-decoration:none; margin:20px 0; display:block; text-shadow:0 2px 5px rgba(0,0,0,.5); font-family:sans-serif; } .menu ul li a:before { content:''; position:absolute; bottom:5px; left:-10px; width:100%; height:20px; background:#ffeb3b; z-index:-1; transform:scaleX(0); transform-origin:left; transition:transform 0.5s; } .menu ul li a:hover:before { transform:scaleX(1); }

$(document).ready(function(){ $('.toggle').click(function(){ $('.toggle').toggleClass('active'); $('.overlay').toggleClass('active'); $('.menu').toggleClass('active'); }); });