search

博客列表 >导航栏的下拉

导航栏的下拉

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

相关文章

查看更多