CSS Position Help (horizontal sidebar showing up when animate content over)
- by jstacks
Let me try my best to explain what I'd like to have happen, show you the code I have an hopefully I can get some help.
So, I'm trying to do a sliding navigation UI from the left side of the screen (like a lot of mobile apps). The main content slides over, displaying the navigation menu beneath.
Right now the browser thinks the screen is getting wider and introduces a horizontal scroll bar. However, I don't want that to happen...
How do I get the div to animate off screen but not enlarge the width of the screen (i.e. keep it partially off screen)?
Anyway here is my fiddle: http://jsfiddle.net/2vP67/6/
And here is the code within the post:
HTML
<div id='wrapper'>
<div id='navWide'> </div>
<div id='containerWide'> </div>
<div id='containerTall'>
<div id='container'>
<div id='nav'>
<div id='navNavigate'> Open Menu </div>
<div id='navNavigateHide'> Close Menu </div>
</div>
</div>
</div>
<div id='sideContainerTall'>
<div id='sideContainer'>
<div id='sideNav'>Side Navigation </div>
</div>
</div>
</div>
CSS
#wrapper {
width:100%;
min-width:1000px;
height:100%;
min-height:100%;
position:relative;
top:0;
left:0;
z-index:0;
}
#navWide {
color: #ffffff;
background:#222222;
width:100%;
min-width:1000px;
height:45px;
position:fixed;
top:0;
left:0;
z-index:100;
}
#containerWide {
width:100%;
min-width:1000px;
min-height:100%;
position:absolute;
top:45px;
z-index:100;
}
#containerTall {
color: #000000;
background:#dadada;
width:960px;
min-height:100%;
margin-left:-480px;
position:absolute;
top:0;
left:50%;
z-index:1000;
}
/***** main container *****/
#container {
width:960px;
min-height:585px;
}
#nav {
color: #ffffff;
background:#222222;
width:960px;
height:45px;
position:fixed;
top:0;
z-index:10000;
}
#navNavigate {
background:yellow;
font-size:10px;
color:#888888;
width:32px;
height:32px;
padding:7px 6px 6px 6px;
float:left;
cursor:pointer;
}
#navNavigateHide {
background:yellow;
font-size:10px;
color:#888888;
width:32px;
height:32px;
padding:7px 6px 6px 6px;
float:left;
cursor:pointer;
display:none;
}
#sideContainerTall {
background:#888888;
width:264px;
min-height:100%;
margin-left:-480px;
position:absolute;
top:0;
left:50%;
z-index:500;
}
#sideContainer {
width:264px;
min-height:585px;
display:none;
}
#sideContainerTall {
background:#888888;
width:264px;
min-height:100%;
margin-left:-480px;
position:absolute;
top:0;
left:50%;
z-index:500;
}
#sideContainer {
width:264px;
min-height:585px;
display:none;
}
#sideNav {
width:264px;
height:648px;
float:left;
}
Javascript
$(document).ready(function() {
$('div#navNavigate').click(function() {
$('div#navNavigate').hide();
$('div#navNavigateHide').show();
$('div#sideContainer').show();
$('div#containerTall').animate({
'left': '+=264px'
});
});
$('div#navNavigateHide').click(function() {
$('div#navNavigate').show();
$('div#navNavigateHide').hide();
$('div#containerTall').animate({
'left': '-=264px'
}, function() {
$('div#sideContainer').hide();
});
});
});
