I have encountered a challenging issue that I am struggling to resolve. Currently, I am working on developing a left side menu using jQuery and I have managed to get it up and running.
However, the problem arises when I set my div #content with only position:fixed. While this keeps the menu working properly, it prevents me from scrolling through the rest of the content on the page.
#content {position:absolute; position:fixed;}
If I add both position:fixed and position:absolute to my content, I can then scroll down the content as desired. However, this setup causes confusion because it allows access to both the menu items and the content simultaneously.
My goal is to have the content fixed only when the side left menu is open and allow scrolling otherwise. Does anyone know how I can achieve this?
You can view my code on JSFiddle: http://jsfiddle.net/3Gezv/9/
Here's a snippet of my HTML:
<div id="menu">
<ul>
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
</ul>
</div>
<div id="content">
<div id="menubar">
<div id="open_menu">Menu</div>
</div>
</div>
And here's a snippet of my CSS:
* {
padding: 0px;
margin: 0px;
}
#menubar {
width:100%;
background-color:gray;
color: #fff;
padding: 10px;
}
#open_menu {
cursor:pointer;
}
#menu, #content {
display:inline;
}
#menu li a {
padding: 10px;
display: block;
}
#content {
width:100%;
background-color: #fff;
z-index: 5;
position: fixed;
left: 0px;
height: 100%;
-webkit-box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
moz-box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
o-box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
}
#menu {
float:left;
width: 350px;
height: 100%;
}
#menu li {
background-color:gray;
border-bottom: 1px solid #888;
}