jQuery垂直菜单和水平菜单实现

简介:

1 创建VerticalAndhorizontalMenu.html文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
< html >
< head  lang = "en" >
     < meta  charset = "UTF-8" >
     < link  href = "VerticalAndhorizontalMenu.css"  rel = "stylesheet" >
     < script  src = "jquery-1.11.2.min.js"  type = "text/javascript" ></ script >
     < script  type = "text/javascript"  src = "VerticalAndhorizontalMenu.js" ></ script >
     < title >垂直或水平菜单</ title >
</ head >
< body >
<!--垂直菜单-->
< ul >
     < li  class = "vmain" >
         < a  href = "#" > 垂直菜单1</ a >
         < ul >
             < li >< a  href = "#" >子菜单1</ a > </ li >
             < li >< a  href = "#" >子菜单2</ a > </ li >
         </ ul >
     </ li >
     < li  class = "vmain" >
         < a  href = "#" > 垂直菜单2</ a >
         < ul >
             < li >< a  href = "#" >子菜单1</ a > </ li >
             < li >< a  href = "#" >子菜单2</ a > </ li >
         </ ul >
     </ li >
     < li  class = "vmain" >
         < a  href = "#" > 垂直菜单3</ a >
         < ul >
             < li >< a  href = "#" >子菜单1</ a > </ li >
             < li >< a  href = "#" >子菜单2</ a > </ li >
         </ ul >
     </ li >
</ ul >
<!--水平菜单-->
< br >
< br >
< ul >
     < li  class = "hmain" >
         < a  href = "#" > 垂直菜单1</ a >
         < ul >
             < li >< a  href = "#" >子菜单1</ a > </ li >
             < li >< a  href = "#" >子菜单2</ a > </ li >
         </ ul >
     </ li >
     < li  class = "hmain" >
         < a  href = "#" > 垂直菜单2</ a >
         < ul >
             < li >< a  href = "#" >子菜单1</ a > </ li >
             < li >< a  href = "#" >子菜单2</ a > </ li >
         </ ul >
     </ li >
     < li  class = "hmain" >
         < a  href = "#" > 垂直菜单3</ a >
         < ul >
             < li >< a  href = "#" >子菜单1</ a > </ li >
             < li >< a  href = "#" >子菜单2</ a > </ li >
         </ ul >
     </ li >
</ ul >
</ body >
</ html >


2 创建VerticalAndhorizontalMenu.css文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
ul,li{
     list-style none ;
}
ul{
     padding 0 ;
     margin 0 ;
}
.vmain{
     width 150px ;
     background-image url ( "images/toptitle.gif" );
     background-repeat no-repeat ;
     margin-bottom 2px ;
}
.hmain{
     width 150px ;
     background-image url ( "images/toptitle.gif" );
     background-repeat no-repeat ;
     margin-right 2px ;
     float left ;
}
a{
     text-decoration none ;
     padding-top 3px ;
     padding-bottom 3px ;
     padding-left 20px ;
     display block ;
     width 130px ;
}
.vmain a,.hmain a{
     color #ffffff ;
     background-image url ( "images/collapsed.gif" );
     background-repeat no-repeat ;
     background-position 3px  center ;
}
.vmain li a,.hmain li a{
     color #000000 ;
     background-image none ;
     background-color #eeeeee ;
     border-bottom 1px  solid  #dddddd ;
}
.vmain li a:hover,.hmain li a:hover{
     background-image url ( "images/linkarrow.gif" );
     background-repeat no-repeat ;
     background-position right  center ;
     background-color #006666 ;
     color #fff ;
}
.vmain ul,.hmain ul{
     display none ;
}


3 创建VerticalAndhorizontalMenu.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
$( function (){
     $( ".vmain>a" ).click( function (){
         var  ulNode=$( this ).next( "ul" );
         /*方法一*/
         if (ulNode.css( "display" )== "none" ){
             ulNode.css( "display" , "block" );
             /*
              或:
              ulNode.show("normal");//数字(毫秒),fast,slow、normal和fast
              或:
              ulNode.slideDown();
              */
         }
         else {
             ulNode.css( "display" , "none" );
             /*
              或:
              ulNode.hide("normal");
              或:
              ulNode.slideUp();
              */
         }
         /*
          或方法二:
          ulNode.toggle("normal");//数字(毫秒),fast,slow、normal和fast
          或方法三:
          ulNode.slideToggle();
          */
     });
     $( ".hmain" ).hover( function (){
         $( this ).children( "ul" ).slideDown( "normal" );
         changeIcon($( this ).children( "a" ));
     }, function (){
         $( this ).children( "ul" ).slideUp( "normal" );
         changeIcon($( this ).children( "a" ));
     });
});
function  changeIcon(mainNode){
     if (mainNode){
         if (mainNode.css( "background-image" ).indexOf( "collapsed.gif" )>=0){
             mainNode.css( "background-image" , "url('images/expanded.gif')" );
         } else {
             mainNode.css( "background-image" , "url('images/collapsed.gif')" );
         }
     }
}


4、运行效果如下

wKioL1U5DXXTVnmpAACNgz6cAXM790.jpg







     本文转自stock0991 51CTO博客,原文链接:http://blog.51cto.com/qing0991/1637758,如需转载请自行联系原作者







相关文章
|
JavaScript
jQuery插件实现图片墙小案例
jQuery插件实现图片墙小案例
116 0
|
JavaScript 前端开发 CDN
HTML + jQuery 实现轮播图
HTML + jQuery 实现轮播图
244 0
HTML + jQuery 实现轮播图
|
JavaScript
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
507 0
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
|
JavaScript 安全 Windows
js或jquery实现页面打印可局部打印
js或jquery实现页面打印可局部打印
232 0
|
JavaScript
使用jquery中实现按回车触发按钮事件和点击提交按钮触发的是一个事件
使用jquery中实现按回车触发按钮事件和点击提交按钮触发的是一个事件
110 0
|
前端开发 JavaScript
【jquery ajax】实现文件上传提交
【jquery ajax】实现文件上传提交
236 0
【jquery ajax】实现文件上传提交
|
JavaScript
利用jquery的attr方法一行代码实现的简单的图片切换效果
利用jquery的attr方法一行代码实现的简单的图片切换效果
139 0
利用jquery的attr方法一行代码实现的简单的图片切换效果
|
JavaScript
jquery实现单击div切换背景,再次单击回到原来样式
jquery实现单击div切换背景,再次单击回到原来样式
170 0
jquery实现单击div切换背景,再次单击回到原来样式
|
JavaScript
jQuery实现判断li的个数从而实现其他功能
jQuery实现判断li的个数从而实现其他功能
86 0
jQuery实现判断li的个数从而实现其他功能
|
JavaScript 前端开发
jquery实现动态五角星评分
jquery实现动态五角星评分
82 0