KISSY下拉菜单

最近在学习淘宝框架KISSY 恩 还在学习中 很早以前 看到某个网站一个下拉菜单的效果 其中的javascript是用遍历的效果实现的 看起来javascript代码并不是怎么样 没有封装性 代码不优雅 也趁着最近在学习KISSY 所以今天用了KISSY写了一个。

 

  
  
  
  
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
  2. <html> 
  3.  <head> 
  4.   <title> New Document </title> 
  5.   <meta name="Generator" content="EditPlus"> 
  6.   <meta name="Author" content=""> 
  7.   <meta name="Keywords" content=""> 
  8.   <meta name="Description" content=""> 
  9.   <base target="_blank"/> 
  10.   <style> 
  11.   body,ul,li,div{margin:0;padding:0;}  
  12.   ul,li{list-style:none;}  
  13.   .wrap{width:294px;margin:50px auto 0;overflow:hidden;}  
  14.   .nav{width:97px;float:left;line-height:22px;overflow:hidden;text-align:center;background:#ccc;margin-left:1px;display:inline;}  
  15.   .nav a{font-size:14px;}  
  16.  .menu{width:98px;overflow:hidden;display:none;background:green;}  
  17.  .menu li{line-height:22px;width:98px;}  
  18.   .menu li a{color:#fff;}  
  19.  .show{display:block;}  
  20.   </style> 
  21.   <script src="http://a.tbcdn.cn/??s/kissy/1.2.0/kissy-min.js"></script> 
  22.  </head> 
  23.  <body> 
  24.     <div class="wrap"> 
  25.         <ul> 
  26.             <li class="nav"> 
  27.                 <a href="#">菜单一</a> 
  28.                 <ul class="menu"> 
  29.                     <li><a href="#">菜单一</a></li> 
  30.                     <li><a href="#">菜单二</a></li> 
  31.                     <li><a href="#">菜单三</a></li> 
  32.                     <li><a href="#">菜单四</a></li> 
  33.                 </ul>     
  34.             </li> 
  35.             <li class="nav"> 
  36.                 <a href="#">菜单二</a> 
  37.                 <ul class="menu"> 
  38.                     <li><a href="#">菜单一</a></li> 
  39.                     <li><a href="#">菜单二</a></li> 
  40.                     <li><a href="#">菜单三</a></li> 
  41.                     <li><a href="#">菜单四</a></li> 
  42.                 </ul> 
  43.             </li> 
  44.             <li class="nav"> 
  45.                 <a href="#">菜单三</a> 
  46.                 <ul class="menu"> 
  47.                     <li><a href="#">菜单一</a></li> 
  48.                     <li><a href="#">菜单二</a></li> 
  49.                     <li><a href="#">菜单三</a></li> 
  50.                     <li><a href="#">菜单四</a></li> 
  51.                 </ul> 
  52.             </li> 
  53.         </ul> 
  54.     </div> 
  55. <script> 
  56.     var DOM = KISSY.DOM,Event = KISSY.Event;  
  57.     var menu = DOM.query(".menu"),nav = DOM.query(".nav");  
  58.         for(var j=0;j<nav.length;j++){  
  59.             (function(j){  
  60.                 Event.on(nav[j],'mouseenter',function(){  
  61.                     for(var i=0;i<menu.length;i++){  
  62.                         DOM.removeClass(menu[i],'show')  
  63.                     }  
  64.                         DOM.addClass(menu[j],'show');  
  65.                 })  
  66.                 Event.on(nav[j],'mouseleave',function(){  
  67.                     for(var i=0;i<menu.length;i++){  
  68.                         DOM.removeClass(menu[i],'show')  
  69.                     }  
  70.                 })  
  71.             })(j)  
  72.  
  73.         }  
  74. </script> 
  75.  </body> 
  76. </html> 

 

你可能感兴趣的:(职场,kissy,休闲,KISSY下拉菜单)