博客列表 >导航栏的下拉

导航栏的下拉

南鸢离梦的博客
南鸢离梦的博客原创
2019年11月14日 09:51:29696浏览
  1. <html>
  2. <head>
  3. <title>this is a test file</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <style type="text/css">
  6. #head,#foot{
  7. width: 960px;
  8. height: 100px;
  9. margin: 0px auto;
  10. }
  11. body{
  12. margin: 0px;
  13. padding: 0px;
  14. font-size: 14px;
  15. font-family: "微软雅黑",Helvetica,arial;
  16. }
  17. /**
  18. * darker:#06a18a;
  19. * light: #0fb89f;
  20. */
  21. div.navbar{
  22. background-color:#0fb89f ;
  23. }
  24. ul.nav{
  25. margin: 0px auto;
  26. padding: 0px;
  27. list-style: none;
  28. width: 960px;
  29. height: 40px;
  30. }
  31. ul.nav a{
  32. text-decoration: none;
  33. color: white;
  34. display: inline-block;
  35. padding: 10px;
  36. min-width: 110px;
  37. text-align: center;
  38. }
  39. ul.nav a:hover{
  40. background-color: #06a18a;
  41. }
  42. a.active{
  43. background-color: #06a18a;
  44. }
  45. ul.nav li{
  46. float: left;
  47. }
  48. ul.nav li ul{
  49. margin: 0px auto;
  50. padding: 0px;
  51. list-style: none;
  52. background-color: #06a18a;
  53. display: none;
  54. }
  55. ul.nav li ul li{
  56. float: none;
  57. }
  58. ul.nav li ul li a:hover{
  59. background-color:#0fb89f ;
  60. }
  61. </style>
  62. <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  63. </head>
  64. <body>
  65. <div id="head">
  66. this is head
  67. </div>
  68. <div class="navbar">
  69. <ul class="nav">
  70. <li>
  71. <a href="" class="active">首页</a>
  72. </li>
  73. <li>
  74. <a href="">中心概况</a>
  75. <ul>
  76. <li>
  77. <a href="">中心简介</a>
  78. </li>
  79. <li>
  80. <a href="">历任领导</a>
  81. </li>
  82. <li>
  83. <a href="">现任领导</a>
  84. </li>
  85. <li>
  86. <a href="">组织架构</a>
  87. </li>
  88. </ul>
  89. </li>
  90. <li>
  91. <a href="">新闻公告</a>
  92. <ul>
  93. <li>
  94. <a href="">集团要闻</a>
  95. </li>
  96. <li>
  97. <a href="">综合新闻</a>
  98. </li>
  99. <li>
  100. <a href="">通知公告</a>
  101. </li>
  102. <li>
  103. <a href="">媒体关注</a>
  104. </li>
  105. </ul>
  106. </li>
  107. <li>
  108. <a href="">经营发展</a>
  109. </li>
  110. <li>
  111. <a href="">社会责任</a>
  112. </li>
  113. <li>
  114. <a href="">企业文化</a>
  115. </li>
  116. <li>
  117. <a href="">专项工作</a>
  118. </li>
  119. <li>
  120. <a href="">投资者关系</a>
  121. </li>
  122. </ul>
  123. </div>
  124. <div id="foot">
  125. </div>
  126. </body>
  127. <script type="text/javascript">
  128. $(document).ready(function(){
  129. $("ul.nav").children().hover(function() {
  130. if($(this).find("li").length > 0){
  131. $(this).children("ul").stop(true, true).slideDown(100)
  132. }
  133. },function() {
  134. $(this).children("ul").stop(true, true).slideUp("fast");
  135. });
  136. $("ul.nav ul").hover(function(){
  137. $(this).prev().addClass("active");
  138. },function(){
  139. $(this).prev().removeClass("active");
  140. })
  141. });
  142. </script>
  143. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议