Having issue in my side menu bar fixed and content scroll able

Question

Here is my JS fiddle link
http://jsfiddle.net/kodi/d2s3uja0/1/

Having issue in my side menu bar fixed and content scrollable. Now I want to show the menu vertical in the left side bar like this

M
E
N
U

How do I do it in CSS. After I click that, JQuery toggle should work.

I am trying to achieve like this: wholefoodsmarket

Answer 1

use the css transition and put the #menu outside of the view and just toggle class on click of #menu_btn.

HTML

<div id="header">
<div id="wrapper">
<div id="menu_btn" style="float:left;"><a href="#" style="color:#FFFFFF;">Menu</a></div>
<div id="whole">
<div id="wleft">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About  Yes Service</a>
<ul id="submenu">
<li><a href="#">Web Design</a></li>
<li><a href="#">Web Development</a></li>
<li><a href="#">Network</a></li>
</ul>
</li>
<li><a href="#">Boys Uniforms</a></li>
<li><a href="#">Girls Uniforms</a><ul id="submenu">
<li><a href="#">T-shirt</a></li>
</ul></li>
<li><a href="#">Thin client</a></li>
<li><a href="#">Contact Us</a></li>
</ul></div><!--endofwleft-->
</div><!--endofwhole-->
</div><!--endofmenu-->    
</div><!--endofwrapper-->
</div><!--endofheader-->

CSS

@charset "utf-8";
/* CSS Document */


*{
margin:0px;
padding:0px;
}


#header{
width:100%;
height:60px;
background-color:#031f2d;   
}
#wrapper
{
width:1300px;
height:auto;
margin:auto;
}


#whole
{
width:1300px;
height:1000px;
float:left;
}



#wleft ul
{
width:200px;
height:auto;
float:left;
position:fixed;

outline: 1px solid;
}








#wleft  #menu li
{
width:200px;
height:30px;
float:left;
color:#FFFFFF;
background-color:#000000
}

#wleft  #menu li a{
color:#FFFFFF;
background-color:#000000;
text-decoration:none;
}

#menu li
{
position:relative;
}

#menu li #submenu 
{
position:absolute;
}


#menu li #submenu
{
display:none;
}

#menu li:hover  #submenu
{
display:block;
position:absolute;
margin-left:200px;
}

#menu li:hover  #submenu li a 
{
border:#CCCCCC 1px solid;
height:25px;
width:300px;
background-color:#031f2d;
color:#fff;
display:block;
padding-top:5px;
}

#menu li:hover  #submenu li a 
{
text-align:left;
text-decoration:none;
}

#submenu li:hover{
background-color:#333333;
}
#menu_btn {
    transform: rotateZ(-90deg);
    position: relative;
    top: 22px;
    left: -5px;
}
#menu {
    position: absolute;
    top: 50px;
    left: -220px;
    transition: left 0.5s ease-out;
}
#menu.shown {
    left:0;
}

jQuery

$(document).ready(function(e) {
        $('#menu_btn').click(function(e) {
            $('#menu').toggleClass('shown');
        });
    });

DEMO