首页>>导航菜单>>水平展开菜单,侧拉菜单(2013-09-18)

水平展开菜单,侧拉菜单

 js菜单

水平展开菜单,侧拉菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

XML/HTML Code
  1. <ul id="nav">   
  2.   <li><a href="http://www.freejs.net">首页</a></li>   
  3.   <li><a href="http://www.freejs.net">web代码演示</a>   
  4.     <ul>   
  5.             <li><a href="http://www.freejs.net/daohangcaidan.html" title="各种下拉菜单,导航,多级菜单,右侧展开,左侧展开">导航菜单</a></li>  
  6.            <li><a href="http://www.freejs.net/tabbiaoqian.html" title="tab标签,选项卡，选卡">TAB标签</a></li>  
  7.            <li><a href="http://www.freejs.net/jiaodiantu.html" title="焦点图,相册,幻灯片">焦点图</a></li>  
  8.            <li><a href="http://www.freejs.net/fenye.html" title="翻页,分页  
  9. 本站演示中的分页数据库结构都一样的">分页</a></li>  
  10.            <li><a href="http://www.freejs.net/biaodan.html" title="表单">表单</a></li>  
  11.            <li><a href="http://www.freejs.net/jquerytupiantexiao.html" title="Jquery图片特效">Jquery图片</a></li>  
  12.            <li><a href="http://www.freejs.net/jquerywenzi.html" title="jquery文字特效,js文字特效">Jquery文字</a></li>  
  13.   
  14.     </ul>   
  15.   </li>   
  16.   <li><a href="#">服务</a>   
  17.     <ul>   
  18.       <li><a href="#">Web Design</a></li>   
  19.       <li><a href="#">Internet Marketing</a></li>   
  20.       <li><a href="#">Hosting</a></li>   
  21.       <li><a href="#">Domain Names</a></li>   
  22.       <li><a href="#">Broadband</a></li>   
  23.     </ul>   
  24.   </li>   
  25. </ul>   

css文件

CSS Code
  1. body {  
  2.     font: normal 11px verdana;  
  3.     }  
  4.   
  5. ul {  
  6.     margin: 0;  
  7.     padding: 0;  
  8.     list-style: none;  
  9.     width: 150px; /* Width of Menu Items */  
  10.     border-bottom: 1px solid #ccc;  
  11.     }  
  12.       
  13. ul li {  
  14.     position: relative;  
  15.     }  
  16.       
  17. li ul {  
  18.     position: absolute;  
  19.     left: 149px; /* Set 1px less than menu width */  
  20.     top: 0;  
  21.     display: none;  
  22.     }  
  23.   
  24. /* Styles for Menu Items */  
  25. ul li a {  
  26.     display: block;  
  27.     text-decoration: none;  
  28.     color: #777;  
  29.     background: #fff; /* IE6 Bug */  
  30.     padding: 5px;  
  31.     border: 1px solid #ccc; /* IE6 Bug */  
  32.     border-bottom: 0;  
  33.     }  
  34.       
  35. /* Holly Hack. IE Requirement */  
  36. * html ul li { float: left; height: 1%; }  
  37. * html ul li a { height: 1%; }  
  38. /* End */  
  39.   
  40. li:hover ul, li.over ul { display: block; } /* The magic */  

 JS文件

JavaScript Code
  1. // JavaScript Document  
  2.   
  3. startList = function() {  
  4. if (document.all&&document.getElementById) {  
  5. navRoot = document.getElementById("nav");  
  6. for (i=0; i<navRoot.childNodes.length; i++) {  
  7. node = navRoot.childNodes[i];  
  8. if (node.nodeName=="LI") {  
  9. node.onmouseover=function() {  
  10. this.className+=" over";  
  11.   }  
  12.   node.onmouseout=function() {  
  13.   this.className=this.className.replace(" over", "");  
  14.    }  
  15.    }  
  16.   }  
  17.  }  
  18. }  
  19. window.onload=startList;  

 


原文地址:http://www.freejs.net/article_daohangcaidan_36.html