css - jQuery animate horizontal slide across page -

hey all, interesting one,

i'm building menu slide across entire width of page (width:100%;) , need help. have arrow button floating on right side of page trigger menu bar slide out when clicked. i'd arrow button slide out in front of , once way across change arrow image it's opposite file.

the big issue width , height of these need flexible allow varying content. i've got feeble attempt @ making work, know i'm missing whole lot of factors here. code doesn't touch moving arrow button along rest.. , that's not lack of effort!

any help? thank you!

html:

<div id="main">      <div class="trans" id="trigger">           <img class="arrow_small" src="images/left_small.png" alt="slide out menu" />      </div>      <div id="slider">           <div class="trans" id="overlay"></div>           <div id="content">                <p>this content</p>           </div>      </div> </div> 

css:

#main {     width:100%;     height:306px;     top:50%;     margin-top:-153px;     position:absolute; } #trigger {     width:30px;     height:100%;     float:right;     background-color:#000;     position:relative;     z-index:3; } .arrow_small {     position:absolute;     left:50%;     top:50%;     margin-left:-6px;     margin-top:-12px; } #overlay {     width:100%;     height:100%;     position:absolute; } #content {     width:100%;     height:100%;     position:absolute;     z-index:2; 

javascript:

$(document).ready(function(){ //hide functions     $('#slider').css('display', 'none'); //menu slide out     $('#trigger').click(function (){         var bar = $('#slider');             bar.show(function(){                 this.animate({'marginright':'100%'},1000);             });     }); }); 

is you're looking for? try out in browser:

html:

<div id="main">  <div id="slider">  &nbsp;       <div id="image">         <p>image go here</p>       </div>       <div id="content">         <p>content...</p>       </div>  </div> 

css:

    * {     margin: 0;     padding: 0; } #slider {     width: 6%;     height: 350px;     top: 33%;     background-color: black;     position: absolute;     right: 0; } .arrow_small {     position:absolute;     left:50%;     top:50%;     margin-left:-6px;     margin-top:-12px; } #image {     width: 75px;     background-color: black;     position:relative;     color: white;     float: left; } #content {     position: relative;     overflow: hidden;     left: 100px;     color: white; } 

js:

    $(function() {     $('#image').toggle(function (){         $("#slider").animate({"width":"100%"}, 1000);     }, function() {         $("#slider").animate({"width":"6%"}, 1000);     }); }); 

i removed image had in because didn't have , wanted test locally text. hope helps!