常见导航菜单实现方式-CSDN博客

导航条下拉

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <title>导航条下拉-demo</title>
   <script src="../node_modules/jquery/dist/jquery.min.js"></script>
   <style>
     * {
       margin: 0;
       padding: 0;
     }

     #nav {
       background-color: #eeeeee;
       height: 40px;
       width: 600px;
       margin: auto;
       text-align: center;
     }
     ul {
       list-style: none;
     }
     ul li {
       position: relative;
       float: left;
       line-height: 40px;
       text-align: center;
     }
     a {
       text-decoration: none;
       color: black;
       display: block;
       padding: 0 10px;
     }
     a:hover {
       color: white;
       background-color: gray;
     }
     ul li ul li {
       float: none;
       background-color: #eeeeee;
       margin-top: 2px;
     }
     ul li ul {
       position: absolute;
       left: o;
       top: 40px;
       display: none;
     }
   </style>
 </head>
 <body>
   <div id="nav">
     <ul>
       <li><a href=""> 首&nbsp;页 </a></li>
       <li class="navmenu">
         <a href="">课程大厅</a>
         <ul>
           <li><a href="">JavaScript</a></li>
           <li><a href="">JQuery</a></li>
         </ul>
       </li>
       <li class="navmenu">
         <a href="">学习中心</a>
         <ul>
           <li><a href="">JavaScript</a></li>
           <li><a href="">JQuery</a></li>
           <li><a href="">JavaScript</a></li>
           <li><a href="">JQuery</a></li>
         </ul>
       </li>
       <li><a href="">经典案例</a></li>
       <li><a href="">关于我们</a></li>
     </ul>
   </div>
   <script type="text/javascript">
     $(function() {
       $('.navmenu').mouseover(function() {
         $(this)
           .children('ul')
           .show()
       })
       $('.navmenu').mouseout(function() {
         $(this)
           .children('ul')
           .hide()
       })
     })
   </script>
 </body>
</html>

复制代码

顶部导航固定

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航菜单固定吸顶</title>
<style>
body {margin:0;}
ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
   background-color: #333;
   position: fixed;
   top: 0;
   width: 100%;
}

li {
   float: left;
}

li a {
   display: block;
   color: white;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
}

li a:hover:not(.active) {
   background-color: #111;
}

.active {
   background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
 <li><a class="active" href="#home">主页</a></li>
 <li><a href="#news">新闻</a></li>
 <li><a href="#contact">联系</a></li>
 <li><a href="#about">关于</a></li>
</ul>

<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
</div>

</body>
</html>
复制代码

常规顶部导航 + 固定侧边栏


<html>
 <head>
   <meta charset="utf-8" />
   <title>常规顶部导航 + 固定侧边栏</title>
   <style>
     @charset "utf-8";
     body,
     div,
     ul,
     li {
       margin: 0;
       padding: 0;
       font-style: normal;
       font: 12px/22px '\5B8B\4F53', Arial, Helvetica, sans-serif;
     }
     ol,
     ul,
     li {
       list-style: none;
     }
     img {
       border: 0;
       vertical-align: middle;
     }
     body {
       color: #000000;
       background: #fff;
       text-align: center;
     }
     .clear {
       clear: both;
       height: 1px;
       width: 100%;
       overflow: hidden;
       margin-top: -1px;
     }
     a {
       color: #000000;
       text-decoration: none;
     }
     a:hover {
       color: #ba2636;
     }

     .red,
     .red a {
       color: #f00;
     }
     .lan,
     .lan a {
       color: #1e51a2;
     }
     .pd5 {
       padding-top: 5px;
     }
     .dis {
       display: block;
     }
     .undis {
       display: none;
     }

     ul#nav {
       width: 100%;
       height: 60px;
       background: #00a2ca;
       margin: 0 auto;
       position: fixed;
     }
     ul#nav li {
       display: inline;
       height: 60px;
     }
     ul#nav li a {
       display: inline-block;
       padding: 0 20px;
       height: 60px;
       line-height: 60px;
       color: #fff;
       font-family: '\5FAE\8F6F\96C5\9ED1';
       font-size: 16px;
     }
     ul#nav li a:hover {
       background: #0095bb;
     }

     ul#sider{
       list-style-type: none;
   margin: 0;
   margin-top: 60px;
   padding: 0;
   width: 10%;
   background-color: #f1f1f1;
   position: fixed;
   height: 100%;
   overflow: auto;
     }

li a {
   display: block;
   color: #000;
   padding: 8px 16px;
   text-decoration: none;
}

li a.active {
   background-color: rgb(29, 39, 30);
   color: white;
}

li a:hover:not(.active) {
   background-color: #555;
   color: white;
}
   </style>
 </head>
 <body>
   <ul id="nav">
     <li><a href="#">首页</a></li>
     <li><a href="#">HTML教程</a></li>
     <li><a href="#">CSS基础</a></li>
     <li><a href="#">CSS开发工具</a></li>
     <li><a href="#">CSS特效</a></li>
     <li><a href="#">CSS问题</a></li>
   </ul>

   <ul id="sider">
     <li><a href="#home">主页</a></li>
     <li><a href="#news">新闻</a></li>
     <li><a href="#contact">联系</a></li>
     <li><a href="#about">关于</a></li>
     <li><a href="#home">主页</a></li>
     <li><a href="#news">新闻</a></li>
     <li><a href="#contact">联系</a></li>
     <li><a href="#about">关于</a></li>
     <li><a href="#home">主页</a></li>
     <li><a href="#news">新闻</a></li>
     <li><a href="#contact">联系</a></li>
     <li><a href="#about">关于</a></li>
     <li><a href="#home">主页</a></li>
     <li><a href="#news">新闻</a></li>
     <li><a href="#contact">联系</a></li>
     <li><a href="#about">关于</a></li>
     <li><a href="#home">主页</a></li>
     <li><a href="#news">新闻</a></li>
   </ul>
   <div style="margin-left:25%;padding:1px 16px;height:100%;">
       <h2>Fixed Full-height Side Nav</h2>
       <h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
       
     </div>
 </body>
</html>

复制代码