Javascript-网页编程-DHTML-下拉菜单

最新推荐文章于 2017-09-01 00:15:48 发布

夏小弥

最新推荐文章于 2017-09-01 00:15:48 发布

阅读量459

点赞数

分类专栏： html网页编程文章标签： javascript dhtml 下拉菜单 html

本文链接：https://blog.csdn.net/x121850182/article/details/51919432

版权

html网页编程专栏收录该内容

15 篇文章 0 订阅

订阅专栏

列表菜单

1、实现功能：点击菜单，显示菜单下的内容，再次点击，隐藏内容(允许和不允许同时打开多个菜单项)

[java]view plaincopy 
   
 <html>  
   <head>  
     <title>DHTML技术演示---菜单列表1</title>  
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
      <style type="text/css">  
         /*老版本的IE支持，新版本不支持了 
         dl{ 
             height:18px; 
             overflow:hidden; 
         }*/  
           
         /* 
         ul{ 
             //display:none;//不显示 
             display:block;//块显示 
         } 
         */  
         table {  
             /*border:#ff80ff;*/  
             width:80px;  
         }  
           
         table ul{  
             list-style:none;  
             margin:0px;  
             padding:0px;  
             background-color:#ff8000;  
             display:none;  
         }  
         table td{  
             /*border:#0000ff 1px solid;*/  
             background:#80ff00;  
         }  
           
         table td a:link, table td a:visited{  
             color:#8080c0;  
             text-decoration:none;  
         }  
         table td a:hover{  
             color:#0000ff;;  
         }  
           
         .open{  
             display:block;  
         }  
         .close{  
             display:none;  
         }  
           
      </style>  
        
      <script type="text/javascript">  
         /*当前菜单的开关切换，当点开其他菜单时，此菜单不会关闭 
         function list(node){ 
             var oTdNode = node.parentNode; 
             //alert( oTdNode.nodeName);//TD 
             var oUlNode = oTdNode.getElementsByTagName("ul")[0]; 
             //alert( oUlNode.nodeName);//UL 
             if( oUlNode.className =="open"){ 
                 oUlNode.className ="close"; 
             }else{ 
                 oUlNode.className ="open"; 
             } 
         } 
         */  
         //实现当前菜单开关切换的同时，把其它菜单全部关闭，即只能打开一个菜单  
         function list(node){  
             var oTdNode = node.parentNode;  
             var oUlNode = oTdNode.getElementsByTagName("ul")[0];  
             //获取菜单表格(tableMenu)对象 下的所有 菜单块(Ul)对象  
             var oTableNode = document.getElementById("tableMenu");  
             var arrUlNodes = oTableNode.getElementsByTagName("ul");  
             //遍历所有菜单块(Ul)对象，分别对它进行开关显示设置              
             for(var x=0; x<arrUlNodes.length; x++){  
                 if(arrUlNodes[x]==oUlNode && oUlNode.className!="open"){  
                     oUlNode.className ="open";//等价于：arrUlNodes[x].className ="open";  
                 }else{  
                     arrUlNodes[x].className="close";  
                 }  
             }  
         }  
        
      </script>  
   </head>  
     
   <body>  
     <table id="tableMenu">  
         <tr>  
             <td>  
                 <a href="javascript:void(0)" οnclick="list(this)">文件菜单</a>  
                 <ul>  
                     <li>菜单项一</li>  
                     <li>菜单项二</li>  
                     <li>菜单项三</li>  
                     <li>菜单项四</li>  
                 </ul>  
             </td>  
         </tr>  
         <tr>  
             <td>  
                 <a href="javascript:void(0)" οnclick="list(this)">编辑菜单</a>  
                 <ul>  
                     <li>菜单项一</li>  
                     <li>菜单项二</li>  
                     <li>菜单项三</li>  
                     <li>菜单项四</li>  
                 </ul>  
             </td>  
         </tr>  
         <tr>  
             <td>  
                 <a href="javascript:void(0)" οnclick="list(this)">调试菜单</a>  
                 <ul>  
                     <li>菜单项一</li>  
                     <li>菜单项二</li>  
                     <li>菜单项三</li>  
                     <li>菜单项四</li>  
                 </ul>  
             </td>  
         </tr>  
     </table>  
       
   </body>  
     
 </html>  

2、实现功能：鼠标放在菜单条上时，显示菜单块，离开菜单条和菜单块时，隐藏菜单块，且鼠标放的行有颜色变化

[java]view plaincopy 
   
 <html>  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
 <title>列表菜单</title>  
 <style type="text/css">  
     #newsid ul{  
         list-style:none;  
     }  
     #newslist li{  
         float:left;  
         width:180px;  
     }  
     #newslist li ul{  
         margin:0px;  
         padding:0px;  
     }  
     #newslist li ul li{  
         line-height:25px;  
     }  
     #newslist li a{  
         display:block;  
         color:#ffffff;  
         background-color:#0066cc;  
         text-decoration:none;  
         line-height:25px;  
         text-align:center;  
     }  
     #newslist li a:hover{  
         color:#0066cc;  
         background-color:#999999;  
     }  
     #newslist li ul a{  
         color:#000000;  
         background-color:#0099ff;  
     }  
     #newslist li ul li a:hover{  
         color:#0066ff;  
         background-color:#999999;  
     }  
     #newslist li ul{  
         display:none;  
     }  
 </style>  
 <script type="text/javascript">  
     function list(liNode){  
         var ulNode = liNode.getElementsByTagName("ul")[0];  
         with(ulNode.style){  
             display = display=="block"?"none":"block";  
         }  
     }  
 </script>  
 </head>  
 <body background="bg-img.jpg">  
 <!--  制作一个下拉菜单：1)封装数据 2)定义基本样式    -->  
 <div id="newsid">  
     <ul id="newslist">  
         <li οnmοuseοver="list(this)"; οnmοuseοut="list(this)" >  
             <a href="javascript:void(0)">城院新闻</a>  
             <ul style="display:none;">  
                 <li><a href="http://www.hncu.net/">校园新闻内容摘要</a></li>  
                 <li><a href="http://www.hncu.net/">校园新闻内容摘要</a></li>  
                 <li><a href="http://www.hncu.net/">校园新闻内容摘要</a></li>  
                 <li><a href="http://www.hncu.net/">校园新闻内容摘要</a></li>  
             </ul>  
         </li>  
         <li οnmοuseοver="list(this)"; οnmοuseοut="list(this)" >  
             <a href="javascript:void(0)">大学新闻</a>  
             <ul style="display:none;">  
                 <li><a href="http://www.hncu.net/">大学新闻内容摘要</a></li>  
                 <li><a href="http://www.hncu.net/">大学新闻内容摘要</a></li>  
                 <li><a href="http://www.hncu.net/">大学新闻内容摘要</a></li>  
                 <li><a href="http://www.hncu.net/">大学新闻内容摘要</a></li>  
             </ul>  
         </li>  
         <li οnmοuseοver="list(this)"; οnmοuseοut="list(this)" >  
             <a href="javascript:void(0)">社会新闻</a>  
             <ul style="display:none;">  
                 <li><a href="http://www.hncu.net/">社会新闻内容摘要</a></li>  
                 <li><a href="http://www.hncu.net/">社会新闻内容摘要</a></li>  
                 <li><a href="http://www.hncu.net/">社会新闻内容摘要</a></li>  
                 <li><a href="http://www.hncu.net/">社会新闻内容摘要</a></li>  
             </ul>  
         </li>  
         <li οnmοuseοver="list(this)"; οnmοuseοut="list(this)" >  
             <a href="javascript:void(0)">就业新闻</a>  
             <ul style="display:none;">  
                 <li><a href="http://www.hncu.net/">就业新闻内容摘要</a></li>  
                 <li><a href="http://www.hncu.net/">就业新闻内容摘要</a></li>  
                 <li><a href="http://www.hncu.net/">就业新闻内容摘要</a></li>  
                 <li><a href="http://www.hncu.net/">就业新闻内容摘要</a></li>  
             </ul>  
         </li>  
           
     </ul>  
       
 </div>  
   
 </body>  
 </html>  

夏小弥

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Javascript-网页编程-DHTML-下拉菜单

列表菜单1、实现功能：点击菜单，显示菜单下的内容，再次点击，隐藏内容(允许和不允许同时打开多个菜单项)[java] view plain copy DHTML技术演示---菜单列表1 "Content-Type" content="text/html; charset=utf-8" />
复制链接

扫一扫