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

我的侧边菜单栏中的问题已修复且内容滚动

1 个答案: