html - CSS Push menu will ease in but not east out -
i creating push menu. can menu, body, header, main, , footer push open want it, when close menu, menu disappears, while else eases same opened. want menu ease same way else , not "disappear".
i've looked @ code long think , need set of eyes.
you can see demo here: http://designs.totaleeyou.com/jml-development/ click main in top left corner.
here section of css handles transition:
body, body.has-active-menu-push-left, body.has-active-menu-push-right, header.scroll, header ul.logo, #menu-push-left, #menu-push-right, a.menu-close i.fa-times-circle-o, .page-masking { -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -ms-transition:all 0.5s; -o-transition:all 0.5s; transition: 0.5s; } body.has-active-menu-push-left, #menu-push-left { -webkit-transform:translate(100%, 0); -moz-transform:translate(100%, 0); -ms-transform:translate(100%, 0); -o-transform:translate(100%, 0); transform:translate(100%, 0); } body.has-active-menu-push-right, #menu-push-right { -webkit-transform:translate(-100%, 0); -moz-transform:translate(-100%, 0); -ms-transform:translate(-100%, 0); -o-transform:translate(-100%, 0); transform:translate(-100%, 0); } @media screen , (min-width:780px) { body.has-active-menu-push-left, #menu-push-left { -webkit-transform:translate(500px, 0); -moz-transform:translate(500px, 0); -ms-transform:translate(500px, 0); -o-transform:translate(500px, 0); transform:translate(500px, 0); } body.has-active-menu-push-right, #menu-push-right { -webkit-transform:translate(-500px, 0); -moz-transform:translate(-500px, 0); -ms-transform:translate(-500px, 0); -o-transform:translate(-500px, 0); transform:translate(-500px, 0); } }
remove display:none;
in #menu-push-left, #menu-push-right
. eases don't work display
Comments
Post a Comment