在该笔记中将学到一些常用的网页导航菜单的制作方法与展示效果
导航菜单的制作
导航菜单的特点
门户类网站的导航特点：导航在上方平铺展示(因为不需要展开)
商城类网站的导航特点：竖向列表，横向伸缩
垂直菜单的制作
用无序列表构建垂直菜单
因为在点击菜单的时候，要实现跳转功能，所以在 li 里面包裹 a 标签来实现跳转。同时，li 是块级元素，可以设置 width，height 属性，但是 a 不是块级元素无法设置这些属性，我们可以使用 display:block 将 a 设置为块元素，从而将 li 里面的属性都放在 a 之中，不会影响显示效果。
使用了 a:hover 设置了鼠标进入的样式：
<html>
<head>
<title>导航菜单制作</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin:0;
padding:0;
}
ul {
list-style:none;
width:none;
font-size:14px;
}
a{
text-decoration:none;
display:block;
height:30px;
line-height:30px;
background-color:#ccc;
width:100px;
margin-top:1px;
text-indent:10px;
}
a:hover{
background-color:#f60;
color:#fff;
}
</style>
</head>
<body>
<ul>
<li><a 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>
显示效果如下：
水平菜单的设置
水平菜单的结构和垂直菜单一模一样，只需要在 CSS 样式中添加 float:left 就可以将菜单变成水平。
可以在 li 的父元素设置 overflow:hidden 来清除浮动，也可以在 a 中设置 text-align:center 将文字居中，以获得更好的显示效果。
<html>
<head>
<title>导航菜单制作</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin:0;
padding:0;
}
ul {
list-style:none;
font-size:14px;
overflow:hidden;
}
li{
float:left;
}
a{
text-decoration:none;
display:block;
height:30px;
line-height:30px;
background-color:#ccc;
width:100px;
margin-right:1px;
margin-top:1px;
text-align:center;
}
a:hover{
background-color:#f60;
color:#fff;
}
</style>
</head>
<body>
<ul>
<li><a 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>
显示效果如下：
圆角菜单的制作
通过设置背景来改变外观样式，通过 a:hover 为菜单添加交互效果。
圆角菜单的制作，可以通过在 a:hover 设置背景来实现。
<html>
<head>
<title>导航菜单制作</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin:0;
padding:0;
}
ul {
list-style:none;
font-size:14px;
overflow:hidden;
height:50px;
border-bottom:5px solid #f60;
padding-left:30px;
}
li{
float:left;
margin-top:20px;
}
a{
text-decoration:none;
display:block;
height:30px;
line-height:30px;
width:120px;
margin-right:1px;
text-align:center;
background:url(http://ofjjubwp5.bkt.clouddn.com/image/jpg/img20.jpg)
}
.on, a:hover{
color:#fff;
background-position:0 -30px;
}
</style>
</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>
显示效果如下：
改变高度的伸缩菜单
通过设置 height 可以使得菜单的高度变得更高。但是伸缩的时候，菜单栏是向下伸缩的。这时需要重新设置 line-height=height 来修改居中的效果。
<html>
<head>
<title>导航菜单制作</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin:0;
padding:0;
}
ul {
list-style:none;
font-size:14px;
overflow:hidden;
height:50px;
border-bottom:5px solid #f60;
padding-left:30px;
}
li{
float:left;
margin-top:20px;
}
a{
text-decoration:none;
display:block;
height:30px;
line-height:30px;
width:120px;
margin-right:1px;
text-align:center;
}
.on, a:hover{
color:#fff;
background-color:#f60;
height:40px;
margin-top:-10px;
line-height:40px;
}
</style>
</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>
显示效果如下：
水平方向的伸缩菜单(带有 js 动画效果)
实现的效果为：当鼠标放在菜单的选项上的时候，菜单选项的长度从原来的 120px 扩展成 160px，当鼠标从菜单选项上移开的时候，菜单选项的长度又变回 120px。
要实现以上效果，可以使用 JavaScript 对菜单选项添加 onmouseover 和 onmouseout 事件，使用 setinterval 来逐渐改变菜单栏的长度。需要注意的是，在进入这两个事件后，首先要 使用 clearInterval 来清除其他的事件的动作，否则会对显示效果产生印象。
<html>
<head>
<title>导航菜单制作</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin:0;
padding:0;
}
ul {
list-style:none;
font-size:14px;
overflow:hidden;
height:50px;
border-bottom:5px solid #f60;
padding-left:30px;
}
li{
float:left;
margin-top:20px;
}
a{
text-decoration:none;
display:block;
height:30px;
line-height:30px;
width:120px;
margin-right:1px;
text-align:center;
}
.on, a:hover{
color:#fff;
background-color:#f60;
}
</style>
<script>
window.onload=function(){
var as = document.getElementsByTagName("a"),
a, i, len;
for(i=0, len=as.length; i<len; i++) {
a = as[i];
a.onmouseover=function(){
var This = this;
clearInterval(This.time);
This.time = setInterval(function(){
This.style.width = This.offsetWidth + 4 + "px";
if(This.offsetWidth >= 160) {
This.style.width="160px";
clearInterval(This.time);
}
}, 30);
}
a.onmouseout=function(){
var This = this;
clearInterval(This.time);
This.time = setInterval(function(){
This.style.width = This.offsetWidth - 4 + "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>
可以通过设置 setinterval 的时间间隔和每次宽度变化的长短，来使得动画效果更加流畅
显示效果如下：
京东商城的导航菜单的实现
纯 CSS 实现商城导航菜单
显示效果如下：
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.leftmenu{
display: block;
width: 220px;
border: 2px solid #e4393c;
margin-left: 20px;
}
.leftmenu-head{
background-color: #e4393c;
color: white;
font-size: 11pt;
font-weight: bold;
height: 40px;
line-height: 40px;
padding-left: 20px;
}
.leftmenu-content li{
height: 30px;
line-height: 30px;
font-size: 11pt;
list-style: none;
padding-left: 8px;
background: url("http://ofjjubwp5.bkt.clouddn.com/image/png/img48.jpg") no-repeat;
background-position:right;
}
.leftmenu-content li:hover{
height: 28px;
line-height: 28px;
border: 1px solid #DDD;
border-right: none;
box-shadow: 0 0 8px #DDD;
background-image: none;
background-color: white;
}
.leftmenu-content li a {
text-decoration: none;
color: #313131
}
.leftmenu-content li a:hover{
text-decoration: underline;
font-weight: bold;
color: #e4393c;
}
.leftmenu-content .left-menu-line{
height: 30px;
line-height: 30px;
border: 1px solid #313131;
margin: 0 6px;
}
.leftmenu-content li:hover .submenu{
display: block;
}
.submenu{
display: none;
width: 715px;
height: 220px;
position: absolute;
border: 1px solid #DDD;
margin-left: 208px;
margin-top: -28px;
background-color: white;
box-shadow: 0 0 8px #DDD;
}
.submenu span{
display: block;
width: 4px;
height: 27px;
background-color: white;
float: left;
margin-left: -2px;
z-index: 1;
}
.submenu-left{
background-color: white;
width: 490px;
float: left;
margin: 5px;
}
.submenu-left dl{
border-bottom: 1px solid #aaa;
display: block;
overflow: hidden;
}
.submenu-left dl dt{
display: block;
height: 22px;
line-height: 22px;
width: 60px;
float: left;
text-align: right;
margin-top: 4px;
padding-right: 6px;
}
.submenu-left dl dt a{
color: #e4393c;
text-decoration: underline;
font-size: 10pt;
font-weight: bold;
}
.submenu-left dl dd{
display: block;
float: left;
border-left: 1px solid #CCC;
color: #737373;
font-size: 9pt;
height: 14px;
line-height: 14px;
padding: 0 8px;
margin: 8px 0;
}
.submenu-right{
float: left;
margin: 5px;
width: 200px;
height: 200px;
}
.submenu-right a img{
display: block;
width: 150px;
height: 70px;
margin: 5px auto;
}
</style>
</head>
<body>
<div class="leftmenu">
<ul class="leftmenu-content">
<div class="leftmenu-head">全部商品分类</div>
<li><a href="">家用电器</a>
<div class="submenu">
<span></span>
<div class="submenu-left">
<dl>
<dt><a href="">电视</a></dt>
<dd><a href="">合资品牌</a></dd>
<dd><a href="">国产品牌</a></dd>
<dd><a href="">互联网品牌</a></dd>
</dl>
<dl>
<dt><a href="">空调</a></dt>
<dd><a href="">挂壁式空调</a></dd>
<dd><a href="">柜式空调</a></dd>
<dd><a href="">中央空调</a></dd>
<dd><a href="">空调配件</a></dd>
</dl>
<dl>
<dt><a href="">洗衣机</a></dt>
<dd><a href="">滚筒式洗衣机</a></dd>
<dd><a href="">洗烘一体机</a></dd>
<dd><a href="">迷你洗衣机</a></dd>
</dl>
</div>
<div class="submenu-right">
<a href="">
<img src="http://ofjjubwp5.bkt.clouddn.com/image/jpg/avatar.jpg" alt="">
</a>
<a href="">
<img src="http://ofjjubwp5.bkt.clouddn.com/image/jpg/avatar.jpg" alt="">
</a>
</div>
</div>
</li>
<li><a href="">手机</a><span class="left-menu-line"></span><a href="">运营商</a><span class="left-menu-line"></span><a href="">数码</a>
<div class="submenu">
<span></span>
<div class="submenu-left">
<dl>
<dt><a href="">电视</a></dt>
<dd><a href="">合资品牌</a></dd>
<dd><a href="">国产品牌</a></dd>
<dd><a href="">互联网品牌</a></dd>
</dl>
<dl>
<dt><a href="">空调</a></dt>
<dd><a href="">挂壁式空调</a></dd>
<dd><a href="">柜式空调</a></dd>
<dd><a href="">中央空调</a></dd>
<dd><a href="">空调配件</a></dd>
</dl>
<dl>
<dt><a href="">洗衣机</a></dt>
<dd><a href="">滚筒式洗衣机</a></dd>
<dd><a href="">洗烘一体机</a></dd>
<dd><a href="">迷你洗衣机</a></dd>
</dl>
</div>
<div class="submenu-right">
右侧推荐品牌
</div>
</div>
</li>
<li><a href="">电脑办公</a>
<div class="submenu">
<span></span>
<div class="submenu-left">
<dl>
<dt><a href="">电视</a></dt>
<dd><a href="">合资品牌</a></dd>
<dd><a href="">国产品牌</a></dd>
<dd><a href="">互联网品牌</a></dd>
</dl>
<dl>
<dt><a href="">空调</a></dt>
<dd><a href="">挂壁式空调</a></dd>
<dd><a href="">柜式空调</a></dd>
<dd><a href="">中央空调</a></dd>
<dd><a href="">空调配件</a></dd>
</dl>
<dl>
<dt><a href="">洗衣机</a></dt>
<dd><a href="">滚筒式洗衣机</a></dd>
<dd><a href="">洗烘一体机</a></dd>
<dd><a href="">迷你洗衣机</a></dd>
</dl>
</div>
<div class="submenu-right">
右侧推荐品牌
</div>
</div>
</li>
</ul>
</div>
</body>
使用 JavaScript 修改鼠标悬浮的效果
实现方法是，将原来的 hover 修改的效果写在一个新类里面，在出发 mouseover 事件后，绑定该类以触发显示效果。
如下面代码所示，鼠标触发的效果在 lihover 这个类中，当 li 出发 mouseover 事件后，使用 className 动态添加样式类。
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.leftmenu{
display: block;
width: 220px;
border: 2px solid #e4393c;
margin-left: 20px;
}
.leftmenu-head{
background-color: #e4393c;
color: white;
font-size: 11pt;
font-weight: bold;
height: 40px;
line-height: 40px;
padding-left: 20px;
}
.leftmenu-content li{
height: 30px;
line-height: 30px;
font-size: 11pt;
list-style: none;
padding-left: 8px;
background: url("http://ofjjubwp5.bkt.clouddn.com/image/png/img48.jpg") no-repeat;
background-position:right;
}
.leftmenu-content li a {
text-decoration: none;
color: #313131
}
.leftmenu-content li a:hover{
text-decoration: underline;
font-weight: bold;
color: #e4393c;
}
.leftmenu-content .left-menu-line{
height: 30px;
line-height: 30px;
border: 1px solid #313131;
margin: 0 6px;
}
.leftmenu-content .lihover .submenu{
display: block;
}
.leftmenu-content .lihover{
height: 28px;
line-height: 28px;
border: 1px solid #DDD;
border-right: none;
box-shadow: 0 0 8px #DDD;
background-image: none;
background-color: white;
}
.submenu{
display: none;
width: 715px;
height: 220px;
position: absolute;
border: 1px solid #DDD;
margin-left: 208px;
margin-top: -28px;
background-color: white;
box-shadow: 0 0 8px #DDD;
}
.submenu span{
display: block;
width: 4px;
height: 27px;
background-color: white;
float: left;
margin-left: -2px;
z-index: 1;
}
.submenu-left{
background-color: white;
width: 490px;
float: left;
margin: 5px;
}
.submenu-left dl{
border-bottom: 1px solid #aaa;
display: block;
overflow: hidden;
}
.submenu-left dl dt{
display: block;
height: 22px;
line-height: 22px;
width: 60px;
float: left;
text-align: right;
margin-top: 4px;
padding-right: 6px;
}
.submenu-left dl dt a{
color: #e4393c;
text-decoration: underline;
font-size: 10pt;
font-weight: bold;
}
.submenu-left dl dd{
display: block;
float: left;
border-left: 1px solid #CCC;
color: #737373;
font-size: 9pt;
height: 14px;
line-height: 14px;
padding: 0 8px;
margin: 8px 0;
}
.submenu-right{
float: left;
margin: 5px;
width: 200px;
height: 200px;
}
.submenu-right a img{
display: block;
width: 150px;
height: 70px;
margin: 5px auto;
}
</style>
<script>
window.onload = function(){
var lists = document.getElementsByClassName("leftmenu-content")[0].getElementsByTagName("li"),
i, len;
for(i=0,len = lists.length; i<len; i++){
lists[i].onmouseover = function(){
var This = this
console.log(This.className);
This.className = "lihover";
}
lists[i].onmouseout = function(){
var This = this;
console.log(This.className);
This.className = null;
}
}
}
</script>
</head>
<body>
<div class="leftmenu">
<ul class="leftmenu-content">
<div class="leftmenu-head">全部商品分类</div>
<li><a href="">家用电器</a>
<div class="submenu">
<span></span>
<div class="submenu-left">
<dl>
<dt><a href="">电视</a></dt>
<dd><a href="">合资品牌</a></dd>
<dd><a href="">国产品牌</a></dd>
<dd><a href="">互联网品牌</a></dd>
</dl>
<dl>
<dt><a href="">空调</a></dt>
<dd><a href="">挂壁式空调</a></dd>
<dd><a href="">柜式空调</a></dd>
<dd><a href="">中央空调</a></dd>
<dd><a href="">空调配件</a></dd>
</dl>
<dl>
<dt><a href="">洗衣机</a></dt>
<dd><a href="">滚筒式洗衣机</a></dd>
<dd><a href="">洗烘一体机</a></dd>
<dd><a href="">迷你洗衣机</a></dd>
</dl>
</div>
<div class="submenu-right">
<a href="">
<img src="http://ofjjubwp5.bkt.clouddn.com/image/jpg/avatar.jpg" alt="">
</a>
<a href="">
<img src="http://ofjjubwp5.bkt.clouddn.com/image/jpg/avatar.jpg" alt="">
</a>
</div>
</div>
</li>
<li><a href="">手机</a><span class="left-menu-line"></span><a href="">运营商</a><span class="left-menu-line"></span><a href="">数码</a>
<div class="submenu">
<span></span>
<div class="submenu-left">
<dl>
<dt><a href="">电视</a></dt>
<dd><a href="">合资品牌</a></dd>
<dd><a href="">国产品牌</a></dd>
<dd><a href="">互联网品牌</a></dd>
</dl>
<dl>
<dt><a href="">空调</a></dt>
<dd><a href="">挂壁式空调</a></dd>
<dd><a href="">柜式空调</a></dd>
<dd><a href="">中央空调</a></dd>
<dd><a href="">空调配件</a></dd>
</dl>
<dl>
<dt><a href="">洗衣机</a></dt>
<dd><a href="">滚筒式洗衣机</a></dd>
<dd><a href="">洗烘一体机</a></dd>
<dd><a href="">迷你洗衣机</a></dd>
</dl>
</div>
<div class="submenu-right">
右侧推荐品牌
</div>
</div>
</li>
<li><a href="">电脑办公</a>
<div class="submenu">
<span></span>
<div class="submenu-left">
<dl>
<dt><a href="">电视</a></dt>
<dd><a href="">合资品牌</a></dd>
<dd><a href="">国产品牌</a></dd>
<dd><a href="">互联网品牌</a></dd>
</dl>
<dl>
<dt><a href="">空调</a></dt>
<dd><a href="">挂壁式空调</a></dd>
<dd><a href="">柜式空调</a></dd>
<dd><a href="">中央空调</a></dd>
<dd><a href="">空调配件</a></dd>
</dl>
<dl>
<dt><a href="">洗衣机</a></dt>
<dd><a href="">滚筒式洗衣机</a></dd>
<dd><a href="">洗烘一体机</a></dd>
<dd><a href="">迷你洗衣机</a></dd>
</dl>
</div>
<div class="submenu-right">
右侧推荐品牌
</div>
</div>
</li>
</ul>
</div>
</body>
</html>