导航条下拉
<!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;
}
background-color:
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:
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>
复制代码
顶部导航固定
<!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:
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:
}
.active {
background-color:
}
</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:
background:
text-align: center;
}
.clear {
clear: both;
height: 1px;
width: 100%;
overflow: hidden;
margin-top: -1px;
}
a {
color:
text-decoration: none;
}
a:hover {
color:
}
.red,
.red a {
color:
}
.lan,
.lan a {
color:
}
.pd5 {
padding-top: 5px;
}
.dis {
display: block;
}
.undis {
display: none;
}
ul
width: 100%;
height: 60px;
background:
margin: 0 auto;
position: fixed;
}
ul
display: inline;
height: 60px;
}
ul
display: inline-block;
padding: 0 20px;
height: 60px;
line-height: 60px;
color:
font-family: '\5FAE\8F6F\96C5\9ED1';
font-size: 16px;
}
ul
background:
}
ul
list-style-type: none;
margin: 0;
margin-top: 60px;
padding: 0;
width: 10%;
background-color:
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color:
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: rgb(29, 39, 30);
color: white;
}
li a:hover:not(.active) {
background-color:
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>
复制代码