热门IT资讯网

请输入关键字词

热门搜索排行

最新搜索排行

导航： 首页 > 网络技术 >

Jquery系列之横向纵向菜单

发表于：2024-11-26 作者：热门IT资讯网编辑
编辑最后更新 2024年11月26日，jsp页面<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>

jsp页面

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2. pageEncoding="UTF-8"%>
  3. >
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <link type="text/css" rel="stylesheet" href="css/menu.css">link>
  8. <script type="text/javascript" src="js/jquery-1.4.2.js">script>
  9. <script type="text/javascript" src="js/menu.js">script>
  10. <title>横向纵向菜单title>
  11. head>
  12. <body>
  13. <ul>
  14. <li class="main">
  15. <a href="#">菜单项1a>
  16. <ul>
  17. <li>
  18. <a href="#">子菜单项11a>
  19. li>
  20. <li>
  21. <a href="#">子菜单项12a>
  22. li>
  23. ul>
  24. li>
  25. <li class="main">
  26. <a href="#">菜单项2a>
  27. <ul>
  28. <li>
  29. <a href="#">子菜单项21a>
  30. li>
  31. <li>
  32. <a href="#">子菜单项22a>
  33. li>
  34. ul>
  35. li>
  36. <li class="main">
  37. <a href="#">菜单项3a>
  38. <ul>
  39. <li>
  40. <a href="#">子菜单项31a>
  41. li>
  42. <li>
  43. <a href="#">子菜单项32a>
  44. li>
  45. ul>
  46. li>
  47. ul>
  48. <br />
  49. <br />
  50. <br />
  51. <ul>
  52. <li class="hmain">
  53. <a href="#">菜单项1a>
  54. <ul>
  55. <li>
  56. <a href="#">子菜单项11a>
  57. li>
  58. <li>
  59. <a href="#">子菜单项12a>
  60. li>
  61. ul>
  62. li>
  63. <li class="hmain">
  64. <a href="#">菜单项2a>
  65. <ul>
  66. <li>
  67. <a href="#">子菜单项21a>
  68. li>
  69. <li>
  70. <a href="#">子菜单项22a>
  71. li>
  72. ul>
  73. li>
  74. <li class="hmain">
  75. <a href="#">菜单项3a>
  76. <ul>
  77. <li>
  78. <a href="#">子菜单项31a>
  79. li>
  80. <li>
  81. <a href="#">子菜单项32a>
  82. li>
  83. ul>
  84. li>
  85. ul>
  86. body>
  87. html>

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-p_w_picpath: url(../p_w_picpaths/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-p_w_picpath: url(../p_w_picpaths/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-p_w_picpath: none;
  37. }
  38. .main ul, .hmain ul {
  39. display: none;
  40. }
  41. .hmain {
  42. float: left;
  43. margin-right: 1px;
  44. }

Jquery代码

  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. });
  30. /**
  31. * 修改主菜单的指示图标
  32. */
  33. function changeIcon(mainNode) {
  34. if (mainNode) {
  35. if (mainNode.css("background-p_w_picpath").indexOf("collapsed.gif") >= 0) {
  36. mainNode.css("background-p_w_picpath","url('p_w_picpaths/expanded.gif')");
  37. } else {
  38. mainNode.css("background-p_w_picpath","url('p_w_picpaths/collapsed.gif')");
  39. }
  40. }
  41. }
很赞哦！

相关文章

0