简易导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
nav {
height: 41px;
background-color: #fcfcfc;
border-bottom: 1px solid #edeef0;
border-top: 3px solid #ff8500;
}
nav a {
font-size: 14px;
color: #4c4c4c;
text-decoration: none;
padding: 0 15px;
display: inline-block;
height: 41px;
line-height: 41px;
}
nav a:hover {
background-color: #eee;
}
</style>
</head>
<body>
<nav>
<a href="#">设为首页</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
</nav>
</body>
</html>
垂直菜单的制作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
font-size: 14px;
}
ul {
list-style: none;
width: 100px;
}
a {
text-decoration: none;
display: block;
height: 30%;
line-height: 30px;
width: 100px;
background-color: #cccccc;
margin-bottom: 1px;
text-indent: 10px;
}
a:hover {
background-color: #f60;
color: #ffffff;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">首 页</a>
</li>
<li>
<a href="#">新闻展示</a>
</li>
<li>
<a href="#">今日头条</a>
</li>
<li>
<a href="#">在线客服</a>
</li>
</ul>
</body>
</html>
伸缩菜单制作 —— 水平方向
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航菜单</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 14px;
}
a {
color: #333;
text-decoration: none
}
ul {
list-style: none;
height: 30px;
border-bottom: 5px solid #F60;
margin-top: 20px;
padding-left: 50px;
}
ul li {
float: left
}
ul li a {
display: block;
height: 30px;
text-align: center;
line-height: 30px;
width: 120px;
background: #efefef;
margin-left: 1px;
}
a.on,
a:hover {
background: #F60;
color: #fff;
}
</style>
<script>
window.onload = function() {
var aA = document.getElementsByTagName('a');
for (var i = 0; i < aA.length; i++) {
aA[i].onmouseover = function() {
var This = this;
clearInterval(This.time);
This.time = setInterval(function() {
This.style.width = This.offsetWidth + 8 + "px";
if (This.offsetWidth >= 160)
clearInterval(This.time);
}, 30)
}
aA[i].onmouseout = function() {
clearInterval(this.time);
var This = this;
this.time = setInterval(function() {
This.style.width = This.offsetWidth - 8 + "px";
if (This.offsetWidth <= 120) {
This.style.width = '120px';
clearInterval(This.time);
}
}, 30)
}
}
}
</script>
</head>
<body>
<ul>
<li><a class="on" href="#">首 页</a></li>
<li><a href="#">新闻快讯</a></li>
<li><a href="#">产品展示</a></li>
<li><a href="#">售后服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</body>
</html>
导航栏 + 下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#menu {
background-color: #eee;
width: 600px;
height: 40px;
margin: 0 auto;
}
ul {
list-style: none;
}
ul li {
line-height: 40px;
text-align: center;
position: relative;
float: left;
}
a {
text-decoration: none;
color: #000;
display: block;
width: 90px;
}
a:hover {
color: #FFF;
background-color: #666;
}
ul li ul li {
float: none;
margin-top: 2px;
background-color: #eee;
}
ul li ul {
width: 90px;
position: absolute;
display: none;
}
ul li:hover ul {
display: block;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程大厅</a>
<ul>
<li><a href="#">Javascrip</a>
<li><a href="#">Jquery</a>
</ul>
</li>
<li><a href="#">学习中心</a>
<ul>
<li><a href="#">视频学习</a></li>
<li><a href="#">案例学习</a></li>
<li><a href="#">交流平台</a></li>
</ul>
</li>
<li><a href="#">经典案例</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</body>
</html>
三级导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul,
h2,
dl,
dt,
dd {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
h1 {
text-align: center;
font-weight: normal;
}
h2 {
font-weight: normal;
}
a:link {
color: #333;
text-decoration: none;
}
a:visited {
color: #333;
text-decoration: none;
}
a:hover {
color: #3d6cd8;
text-decoration: underline;
}
a:active {
color: #3d6cd8;
text-decoration: underline;
}
.nav {
width: 755px;
margin: 0 auto;
border: 1px solid #dedede;
border-radius: 5px;
overflow: hidden;
}
.nav li {
width: 151px;
float: left;
text-align: center;
}
.nav li h2 {
width: 150px;
height: 48px;
line-height: 48px;
border-right: 1px solid #dedede;
background: #f9f9f9;
font-size: 16px;
}
.nav li h2 a {
display: block;
text-decoration: none;
}
.nav li h2 a:hover,
.nav .nav_this h2 a,
.nav li .nav_this_2 a {
background: #e9e9e9;
}
.down {
display: none;
width: 110px;
padding: 10px 20px;
position: absolute;
margin-left: -1px;
border: 1px solid #dedede;
background: #f9f9f9;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.down a {
display: block;
height: 36px;
line-height: 36px;
border-bottom: 1px solid #e4e4e4;
font-size: 14px;
}
.nav li:last-child h2 {
border: none;
}
.down a:last-child {
border: none;
}
.nav_2 {
width: 755px;
margin: 0 auto;
overflow: hidden;
}
.nav_2 li {
width: 150px;
float: left;
text-align: center;
margin-right: 1px;
}
.nav_2 li h2 {
width: 150px;
height: 36px;
line-height: 36px;
background: #3d6cd8;
font-size: 16px;
}
.nav_2 li h2 a {
display: block;
text-decoration: none;
color: #fff;
}
.nav_2 li h2 a:hover,
.nav_2 .nav_this h2 a,
.nav_2 li .nav_this_2 a {
background: #204db3;
}
.down_2 {
position: absolute;
display: none;
}
.down_2 a {
display: block;
}
.down_2 dt {
width: 150px;
height: 36px;
line-height: 36px;
background: #c4c5c7;
margin-top: 1px;
}
.down_2 dd {
display: none;
position: absolute;
width: 150px;
left: 150px;
margin-top: -37px;
}
.down_2 dd a {
height: 36px;
line-height: 36px;
background: #ddd;
margin: 1px;
}
</style>
<script>
$(document).ready(function() {
$(".nav li").hover(
function() {
$(this).children(".down").stop(true, true).slideDown("fast");
$(this).find("h2").addClass("nav_this_2");
},
function() {
$(this).children(".down").stop(true, true).slideUp("fast");
$(this).find("h2").removeClass("nav_this_2");
}
);
$(".nav_2 li").hover(
function() {
$(this).children(".down_2").stop(true, true).slideDown("fast");
$(this).find("h2").addClass("nav_this_2");
},
function() {
$(this).children(".down_2").stop(true, true).slideUp("fast");
$(this).find("h2").removeClass("nav_this_2");
}
);
$(".nav_2 dl").hover(
function() {
$(this).children("dd").stop(true, true).fadeIn();
},
function() {
$(this).children("dd").stop(true, true).fadeOut();
}
);
});
</script>
</head>
<body>
<h1>二级下拉菜单</h1>
<ul class="nav">
<li>
<h2><a href="">首页</a></h2>
</li>
<li>
<h2><a href="">关于我们</a></h2>
<div class="down">
<a href="">企业简介</a>
<a href="">公共事业</a>
</div>
</li>
<li class="nav_this">
<h2><a href="">产品</a></h2>
<div class="down">
<a href="">产品1</a>
<a href="">产品2</a>
<a href="">产品3</a>
<a href="">产品4</a>
</div>
</li>
<li>
<h2><a href="">解决方案</a></h2>
<div class="down">
<a href="">工程案例</a>
<a href="">解决方案</a>
<a href="">行业需求</a>
</div>
</li>
<li>
<h2><a href="">联系我们</a></h2>
</li>
</ul>
<br><br><br><br><br><br><br><br>
<h1>三级下拉菜单</h1>
<ul class="nav_2">
<li>
<h2><a href="">首页</a></h2>
</li>
<li>
<h2><a href="">关于我们</a></h2>
<div class="down_2">
<dl>
<dt><a href="">二级导航1</a></dt>
<dd>
<a href="">三级导航11</a>
<a href="">三级导航12</a>
<a href="">三级导航13</a>
<a href="">三级导航14</a>
</dd>
</dl>
<dl>
<dt><a href="">二级导航2</a></dt>
<dd>
<a href="">三级导航21</a>
<a href="">三级导航22</a>
</dd>
</dl>
</div>
</li>
<li class="nav_this">
<h2><a href="">产品</a></h2>
<div class="down_2">
<dl>
<dt><a href="">二级导航1</a></dt>
<dd>
<a href="">三级导航11</a>
</dd>
</dl>
<dl>
<dt><a href="">二级导航2</a></dt>
<dd>
<a href="">三级导航21</a>
</dd>
</dl>
<dl>
<dt><a href="">二级导航3</a></dt>
<dd>
<a href="">三级导航31</a>
<a href="">三级导航32</a>
</dd>
</dl>
</div>
</li>
<li>
<h2><a href="">解决方案</a></h2>
<div class="down_2">
<dl>
<dt><a href="">二级导航1</a></dt>
<dd>
<a href="">三级导航11</a>
<a href="">三级导航12</a>
<a href="">三级导航13</a>
<a href="">三级导航14</a>
<a href="">三级导航15</a>
<a href="">三级导航16</a>
</dd>
</dl>
<dl>
<dt><a href="">二级导航2</a></dt>
<dd>
<a href="">三级导航21</a>
<a href="">三级导航22</a>
</dd>
</dl>
</div>
</li>
<li>
<h2><a href="">联系我们</a></h2>
</li>
</ul>
</body>
</html>
四级导航栏