JS下拉菜单

稿源：互联网 2022-04-09 07:14:48 点击： 60726 撤稿纠错

用js做的下拉菜单效果，很实用，后台管理普遍用到，完全支持自定义。

以下讨论的是和js 下拉菜单相关的JS下拉菜单教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br><html xmlns="http://www.w3.org/1999/xhtml"><br><head><br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br><script type="text/javascript"></script><br><title>left</title><br><style type="text/css"><br>body {font-family:Arial, Helvetica, sans-serif;font-size:12px;width:166px;margin:0 auto;}<br>ul,h5{margin:0;padding:0;list-style:none;}<br>#levelmenu{margin:8px 0 0 8px;}<br>#levelmenu div.unit ul{width:127px;border:solid 1px #1A5189;border-top:none;padding:8px 0 8px 20px;}<br>#levelmenu h5{width:149px;height:25px;line-height:26px;overflow:hidden;background:#515E7B url(http://2.bp.blogspot.com/_bdBPvgEipxw/SSO2rZ3z94I/AAAAAAAAAQE/WH2dc6R8TzQ/s320/menubg.gif) left top no-repeat;text-indent:30px;font-weight:normal;color:#fff;margin:0;font-size:100%;cursor:default;}<br>#levelmenu div.unit ul{display:none;line-height:23px;}<br> #levelmenu div.current ul{display:block;}<br>  #levelmenu div.current ul li a{color:#3B475F;text-decoration:none;}<br>   #levelmenu div.current ul li a:hover{text-decoration:underline;}<br> #levelmenu div.current h5{background-position:left bottom;}<br></style><br></head><br><body><br><div id="levelmenu"><br> <div class="unit current"><br>  <h5>新闻管理</h5><br>  <ul><br>   <li><a href="#">新闻管理</a></li><br>   <li><a href="#">新闻管理</a></li><br>   <li><a href="#">新闻管理</a></li><br>   <li><a href="#">新闻管理</a></li><br>  </ul><br> </div><br> <div class="unit"><br>  <h5>新闻管理</h5><br>  <ul><br>   <li><a href="#">新闻管理</a></li><br>   <li><a href="#">新闻管理</a></li><br>   <li><a href="#">新闻管理</a></li><br>   <li><a href="#">新闻管理</a></li><br>  </ul><br> </div><br> <div class="unit"><br>  <h5>新闻管理</h5><br>  <ul><br>   <li><a href="#">新闻管理</a></li><br>   <li><a href="#">新闻管理</a></li><br>   <li><a href="#">新闻管理</a></li><br>   <li><a href="#">新闻管理</a></li><br>  </ul><br> </div><br> <div class="unit"><br>  <h5>新闻管理</h5><br>  <ul><br>   <li><a href="#">新闻管理</a></li><br>   <li><a href="#">新闻管理</a></li><br>   <li><a href="#">新闻管理</a></li><br>   <li><a href="#">新闻管理</a></li><br>  </ul><br> </div><br></div><br></body><br></html><br><script type="text/javascript"><br>function init(){<br> if(!document.getElementById || !document.getElementsByTagName){retun;}<br> var arrayDiv=document.getElementById("levelmenu");<br> if(!arrayDiv){return;}<br> var divObj=arrayDiv.getElementsByTagName("div");<br> var length=divObj.length;<br> var agreeDiv=new Array();<br> for(var i=0;i<length;i++){<br>  if(divObj[i].className.indexOf("unit")>=0){<br>   agreeDiv.push(divObj[i]);<br>   divObj[i].onclick=function(event){<br>    showCurrentMenu(agreeDiv,this,event);<br>   }<br>  }<br> }<br>}<br>function showCurrentMenu(agreeDiv,currentObj,event){<br> if(!event){event=window.event;}<br> var eventObj=event.srcElement?event.srcElement:event.target;<br> //先隐藏所有ul<br> var length=agreeDiv.length;<br> for(var i=0;i<length;i++){<br>  if(eventObj.parentNode==agreeDiv[i] || eventObj.nodeName!="H5"){continue;}<br>  agreeDiv[i].className="unit";<br> }<br> if(eventObj.nodeName=="H5"){<br>  if(eventObj.parentNode.className=="unit"){<br>   eventObj.parentNode.className="unit current"<br>  }else{<br>   eventObj.parentNode.className="unit"<br>  }<br> }<br>}<br>init();<br></script></font><br><a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

关于JS下拉菜单的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/20081119372.shtml方便下次再访问哦。

·上一篇： 层的打开与关闭动画效果
·下一篇： js仿LightBox内容显示效果

JS下拉菜单

文章分类LIST >>返回首页

最新游戏

最新新闻