$('#nav-toggle').click(function(){ $('body').toggleClass('open'); });
<header id="top-head"> <div id="top-head-inner"> <div id="nav-toggle"> <div> <span></span> <span></span> <span></span> </div> </div> <nav id="global-nav"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">PRODUCT</a></li> <li><a href="#">WORKS</a></li> <li><a href="#">COMPANY</a></li> <li><a href="#">CONTACT</a></li> </ul> </nav> <div id="nav-bg"></div> </div> </header>
@import url(http://fonts.googleapis.com/css?family=Lato); body { font-family: 'Lato', sans-serif; background: #eee; } /* *********************************************************** * #global-nav * *********************************************************** */ .open #global-nav { z-index: 1000; visibility: visible; } #global-nav { visibility: hidden; position: fixed; display: table; vertical-align: middle; color: #fff; top: 0; height: 100%; width: 100%; text-align: center; font-size: 16px; } #global-nav ul { display: table-cell; vertical-align: middle; list-style: none; } #global-nav a { color: #fff; text-decoration: none; display: block; padding: 10px 0; } /* *********************************************************** * nav-list * *********************************************************** */ #global-nav ul li { opacity: 0; -webkit-transform: scaleX(0) translateX(-260px); transform: scaleX(0) translateX(-260px); -webkit-transition: none; transition: none; } .open #global-nav ul li { opacity: 1; -webkit-transform: scaleX(1) translateX(0); transform: scaleX(1) translateX(0); -webkit-transition: all .3s ease-out; transition: all .3s ease-out; -webkit-transition-delay: .1s; transition-delay: .1s; } .open #global-nav ul li:nth-child(2) { -webkit-transition-delay: .2s; transition-delay: .2s; } .open #global-nav ul li:nth-child(3) { -webkit-transition-delay: .3s; transition-delay: .3s; } .open #global-nav ul li:nth-child(4) { -webkit-transition-delay: .4s; transition-delay: .4s; } .open #global-nav ul li:nth-child(5) { -webkit-transition-delay: .5s; transition-delay: .5s; } /* *********************************************************** * #nav-bg * *********************************************************** */ #nav-bg { content: ""; width: 2400px; height: 2400px; margin-right: -1200px; margin-top: -1200px; top: 40px; right: 40px; display: block; position: fixed; background: #17A669; -webkit-border-radius: 50%; border-radius: 50%; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: scale(.02); transform: scale(.02); } .open #nav-bg { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all .6s ease-out; transition: all .6s ease-out; } /* *********************************************************** * #nav-toggle * *********************************************************** */ #nav-toggle { display: block; position: fixed; right: 18px; top: 21px; width: 23px; height: 30px; cursor: pointer; padding: 10px 11px; z-index: 1001; -webkit-tap-highlight-color:rgba(0,0,0,0); } #nav-toggle div { position: relative; } #nav-toggle span { display: block; position: absolute; height: 2px; width: 100%; background: #fff; left: 0; zoom: 1; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out; } #nav-toggle span:nth-child(1) { top: 0; } #nav-toggle span:nth-child(2) { top: 8px; } #nav-toggle span:nth-child(3) { top: 16px; } .open #nav-toggle { background: transparent; } .open #nav-toggle span { background: #fff; } .open #nav-toggle span:nth-child(1) { top: 9px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); zoom: 1; } .open #nav-toggle span:nth-child(2) { width: 0; left: 50%; } .open #nav-toggle span:nth-child(3) { top: 9px; -webkit-transform: rotate(135deg); transform: rotate(135deg); zoom: 1; }