求一个好有的左右伸缩菜单代码

求一个好有的左右伸缩菜单代码！
就是那种菜单在左边，点一下，出来，点一下又隐藏的那种
我要做一个软件，想把菜单做成这种形式的！谢谢各位~~

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
/*Menu*/
*{margin:0;padding:0;}
body{font:12px Arial, Helvetica, sans-serif;text-align:center;background:#f5f5f5;}
a:link,a:visited{color:#000;text-decoration:none;}
a:hover{color:#000;}
#subMenu{border:1px solid #cdcdcd;margin:15px 5px;width:250px;}
#subMenu dl h2{background:#666;cursor:pointer;text-align:left;margin-bottom:1px;text-indent:15px;font-size:14px;}
#subMenu dl ul{display:none;list-style:none;}
#subMenu dl li{line-height:180%;}
#subMenu dl li a{display:block;background:url(../images/.gif) no-repeat 15px center;text-indent:15px;padding:2px 0;padding-left:15px;}
#subMenu dl li a:hover{background:#ccc url(../images/.gif) no-repeat 15px center;}
</style>
</head><body>
            
            <div id="subMenu">
             <dl>
                 <dt><h2>一级栏目0</h2>
                     <ul>
                            <li><a href="#">二级栏目</a></li>
                            <li><a href="#">二级栏目</a></li>
                            <li><a href="#">二级栏目</a></li>
                        </ul>
                    </dt>
                    <dt><h2>一级栏目1</h2>
                     <ul>
                            <li><a href="#">二级栏目1</a></li>
                            <li><a href="#">二级栏目1</a></li>
                            <li><a href="#">二级栏目1</a></li>
                        </ul>
                    </dt>
                    <dt><h2>一级栏目2</h2>
                     <ul>
                            <li><a href="#">二级栏目2</a></li>
                            <li><a href="#">二级栏目2</a></li>
                            <li><a href="#">二级栏目2</a></li>
                        </ul>
                    </dt>
                    <dt><h2>一级栏目</h2></dt>
                </dl>
            </div>
             <script language="javascript">
function find_$(id){return document.getElementById(id)}
var Title = find_$('subMenu').getElementsByTagName('h2');
var co = find_$('subMenu').getElementsByTagName('ul');
//循环查找当前标签
for(i=0;i<Title.length;i++){
var number = i;
//点击标签触发事件
Title[number].onclick = function(){
var Content = this.nextSibling;
var ConNum = this.parentNode.childNodes.length;
if(ConNum>1){
while (Content.nodeType!=1)
{
Content = Content.nextSibling;
}
var status = Content.style.display;
if(status=="none"||status==''){
Content.style.display = 'block';
}
else{
Content.style.display = 'none';
}
}
else{
this.style.background = "#333"
}
}
}
//渐隐效果

</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>导航菜单</title>
<style type="text/css">
.titleStyle{
background-color:#008800;color:#ffffff;border-top:1px solid #FFFFFF;font-size:9pt;cursor:hand;
}
.contentStyle{
background-color:#eeffee;color:blue;font-size:9pt;
} a{
color:blue;
}
body{
font-size:9pt;
}
</style>
</head>
<body> <script language="JavaScript">

</script>
</body>
</html>
其实就是来控制显示和隐藏，楼主jquery中有一个单独控制奇偶的事件