动态菜单可以增加网站的实用性，充分利用有限空间丰富内容，下面这个可以伸缩折叠的菜单代码比较简单，是上下伸缩式，稍微改动一下js代码还能获得不一样的效果，先把代码和一部分说明贴出来，实际效果看结尾。

js代码

var jsID = “”;
function DoMenu(cssid)/*cssid内容在下文hmtl中又体现*/
{
var obj = document.getElementById(cssid);
obj.className = (obj.className.toLowerCase() == “expanded”?”cssdp”:”expanded”);/*cssdp是列表样式(下文css代码中可找到)*/

if((jsID!=”")&&(cssid!=jsID))
{
document.getElementById(jsID).className = “cssdp”;
}

jsID = cssid;
}

js就这么简单的几行，注意到黑体的代码了吗，和开头说的改动js代码有关，下文有说明；

css代码

*{margin:0;padding:0;border:0;}
/*为了限制列表项自动缩进，影响效果；实际上它主要对下面#nav和#nav li ul作用，所以可以分别对它们进行限制；*/
#nav {
width:180px;
line-height:24px;
list-style-type:none;/*防止出现列表项标志，本例中有无都没有影响*/
text-align:left;
}
#nav a {
width: 160px;
display: block;
padding-left:20px;
}
#nav li {
background:#CCC;
border-bottom:#FFF 1px solid;/*列表项下边框白色，为了更好看*/
}
#nav li a{color:#333;
text-decoration:none;/*防止出现链接下划线*/
}
#nav li a:hover{
background:red;
}
#nav li ul {
list-style:none;/*防止出现列表项标志，本例中有无都没有影响*/
text-align:left;
}
#nav li ul li{
background:pink;
}
#nav li ul a{
width:160px;
text-decoration:none;/*防止出现链接下划线*/
}
#nav li ul li a:hover {
background:red;
}
#nav ul.cssdp {
display: none;/*本例伸缩折叠必须*/
}

html代码

<li><a href=”#1″ onclick=”DoMenu(‘M1′)”>网站前端</a>
<ul id=”M1″ class=”cssdp”>
略
</ul>
</li>

html代码也很简单，只摘录主要的控制菜单折叠部分说明，点击(onclick)“网站前端”，调用js函数DoMenu，执行菜单列表M1；onclick可以改成其他的如onmouseover等属性；

整个代码执行后，新菜单打开，旧菜单闭合，也就是说，只可能有一个菜单是打开状态，具体看demo；
前面提到js加黑的代码，把它删除后，再执行，可以实现多个菜单处于打开状态；

查看demo:js+css折叠伸缩菜单

 右上方更多相关内容/站内搜索-关键词请用空格隔开