一个qq菜单效果

　　这么一个简单的效果就花了偶两个多小时，失败。。。看来还是写的太少，眼高手低！！以后还要多动手写，不能只知道实现方法就pass了废话少说，代码如下(这个可是结构，样式，行为相分离哦)：

<!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>  
<title> new document </title>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<meta name="generator" content="editplus" />  
<meta name="author" content="" />  
<meta name="keywords" content="" />  
<meta name="description" content="" />  
<style type="text/css">  
*{margin:0px;padding:0px;}  
#menu{  
font-size:12px;  
list-style-type:none;  
width:100px;text-align:center;  
}  
#m1,#m2,#m3,#m4{  
border:1px solid #666;  
height:20px;line-height:20px;  
background:#ccc;width:98px;  
}  
#m1_sub,#m2_sub,#m3_sub,#m4_sub{  
display:inline-block;  
}  
ul#menu li ul li{  
border:1px solid #999;  
height:20px;line-height:20px;  
background:#efefef;list-style-type:none;  
}  
</style>  
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%20%0D%0Afunction%20toggleMenu()%7B%20%20%0D%0Avar%20aTitle%3Dnew%20Array()%3B%20%20%0D%0Aif(arguments.length%3D%3D0)%20return%20false%3B%20%20%0D%0A%0D%0A%2F%2F%E8%8E%B7%E5%8F%96%E5%AF%B9%E8%B1%A1%20%20%0D%0Avar%20%24%3Dfunction(id)%7B%20%20%0D%0Areturn%20document.getElementById%3Fdocument.getElementById(id)%3Adocument.all%5Bid%5D%3B%20%20%0D%0A%7D%20%20%0D%0A%0D%0A%2F%2F%E5%B0%86%E8%8E%B7%E5%8F%96%E5%8F%82%E6%95%B0%E8%BD%AC%E6%8D%A2%E4%B8%BA%E6%95%B0%E7%BB%84%20%20%0D%0Afor(var%20i%3D0%3Bi%3Carguments.length%3Bi%2B%2B)%7B%20%20%0D%0AaTitle%5BaTitle.length%5D%3Darguments%5Bi%5D%3B%20%20%0D%0A%7D%20%20%0D%0A%0D%0Afor(var%20i%3D0%3Bi%3CaTitle.length%3Bi%2B%2B)%7B%20%20%0D%0A%24(aTitle%5Bi%5D%2B%22_sub%22).style.display%3D%22none%22%3B%2F%2F%E5%88%9D%E5%A7%8B%E5%8C%96%E4%B8%BA%E6%89%80%E6%9C%89%E8%8F%9C%E5%8D%95%E9%9A%90%E8%97%8F%20%20%0D%0A%2F%2F%E6%B7%BB%E5%8A%A0%E4%BA%8B%E4%BB%B6%20%20%0D%0A%24(aTitle%5Bi%5D).onclick%3Dfunction()%7B%20%20%0D%0AtoggleIt()%3B%2F%2F%E4%B8%BB%E5%A4%84%E7%90%86%E5%87%BD%E6%95%B0%20%20%0D%0A%7D%20%20%0D%0A%7D%20%20%0D%0A%0D%0Avar%20toggleIt%3Dfunction()%7B%20%20%0D%0Avar%20evt%3Dwindow.event%7C%7CtoggleIt.caller.arguments%5B0%5D%3B%20%20%0D%0Avar%20evtElm%3Devt.srcElement%7C%7Cevt.target%3B%20%20%0D%0Afor(var%20i%3D0%3Bi%3CaTitle.length%3Bi%2B%2B)%7B%20%20%0D%0Aif(evtElm%26%26evtElm.id!%3DaTitle%5Bi%5D)%7B%20%20%0D%0A%24(aTitle%5Bi%5D%2B%22_sub%22).style.display%3D%22none%22%3B%20%20%0D%0A%7Delse%7B%2F%2F%E7%82%B9%E5%87%BB%E5%AF%B9%E8%B1%A1%E5%A6%82%E6%9E%9C%E5%B0%B1%E6%98%AF%E5%BD%93%E5%89%8D%E9%81%8D%E5%8E%86%E5%AF%B9%E8%B1%A1%20%20%0D%0A%24(aTitle%5Bi%5D%2B%22_sub%22).style.display%3D(%24(aTitle%5Bi%5D%2B%22_sub%22).style.display%3D%3D%22none%22%3F%22%22%3A%22none%22)%3B%20%20%0D%0A%7D%20%20%0D%0A%7D%20%20%0D%0A%7D%20%20%0D%0A%7D%20%20%0D%0A%0D%0Awindow.onload%3Dfunction()%7B%20%20%0D%0A%2F%2F%E8%B0%83%E7%94%A8%E6%96%B9%E6%B3%95%EF%BC%8C%E5%9C%A8%E5%8F%82%E6%95%B0%E4%B8%AD%E9%80%90%E4%B8%AA%E5%8A%A0%E5%85%A5%E4%B8%BB%E6%A0%87%E9%A2%98id%EF%BC%8C%E6%B3%A8%E6%84%8F%EF%BC%8C%E5%AF%B9%E5%BA%94%E5%86%85%E5%AE%B9%E5%BF%85%E9%A1%BB%E4%B8%BA%22%E4%B8%BB%E6%A0%87%E9%A2%98id%2B%22_sub%22%22%20%20%0D%0AtoggleMenu(%22m1%22%2C%22m2%22%2C%22m3%22%2C%22m4%22)%3B%20%20%0D%0A%7D%20%20%0D%0A%3C%2Fscript%3E">  
</head>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程