适应产品类网站点击向两侧展开的菜单


适应产品类网站点击向两侧展开的菜单，注意，用了节省加载，去掉了大部分菜单项，这里的“品牌手机”是作为一级分类的，点击后出现对应的品牌，如果你有另外的比如“笔记本”大分类，你可以复制上边的代码，注意onclick="menuclick(submenu6,bar6)" id=bar6这一句要做相应修改，不能和已有菜单重名。

答案：<html>
<head>
<title>向两侧展开的菜单</title>
<script type="text/javascript"> 
var old_menu=''; 
var old_cell=''; 
function menuclick(submenu,cellbar){ 
if(old_menu!=submenu){
 if(old_menu!=''){
 old_menu.style.display='none';
 old_cell.src='';}
 submenu.style.display='block';
 cellbar.src='';
 old_menu=submenu;
 old_cell=cellbar;}
else{submenu.style.display='none';
 cellbar.src='';
 old_menu='';
 old_cell='';}}
</SCRIPT>
</head>
<body>
<table cellpadding=0 width="90%"  border=0 cellspacing="0">
<tr><td height="26" align="center" style="cursor:hand;" onclick="menuclick(submenu6,bar6)" id=bar6><span style="cursor:hand; font-weight:bold">品牌手机</B></td></tr>
<tr><td colspan="3" height="2"></td></tr>
<tr id="submenu6" style="DISPLAY: none;">
<td>
<table cellspacing=0 cellpadding=0 width="100%"  border=0><tr><td align="right" width="45%"><a class="nsort" href="#">诺基亚</a></td><td width="10%" align="center" height="23">|</td><td width="45%"><a class="nsort" href="#">索爱</a></td></tr><tr><td colspan="3" height="2"></td></tr><tr><td align="right" width="45%"><a class="nsort" href="#">三星</a></td><td width="10%" align="center" height="23">|</td><td width="45%"><a class="nsort" href="#">摩托罗拉</a></td></tr><tr><td colspan="3" height="2"></td></tr></table>
</td>
</tr>
</table>
</body>
</html>

上一个：带缺口的CSS导航栏
下一个：JS+CSS多个滑动门重复调用封闭类

更多图片编程知识: