jquery纵向下拉菜单

<%@ page language="c#" autoeventwireup="true" codefile="thirdmenu.asp教程x.cs" inherits="thirdmenu" %>

   
css教程" href="css/menu.css" rel="stylesheet" />   
   



   

   

       

           
• 菜单项1
                 
  
                     
  • 子菜单项1
  
                     
  • 子菜单项2
  
                     
  • 子菜单项3
  
                     
  • 子菜单项4
                     
                 

           
• 菜单项2
                 
  
                     
  • 子菜单项1
  
                     
  • 子菜单项2
  
                     
  • 子菜单项3
  
                     
  • 子菜单项4
  
                 

           
• 菜单项3
                 
  
                     
  • 子菜单项1
  
                     
  • 子菜单项2
  
                     
  • 子菜单项3
  
                     
  • 子菜单项4
  
                 

       

       
       

       

       

       

           
• 菜单项1
                 
  
                     
  • 子菜单项1
  
                     
  • 子菜单项2
  
                     
  • 子菜单项3
  
                     
  • 子菜单项4
  
                 

           
• 菜单项2
                 
  
                     
  • 子菜单项1
  
                     
  • 子菜单项2
  
                     
  • 子菜单项3
  
                     
  • 子菜单项4
  
                 

           
• 菜单项3
                 
  
                     
  • 子菜单项1
  
                     
  • 子菜单项2
  
                     
  • 子菜单项3
  
                     
  • 子菜单项4
  
                 

       

   

   

 

css:==============================================================================

body {
}
ul,li
{
 /*去掉圆点*/
 list-style:none;
 }
ul
{
 padding:0px;/*ie6，ie7不能消灭缩进*/
 margin:0px;/*ie6，ie7就可以缩进了*/
 }
.main,.hmain
{
 background-image:url('../images/1.jpg');
 background-repeat:repeat-x;
 
 }
li
{
 background-color:#eee033;
 
 }
.main a,.hmain a
{
 color:white;
 background-image:url('../images/3.jpg');/*一定记住images前加/，这点出问题了，苦恼了好久*/
 background-repeat:no-repeat;
 }
.main ul li a,.hmain ul li a
{
 color:red;
 background-image:none;
 }
a
{
 padding-left:20px;
 text-decoration:none;
 display:block;/*充满整个区域*/
 display:inline-block;/*针对ie6*/
 
 }
.main ul,.hmain ul
{
 display:none;
 }
 
/*横向菜单*/
.hmain
{
 float:left;
 margin-right:1px;
 } 
.sec_nav{ border:0px solid #ccc;  background:#3cf;display:none;}

 

javascript:=================================================================

$(document).ready(function(){
    $(".main > a").click(function(){
        var allul=$(".main");
        var ulnode=$(this).next("ul");
        /*第一种方法
        if(ulnode.css("display")=="none")
        {
            ulnode.css("display","block");
        }
        else
        {
            ulnode.css("display","none");
        }*/
       
        /*第二种方法
        if(ulnode.css("display")=="none")
        {
            ulnode.show("slow");//参数用文字："slow"-慢，normal-一般，fast-快
        }
        else
        {
            ulnode.hide(500);
        }*/
       
        //第三种方法
        //ulnode.toggle(500);//只需要这一句话就可以了
       
        //**********************************************卷帘效果
        /*第四种方法
        if(ulnode.css("display")=="none")
        {
            ulnode.slidedown(500);//参数用文字："slow"-慢，normal-一般，fast-快
        }
        else
        {
            ulnode.slideup(500);//参数用文字："slow"-慢，normal-一般，fast-快
        }*/
       
        //第五种方法
        ulnode.slidetoggle(500);//参数用文字："slow"-慢，normal-一般，fast-快
        changeicon(ulnode);

    });
   
    /*这又是一种写法
//    $(".hmain>a").hover(function(){
//        $(this).next("ul").slidedown();
//    },function(){
//        var ulnode=$(this).next("ul");
//        var timeoutid=settimeout(function(){
//            ulnode.slideup();
//        },300);
//       
//        ulnode.hover(function(){
//            cleartimeout(timeoutid);
//        },function(){
//            $(this).slideup();
//        });
//    });*/
   
    $(".hmain").hover(function(){
        var ulobj=$(this).children("ul");
        $(".sec_nav").stop(false,true);//解决当鼠标很快的划过菜单的时候下拉框会不停的上下收缩
        ulobj.slidedown("slow");
        changeicon($(this).children("a"));
    },function(){
        $(this).children("ul").slideup("slow");
        changeicon($(this).children("a"));
    });
});

function changeicon(mainnode)
{
    if(mainnode)
    {
        if(mainnode.css("background-image").indexof("3.jpg")>=0)
        {
            mainnode.css("background-image","url('images/2.jpg')");
        }
        else
        {
            mainnode.css("background-image","url('images/3.jpg')");
        }
    }
}