修復了我的側邊菜單欄中的問題，並且可以滾動內容

Question

這是我的JS小提琴鏈接
http://jsfiddle.net/kodi/d2s3uja0/1/

我的側面菜單欄中的問題已修復，內容可滾動。 現在我想像這樣在左側欄中垂直顯示菜單

M
E
N
U

我如何在CSS中做到這一點。 單擊該按鈕后，JQuery切換應起作用。

我正在努力實現這樣的目標： Wholefoodsmarket

Answer 1

使用CSS轉換，並把#menu視圖之外，只需撥動上的點擊類#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