jq横向纵向菜单

今天，我们将王兴魁老师JQuery 实战第三讲：菜单 这部分内容通过文字的形式体现出来，建议大家边看这段视频，边进行实践，理解这部分知识是完全轻松愉快的事情。下面我们首先将最终的效果展现出来，按照这个效果，我们一步一步去完善。

纵向菜单

横向菜单（通过鼠标移动来实现菜单隐藏/显示）

首先，我们通过html文件来实现大致效果，建立menu.htm文件。在html中添加如下代码：

 

代码

< body >
    < ul >
        < li class ="main" >
            < a href ="#" > 菜单1 </ a >
            < ul >
                < li >
                    < a href ="#" > 子菜单项11 </ a >
                </ li >
                < li >
                    < a href ="#" > 子菜单项12 </ a >
                </ li >
            </ ul >
        </ li >
        < li class ="main" >
            < a href ="#" > 菜单2 </ a >
            < ul >
                < li >
                    < a href ="#" > 子菜单项21 </ a >
                </ li >
                < li >
                    < a href ="#" > 子菜单项22 </ a >
                </ li >
            </ ul >
        </ li >
        < li class ="main" >
            < a href ="#" > 菜单3 </ a >
            < ul >
                < li >
                    < a href ="#" > 子菜单项31 </ a >
                </ li >
                < li >
                    < a href ="#" > 子菜单项32 </ a >
                </ li >
            </ ul >
        </ li >
    </ ul >
    < br >
    < br >
    < br >
    < br >
     < ul >
        < li class ="hmain" >
            < a href ="#" > 菜单1 </ a >
            < ul >
                < li >
                    < a href ="#" > 子菜单项11 </ a >
                </ li >
                < li >
                    < a href ="#" > 子菜单项12 </ a >
                </ li >
            </ ul >
        </ li >
        < li class ="hmain" >
            < a href ="#" > 菜单2 </ a >
            < ul >
                < li >
                    < a href ="#" > 子菜单项21 </ a >
                </ li >
                < li >
                   < a href ="#" > 子菜单项22 </ a >
                </ li >
            </ ul >
        </ li >
        < li class ="hmain" >
            < a href ="#" > 菜单3 </ a >
            < ul >
                < li >
                    < a href ="#" > 子菜单项31 </ a >
                </ li >
                < li >
                    < a href ="#" > 子菜单项32 </ a >
               </ li >
            </ ul >
        </ li >
    </ ul >
</ body >

运行后效果如下图：

这照我们最终要实现的效果还有一定的距离，接下来建立menu.css文件。来通过css美化这个菜单样式。

通过上述css，完全可以实现我们所要的效果，各部分css功能请参考注释。接下来我们将为菜单来添加JQuery相关的事件。建立文件menu.js。

在html中引入css文件：

< link rel ="stylesheet" href ="Css/menu.css" type ="text/css" />

通过上述css，完全可以实现我们所要的效果，各部分css功能请参考注释。接下来我们将为菜单来添加JQuery相关的事件。建立文件menu.js。

代码

$(document).ready( function (){
    // 页面中的DOM已装载完成时，执行的代码
// css中除了IE6都支持>这种写法，下面的意思是
// 找到main下面的子节点里面的a，直到他的子节点
// $(".main > a,.hmain a").click(function(){
     $( " .main > a " ).click( function (){
        // 找到主菜单项所对应的子菜单项
// 这里的this指的是当前main主菜单所对应的节点下找到ul子节点
var ulNode = $( this ).next( " ul " );
        /* 1、基本写法
        if(ulNode.css("display")=="none")
        {
            ulNode.css("display","block");
        }
        else
        {
            ulNode.css("display","none");
        }
        */
        // 2、利用函数写法
// show()参数可以用数字单位是毫秒
// slow、fast、normal
// ulNode.show("fast");
// ulNode.hidden();
// 3、省去自已写if繁琐的检测代码，它会去判断，    
// 如果当前元素是显示的，那么点击后会隐藏，
// 否则相反。参数与show相同
// ulNode.toggle();
// 4、卷帘显示方式，
// ulNode.slideDown();
// ulNode.slideUp();
// 与Toggle相同，无需做判断
        ulNode.slideToggle();
        changeIcon($( this ));
    });
    // 鼠标移进/移出显示/隐藏
    $( " .hmain " ).hover( function (){
        $( this ).children( " ul " ).slideDown();
        changeIcon($( this ).children( " a " ));
    }, function (){
        $( this ).children( " ul " ).slideUp();
        changeIcon($( this ).children( " a " ));
    });
});
/* 修改主菜单的指示图标 */
function changeIcon(mainNode)
{
    if (mainNode)
    {
        if (mainNode.css( " background-image " ).indexOf( " plus.bmp " ) >= 0 )
        {
            mainNode.css( " background-image " , " url('Images/minus.bmp') " );
        }
        else
        {
             mainNode.css( " background-image " , " url('Images/plus.bmp') " );
        }
   }
}

在html中引入下列文个件：

代码

< script src ="JavaScript/jquery.js" type ="text/javascript" ></ script >
    < script src ="JavaScript/jquery-1.3.2.min.js" type ="text/javascript" ></ script >
    < script src ="JavaScript/menu.js" type ="text/javascript" ></ script >

这样一个完整的菜单就实现了，我们可以分别在Firefox，IE6，IE7，IE8 等浏览器中进行测试，均无错误。

下面我们就将本节的知识点及注意的事项总结下：

1、页面中的菜单项可以通过嵌套的ul和li来表示

2、菜单最外层为ul，一层第个主菜单放在一个li中，如果

有子菜单，在这个主菜单的li中建立新的ul，再依次嵌套取可构建多层的菜单。

3、浏览器中ul和li元素默认情痀下文字前都有圆点标识符，li元素会有缩进。Opera浏览器比较特殊，li的标识符和其他浏览器不同。

4、list-style属性值为none时，可以清除ul和li前面的小圆点

5、清除子菜单的缩进值，需要padding和margin都为0，其中IE6和IE7只有margin也为0的时候才可以清除缩进值

6、可以使用background-image来指定一个元素的背景图，如果背景图比元素的实际大小要小，那么背景图会自动在横向和纵向上重复显示，直到填满整个区域

7、可以使用background-repeat来控制背景图的重复填充方式。

8、如果一个元素上同时定义了背景图和背景色，那么有背景图的地方是不会显示背景色的

9、text-decoration属性值为none时，可以取消文字上的下划线

10、background-position可以控制背景力的位置，属性值既可以用数值，也可以用center，left，top这些值来控制横向和纵向的位置。这个属性的两个值，第一个对应横向，第二

个对应纵向

11、background-image的值为none表示没有背景图

12、background-repeat的值为no-repeat时，背景图不会在所在的区域中重复显示

13、IE6以外的其他浏览器可以通过设定display的值为block来让a元素充满所在的区域。对于IE6，则坱要设定display为inline-block，同时设定a的宽度。其他浏览器是不识别inline-block的

14、display的值为none可以隐藏元素。

15、.main a和.main >a 的不同之处，前者选 择使用了.main的这个class的元素内部所有的a节点，后者只选择了.main的子节点中的a的节点

16、.show,hide方法可以用于显示或隐藏元素，没有参数时的效果和修改css的display属性效果一样。参数可以是单位为毫秒的数字，或者是slow，normal，fast这三个文字，都

可以来控制完成显示或隐藏需要的时间。注意：；时动画效果是靠不断改变元素的宽度和高度来实现的。

17、.toggle方法更为强大，可以省去我们判断元素是显示还是隐藏的状态，直接让显示的元素隐藏起来，隐藏的元素显示出来。参数使用主法和show，hide相同。

18、slideDown，slideUp可以实现向下或向上卷动的效果，实际上是通过指定时间内修改元素的高度来实现动画效果。需要注意的是这两个方法参数为空的情况和show，hide不同。

19、.sideToggle和toggle达到的效果类似。

10、DOCTYPE对于JQuery中的动画是有影响的。没有DOCTYPE定义时，在IE中JQuery的动画会出现闪烁的糟糕效果。

21、float的值是left，可以使原本各自位于一行的元素全部在一行中向左浮动。

22、可以给多个选择器定义同样的样式，选择器之间用逗号分割。同样对于JQuery的$方法，也可以传入这个选择器

        这样一个绚丽的菜单就完成了，你也可以在此基础上进行扩展，加上一些你所需要的东西，加深对JQuery的理解。

作者：mzoy(三木)
出处：http://www.cnblogs.com/mzoylee
本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

代码

ul,li {
    /* 清除ul、li上的小圆点 */
    list-style : none ;
}
ul {
/* 清除子菜单中的缩进值 */
    padding : 0 ;
    /* IE6IE7中清除缩进值 */
    margin : 0 ;
}
.main,.hmain {
/* 背景图片 */
   background-image : url(../Images/sb_bg.gif) ;
   background-repeat : repeat-x ;
   width : 120px ;
}
li {
/* 菜单背景色 */
   background-color : #EEEEEE ;
}
/* 取消所有a标签下划线样式 */
a {
   text-decoration : none ;
   /* 左缩进 */
   padding-left : 20px ;
   /* css中的块级元素充满整个区域 */
   display : block ;
   /* IE6IE7中应用上面元素时样式会有所改变，这也是因为
   IE6IE7不符合标准的问题，因此采用inline-block来解决
   在其它标准浏览器中不会执行inline-block，同时为实现
   与标准浏览器相同效果，还需要设置宽度 */
   display : inline-block ;
   width : 110px ;
  /* 将所有a标签都加上3px个padding */
   padding-top : 3px ;
   padding-bottom : 3px ;
}
/* main 下的所有a的标签颜色 */
.main a,.hmain a {
    color : white ;
    /* 背景图小图标 */
    background-image : url(../Images/plus.bmp) ;
    background-repeat : no-repeat ;
    background-position : 3px center ;
}
/* main下的所有li下的a标签样式 */
.main li a,.hmain li a {
    color : black ;
    background-image : none ;
}
/* 让所有的子菜单项默认都隐藏 */
.main ul,.hmain ul {
    display : none ;
}
/* float浮动布局方式，横向显示 */
.hmain {
    float : left ;
    margin-left : 1px ;
}

 

•  

•