I need help with my HTML 5 application. I am trying to create a sliding menu that is responsive and has a left/right transition, with the first panel always visible for 100px on the right.
However, I am encountering an issue where the first <div> passes over the original <div>.
HTML:
<div id="myContainer">
<div class="animate1 animate1-nomove">
<section class="myPanel panel-padding">new new new new new</section>
</div>
<div class="animate2 animate2-nomove">
<section class="myPanel panel-padding" id="scrolling">original</section>
</div>
</div>
CSS:
div#myContainer {
position: absolute;
top: 60px; right: 0; bottom: 60px; left: 0;
/* necessary for sliding menu */
overflow: hidden;
border: 1px solid;
}
div.animate1 {
height: 100%;
width: 100%;
background-color: #c00;
-webkit-transition: 2s ease-in-out;
-moz-transition: 2s ease-in-out;
-o-transition: 2s ease-in-out;
-ms-transition: 2s ease-in-out;
transition: 2s ease-in-out;
position: absolute;
}
div.animate2 {
height: 100%;
width: 100%;
-webkit-transition: 2s ease-in-out;
-moz-transition: 2s ease-in-out;
-o-transition: 2s ease-in-out;
-ms-transition: 2s ease-in-out;
transition: 2s ease-in-out;
position: absolute;
}
/* no move */
.animate1-nomove {left: -100%;}
.animate2-nomove {left: 0px;}
/* move */
.animate1-move {left: 0px; margin-right: 100px;}
.animate2-move {left: 100%; margin-left: -100px;}
Check out my JSFiddle for a demo: http://jsfiddle.net/nKtC6/714/