利用jQuery设计横/纵向菜单

 在网页中，菜单扮演着“指路者”的角色。如何设计一个人性化的菜单呢，下面小编带着大家一起做。

效果图：

设计历程：

1.首先利用html中的<ul>和<li>标签进行嵌套，搭起一个整体的框架。如下图所示：

Html代码：

 

[html] view plain copy
 
  1. <head>  
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  3. <title>横纵向菜单</title>  
  4. <link rel="stylesheet" type="text/css" href="css/menu.css"/>  
  5. <script type="text/javascript" src="js/jquery.js"></script>  
  6. <script type="text/javascript" src="js/menu.js"></script>  
  7. </head>  
  8.   
  9. <body>  
  10. <body>  
  11.     <ul>  
  12.         <li class="main">  
  13.             <a href="#">菜单项1</a>  
  14.             <ul>  
  15.                 <li>  
  16.                     <a href="#">子菜单项11</a>  
  17.                 </li>  
  18.                 <li>  
  19.                     <a href="#">子菜单项12</a>  
  20.                 </li>  
  21.             </ul>  
  22.         </li>  
  23.         <li class="main">  
  24.             <a href="#">菜单项2</a>  
  25.             <ul>  
  26.                 <li>  
  27.                     <a href="#">子菜单项21</a>  
  28.                 </li>  
  29.                 <li>  
  30.                     <a href="#">子菜单项22</a>  
  31.                 </li>  
  32.             </ul>  
  33.         </li>  
  34.         <li class="main">  
  35.             <a href="#">菜单项3</a>  
  36.             <ul>  
  37.                 <li>  
  38.                     <a href="#">子菜单项31</a>  
  39.                 </li>  
  40.                 <li>  
  41.                     <a href="#">子菜单项32</a>  
  42.                 </li>  
  43.             </ul>  
  44.         </li>  
  45.     </ul>  
  46. </body>  
  47. </html>  

 

（这是展示的是纵向菜单的代码，横向代码亦是如此，只需更改一下class的名字，以便在设计样式时区别开。）

 

2.上面的两幅图形成鲜明的对比，用户理所应当选择前者了，接下来我们就给框架“穿”件衣服。

CSS代码：

 

[html] view plain copy
 
  1. ul,li{  
  2.     /*清除ul和li前默认的小圆点*/  
  3.     list-style:none;  
  4.     }  
  5. ul{  
  6.     /*清除子菜单的缩进值*/  
  7.     padding:0;  
  8.     margin:0;  
  9.     }  
  10. .main,.hmain{  
  11. /*  菜单项的背景是一小块图片平移重复构成的，看起来有立体感  
  12. */  background-image:url(../image/title.gif);  
  13.     background-repeat:repeat-x;   
  14.     width:120px;  
  15.     }  
  16. li{  
  17. /*  设置背景颜色，菜单项的背景图片覆盖背景颜色  
  18. */  background-color:#CCC;    
  19.     }  
  20. a{  
  21.     /*取消所有链接的下划线*/  
  22.     text-decoration:none;     
  23. /*  让a充满整个区域，鼠标点击的那行一直是手形  
  24. */  display:block;  
  25.     display:inline-block;  
  26.       
  27.     width:100px;  
  28.     padding-left:20px;  
  29.     padding-top:3px;  
  30.     padding-bottom:3px;  
  31.     }     
  32. .main a,.hmain a{  
  33. /*  设置菜单项的字体颜色  
  34. */  color:white;  
  35. /*在菜单项前添加向右指的图片  
  36. */  background-image:url(../image/collapsed.gif);  
  37.     background-repeat:no-repeat;  
  38.     background-position:3px center;  
  39.     }  
  40. .main li a,.hmain li a{  
  41. /*  设置子菜单的字体颜色  
  42. */  color:black;  
  43.     background-image:none;  
  44.     }  
  45. .main ul,.hmain ul{  
  46. /*  初始不显示子菜单项  
  47. */  display:none;  
  48.     }  
  49. .hmain{  
  50. /*  横向菜单每个菜单项向左浮动，在一行显示  
  51. */  float:left;  
  52.     margin-right:1px;         
  53.     }*/  

注：“main”—纵向   “hmain”—横向

 

 

3.菜单的表面工作完成了，它不是摆在那里给人看的，需要和用户进行交互，实现一些动态效果。当我们点击菜单项时，首先鼠标箭头变为手形，点击后下面隐藏的子菜单项会显示出来，同时指向右的箭头变为指向下方。再点击菜单项时，子菜单项隐藏，同时更换箭头图片。

JavaScript就是赋予网页生命力的大神，而jQuery则是一个兼容多浏览器的javascript库，有了它使得javascript写得更少,做得更多。引用了jquery库后，编写如下代码：

javascript代码：

 

[html] view plain copy
 
  1. $(document).ready(function() {  
  2.     //纵向菜单  
  3.     $(".main > a").click(function(){       
  4.         var ulNode=$(this).next("ul");        
  5.         ulNode.slideToggle();  
  6.         changeIcon($(this));  
  7.     });  
  8.     //横向菜单  
  9.     $(".hmain").hover(function(){  
  10.         $(this).children("ul").slideDown();  
  11.         changeIcon($(this).children("a"));  
  12.     },function(){  
  13.         $(this).children("ul").slideUp();  
  14.         changeIcon($(this).children("a"));  
  15.     });  
  16. });  
  17. /*修改主菜单的指示图标*/  
  18. function changeIcon(mainNode){  
  19.     if(mainNode){  
  20.         if(mainNode.css("background-image").indexOf("collapsed.gif")>=0){  
  21.            mainNode.css("background-image","url('image/expanded.gif')");  
  22.         }else{  
  23.            mainNode.css("background-image","url('image/collapsed.gif')");  
  24.         }  
  25.     }  
  26. }  

至此，两个菜单设计完成了，是不是很有成就感呢！

     

       纵观全局，html是躯体，css是衣服，js则是灵魂。三者的配合，构成了一个个鲜活灵动的网页。记得最初照着视频敲牛腩新闻发布系统的时候，觉得B/S开发就是杂七杂八的东西往一块儿拼凑。随着后来的“盲人摸象”，现在有了逐渐清晰的认识。

posted @ 2017-06-30 10:38  chu_叶子  阅读(386)  评论(0)    收藏  举报