I just tried my hands on creating a sliding push menu using css.
Keeping this really simple, I have just prepared basic demos for left and right sliding and push menus.
Left Sidebar
HTML Markup
<div id="wrapper">
/*
"chkController" is used to control the sliding of the navigation menu.
This will be hidden
*/
<input type="checkbox" name="chkController" id="chkController" />
/* Your navigation menu goes here */
<ul id="nav">
<li>...</li>
</ul>
/* Site contents goes here */
<div id="main">
/* This is the label for the hidden checkbox "chkController" */
<label id="lblController" for="chkController">
Click Me
</label>
</div>
</div>
CSS
/* Positing the left menu */
#nav{
margin:0px;
width:150px;
height: 500px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
}
/* Hiding the checkbox */
#chkController{
display:none;
}
/*
Here goes the CSS to slide the menu,
move the main container by 150px so that left menu is visible.
*/
#chkController:checked ~ #main {
transform: translateX(150px);
-ms-transform: translateX(150px);
-webkit-transform: translateX(150px);
}
Right Sidebar
HTML Markup remains the same as the markup for left sidebar.
CSS
/* Positing the right menu */
#nav{
margin:0px;
width:150px;
height: 500px;
position: absolute;
right: 0;
top: 0;
bottom: 0;
}
/* Hiding the checkbox */
#chkController{
display:none;
}
/*
Here goes the CSS to slide the menu,
move the main container by 150px so that left menu is visible.
*/
#chkController:checked ~ #main {
transform: translateX(-150px);
-ms-transform: translateX(-150px);
-webkit-transform: translateX(-150px);
}
You can download the demo here.
P.S. : These demos uses CSS3, this example is not supported by IE. Thanks for having a look :)
