jquery - Navbar slide toggle should slide behind navbar, but slides in front -

jquery - Navbar slide toggle should slide behind navbar, but slides in front -

i made animated navbar, works expected. thing bugs me fact list of menu items slides open in front of navbar, instead of behind navbar.

i've set jsfiddle demonstrate problem: jsfiddle

and here's quick code view (the total code in fiddle):

html:

<header class="header"> <div id="logo"> <a href="#top"> <img src="http://lorempixel.com/125/25/abstract" alt="logo"/> </a> </div> <nav class="main-nav"> <ul> <li><a href="#projects">projects</a> </li> <li><a href="#about">about</a> </li> <li><a href="#contact">contact</a> </li> </ul> <button type="button" role="button" aria-label="toggle navigation" class="lines-button x"> <span class="lines"></span> </button> </nav> <!-- main-nav --> </header>

css:

.main-nav ul { position: absolute; top: 0; left: 0; width: 100%; -webkit-transform: translatey(-100%); -moz-transform: translatey(-100%); -ms-transform: translatey(-100%); -o-transform: translatey(-100%); transform: translatey(-100%); -webkit-transition: .5s ease; -moz-transition: .5s ease; -ms-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; } .main-nav ul.is-visible { -webkit-transform: translatey(50px); -moz-transform: translatey(50px); -ms-transform: translatey(50px); -o-transform: translatey(50px); transform: translatey(50px); }

check : http://jsfiddle.net/5ydhgxay/3/

$('.lines-button').on('click', function (event) { $('.header').toggleclass('absolute'); $('.main-nav').children('ul').slidetoggle(500); });

css

.main-nav ul { position: absolute; top: 50px; left: 0; width: 100%; margin:0; display:none; }

jquery html css