i have problem animated menu.
<header role="banner"> <a class="nav-btn"> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> </a> </header> <nav role="navigation" class="site-nav"> <ul> <li><a href="#">home</a></li> <li><a href="#">about</a></li> <li><a href="#">clients</a></li> <li><a href="#">contact us</a></li> </ul> </nav> css
@import url(http://fonts.googleapis.com/css?family=roboto:400,700); @keyframes fadeinleft { 0% { transform:translatex(-100%); } 100% { transform:translatex(0); } } @keyframes fadeinright { 0% { transform:translatex(100%); } 100% { transform:translatex(0); } } .nav-btn { display:inline-block; float:right; position:relative; top:5px; cursor:pointer; transition:all 0.5s ease; right:0; } .bar { display:block; height:5px; width:35px; background-color:#111; margin-top: 6.5px; transition:all 0.5s ease; &:nth-of-type(1) { margin-top:0; } } .b-open { &:nth-of-type(1){ transform:rotate(-45deg); transform-origin: right top; } &:nth-of-type(2){ opacity:0; } &:nth-of-type(3){ transform:rotate(45deg); transform-origin:right bottom; } } .site-nav { opacity:0; position:absolute; right:0; top:160px; left:0; bottom:0; text-align: center; font-weight: 700; transition:all 0.5s ease; li { background-color:rgba(#fff, 0.8); transition:all 0.5s ease; } { display:block; text-decoration: none; color:#111; text-transform: uppercase; transition:all 0.5s ease; padding:40px; margin:0 30%; border-top:1px dashed lighten(#111, 60%); } } .nb-open { transform:rotate(-180deg); right:50%; margin-right:-23.5px; } .sn-open { opacity:1; li:nth-of-type(odd) { { animation:fadeinleft 0.5s ease; } } li:nth-of-type(even) { { animation:fadeinright 0.5s ease; } } } js
$(".nav-btn").click(function(){ $(this).toggleclass("nb-open"); $(".site-nav").toggleclass("sn-open"); $(".bar").toggleclass("b-open"); }); this menu opened in background. hidden, mouse cursor "see" if open. how change ?
it menu codepin http://codepen.io/emcarru/pen/bxehd
instead of toggling visibility using opacity property, why not use display: none; property instead?
new css (notice new 'hidden' class):
@import url(http://fonts.googleapis.com/css?family=roboto:400, 700); @keyframes fadeinleft { 0% { transform:translatex(-100%); } 100% { transform:translatex(0); } } @keyframes fadeinright { 0% { transform:translatex(100%); } 100% { transform:translatex(0); } } .nav-btn { display:inline-block; float:right; position:relative; top:5px; cursor:pointer; transition:all 0.5s ease; right:0; } .bar { display:block; height:5px; width:35px; background-color:#111; margin-top: 6.5px; transition:all 0.5s ease; &:nth-of-type(1) { margin-top:0; } } .b-open { &:nth-of-type(1) { transform:rotate(-45deg); transform-origin: right top; } &:nth-of-type(2) { opacity:0; } &:nth-of-type(3) { transform:rotate(45deg); transform-origin:right bottom; } } .site-nav { position:absolute; right:0; top:160px; left:0; bottom:0; text-align: center; font-weight: 700; transition:all 0.5s ease; li { background-color:rgba(#fff, 0.8); transition:all 0.5s ease; } { display:block; text-decoration: none; color:#111; text-transform: uppercase; transition:all 0.5s ease; padding:40px; margin:0 30%; border-top:1px dashed lighten(#111, 60%); } } .nb-open { transform:rotate(-180deg); right:50%; margin-right:-23.5px; } .sn-open { li:nth-of-type(odd) { { animation:fadeinleft 0.5s ease; } } li:nth-of-type(even) { { animation:fadeinright 0.5s ease; } } } .hidden { display: none; } new html (hidden class applied default menu):
<header role="banner"> <a class="nav-btn"> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> </a> </header> <nav role="navigation" class="site-nav hidden"> <ul> <li><a href="#">home</a> </li> <li><a href="#">about</a> </li> <li><a href="#">clients</a> </li> <li><a href="#">contact us</a> </li> </ul> </nav> new js (the hidden class toggled):
$(".nav-btn").click(function () { $(this).toggleclass("nb-open"); $(".site-nav").toggleclass("sn-open").toggleclass("hidden"); $(".bar").toggleclass("b-open"); }); 
Comments
Post a Comment