固定顶部导航
顶部固定 + 侧边栏
常规顶部导航 + 固定侧边栏
@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;
}
Fixed Full-height Side Nav
Try to scroll this area, and see how the sidenav sticks to the page
导航条带下拉菜单
<!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=""> 首 页 </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>
