jquery学习笔记之JQ下拉菜单

   
• 首页
     

   
• 
          链接
         
  
             
  • aaa
  
             
  • bbb
  
             
  • ccc
  
             
  • ddd
  
         
  
     

   
• 
          相册
         
  
             
  • 11
  
             
  • 22
  
             
  • 33
  
             
  • 44
  
         
  
     

   
• 
          博客
         
  
             
  • AA
  
             
  • BB
  
             
  • CC
  
             
  • DD
  
         
  
     

   
• 
          关于
     

//两个参数，一个导航ul标签的id，一个是下拉菜单的显示速度，越小越快
function zvMenu(ulElementId,speed){
    //JQ一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。
    $("#"+ulElementId).children("li:has(ul)").hover(
        function(){
            $(this).find("ul>li:last").addClass("li-last-s1");//给每个下拉菜单的最后一个li元素添加css样式，此处非必要
            $(this).children("ul").slideDown(speed);//JQ的slideDown方法，显示下拉菜单
        },
        function(){
            $(this).children("ul").hide();//隐藏下拉菜单
        }
    );
    //JQ动画，可选
    $("#"+ulElementId).find("li>ul>li>a").hover(
        function(){
            $(this).animate({paddingLeft:"30px"},speed);
        },
        function(){
            $(this).animate({paddingLeft:"20px"},speed);
        }
    );
 
}

#nav-categories{float:left;font-size:18px;height:50px;line-height:50px;}
#nav-categories li{float:left;padding:0 20px 0 20px;background:#444;position:relative;}
#nav-categories li ul{display:none;background:#444;color:#fff;position:absolute;left:0;top:50px;width:120px;border:1px solid #990;border-top:none;}
#nav-categories li a{color:#FFF;}
#nav-categories li a:hover{color:#9C0;}
#nav-categories li ul li{height:40px;line-height:30px;background:#444;width:116px;padding:0;margin:0;border:2px solid #9C0;border-top:none;border-bottom:none;}
#nav-categories li ul li.li-last-s1{border-bottom:2px solid #9C0;}
#nav-categories li ul li a{display:block;padding:5px 5px 5px 20px;zoom:1;}
#nav-categories li ul li a:hover{background:#575855;}