Chinaunix首页 | 论坛 | 博客

kylin_755的ChinaUnix博客kylin755.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

kylin_755

  • 博客访问： 96121
  • 博文数量： 34
  • 博客积分： 925
  • 博客等级： 准尉
  • 技术积分： 350
  • 用 户 组： 普通用户
  • 注册时间： 2011-08-15 11:52
文章分类

全部博文（34）

文章存档

2011年（34）

我的朋友
最近访客
推荐博文
相关博文
菜单 样式

分类： 系统运维

2011-08-23 11:23:36


html代码：
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
  2. <html>
  3.     <head>
  4.         <title>jQuery菜单</title>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.         <link type="text/css" rel="stylesheet" href="css/menu.css" />
  7.         <script type="text/javascript" src="js/jquery.js"> </script>
  8.         <script type="text/javascript" src="js/menu.js"> </script>
  9.     </head>
  10.     <body>

  12.         <ul class="lenovo-menu">
  13.             <li class="main">
  14.                     <a href="#">菜单项1</a>
  15.                 <ul>
  16.                     <li>
  17.                         <a href="#">子菜单项11</a>
  18.                     </li>
  19.                     <li>
  20.                         <a href="#">子菜单项12</a>
  21.                     </li>
  22.                 </ul>
  23.             </li>
  24.             <li class="main">
  25.                 <a href="#">菜单项2</a>
  26.                 <ul>
  27.                     <li>
  28.                         <a href="#">子菜单项21</a>
  29.                     </li>
  30.                     <li>
  31.                         <a href="#">子菜单项22</a>
  32.                     </li>
  33.                 </ul>
  34.             </li>
  35.             <li class="main">
  36.                 <a href="#">菜单项3</a>
  37.                 <ul>
  38.                     <li>
  39.                         <a href="#">子菜单项31</a>
  40.                     </li>
  41.                     <li>
  42.                         <a href="#">子菜单项32</a>
  43.                     </li>
  44.                 </ul>
  45.             </li>
  46.         </ul>
  47.         <br />
  48.         <br />
  49.         <br />

  51.         <ul>
  52.             <li class="hmain">
  53.                     <a href="#">菜单项1</a>
  54.                 <ul>
  55.                     <li>
  56.                         <a href="#">子菜单项11</a>
  57.                     </li>
  58.                     <li>
  59.                         <a href="#">子菜单项12</a>
  60.                     </li>
  61.                 </ul>
  62.             </li>
  63.             <li class="hmain">
  64.                 <a href="#">菜单项2</a>
  65.                 <ul>
  66.                     <li>
  67.                         <a href="#">子菜单项21</a>
  68.                     </li>
  69.                     <li>
  70.                         <a href="#">子菜单项22</a>
  71.                     </li>
  72.                 </ul>
  73.             </li>
  74.             <li class="hmain">
  75.                 <a href="#">菜单项3</a>
  76.                 <ul>
  77.                     <li>
  78.                         <a href="#">子菜单项31</a>
  79.                     </li>
  80.                     <li>
  81.                         <a href="#">子菜单项32</a>
  82.                     </li>
  83.                 </ul>
  84.             </li>
  85.         </ul>
  86.     
  87.     </body>
  88. </html>
menu.css
  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.     background-image: url(../images/title.gif);
  12.     background-repeat: repeat-x;
  13.     width: 120px;
  14. }
  15. li {
  16.     background-color: #EEEEEE;
  17. }
  18. a {
  19.     /*取消所有的下划线*/
  20.     text-decoration: none;
  21.     padding-left: 20px;
  22.     display: block;
  23.     display: inline-block;
  24.     width: 100px;
  25.     padding-top: 3px;
  26.     padding-bottom: 3px;
  27. }
  28. .main a, .hmain a {
  29.     color: white;
  30.     background-image: url(../images/collapsed.gif);
  31.     background-repeat: no-repeat;
  32.     background-position: 3px center;
  33. }
  34. .main li a, .hmain li a {
  35.     color: black;
  36.     background-image: none;
  37. }
  38. .main ul, .hmain ul {
  39.     display: none;
  40. }
  41. .hmain {
  42.     float: left;
  43.     margin-right: 1px;
  44. }
menu.js
  1. $(document).ready(function(){
  2.     //页面中的DOM已经装载完成时，执行的代码
  3.     $(".main > a").click(function(){
  4.         //找到主菜单项对应的子菜单项
  5.         var ulNode = $(this).next("ul");
  6.         /*
  7.         if (ulNode.css("display") == "none") {
  8.             ulNode.css("display","block");
  9.         } else {
  10.             ulNode.css("display","none");
  11.         }
  12.         */
  13.         //ulNode.show("slow");//normal fast
  14.         //ulNode.hide();
  15.         //ulNode.toggle();
  16.         //
  17.         //ulNode.slideDown("slow");
  18.         //ulNode.slideUp;
  19.         ulNode.slideToggle();
  20.         changeIcon($(this));
  21.     });
  22.     $(".hmain").hover(function(){
  23.         $(this).children("ul").slideDown();
  24.         changeIcon($(this).children("a"));
  25.     },function(){
  26.         $(this).children("ul").slideUp();
  27.         changeIcon($(this).children("a"));
  28.     });
  29. });

  31. /**
  32.  * 修改主菜单的指示图标
  33.  */
  34. function changeIcon(mainNode) {
  35.     if (mainNode) {
  36.         if (mainNode.css("background-image").indexOf("collapsed.gif") >= 0) {
  37.             mainNode.css("background-image","url('images/expanded.gif')");
  38.         } else {
  39.             mainNode.css("background-image","url('images/collapsed.gif')");
  40.         }
  41.     }
  42. }
阅读(348) | 评论(0) | 转发(0) |
0

上一篇：gvim 编辑器常用配置

下一篇：MyEclipse 设置

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6