Web前端开发实战5：导航菜单(二)
最后更新于：2022-04-01 10:03:25
### 四.伸缩菜单之垂直方向
制作原理：我们还是在原来的水平导航菜单的基础上加以改变CSS样式实现导航菜单的伸缩变化。最简单的方法还是使用CSS样式的方法实现，制作菜单的方法很多，找到适合自己的即可。
代码：
~~~
<span style="font-size:18px;"><!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=gb2312" />
<title>导航菜单</title>
<style type="text/css">
/*CSS全局设置*/
*{
margin:0;
padding:0;
font-size:18px;
font-family:"微软雅黑";
}
.nav{
height:50px;
margin-top:20px;
margin-left:10px;
}
.nav ul{
list-style:none;
height:50px;
border-bottom:10px solid #FF6600;
padding-left:30px;
}
.nav li{
float:left;
margin-top:10px;
}
.nav li a{
background-color:#EEEEEE;
text-decoration:none;
color:#000000;
display:block;
width:90px;
height:40px;
line-height:40px;
text-align:center;
margin-left:1px;
}
.nav li a:hover,.nav li a.on{
background-color:#FF6600;
color:#FFFFFF;
/*伸缩变换设置高度变化*/
height:60px;
/*和使用负值向反方向移动*/
margin-top:-10px;
line-height:60px;
}
</style>
</head>
<body>
<div id="nav" class="nav">
<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>
</div>
</body>
</html>
</span>
~~~
效果展示：
初始化状态或鼠标离开的状态：
鼠标放在相应的元素上的状态：
### 五.伸缩菜单之水平方向(JavaScript方法)
制作原理：我们还是上述菜单的基础上加以改变CSS样式实现导航菜单的伸缩变化。由于这种伸缩变化相对麻烦我们使用JS或jQuery来实现。
代码：
~~~
<span style="font-size:18px;"><!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=gb2312" />
<title>导航菜单</title>
<style type="text/css">
/*CSS全局设置*/
*{
margin:0;
padding:0;
font-size:18px;
font-family:"微软雅黑";
}
.nav{
height:50px;
margin-top:20px;
margin-left:10px;
}
.nav ul{
list-style:none;
height:50px;
border-bottom:10px solid #FF6600;
padding-left:30px;
}
.nav li{
float:left;
margin-top:10px;
}
.nav li a{
background-color:#EEEEEE;
text-decoration:none;
color:#000000;
display:block;
width:90px;
height:40px;
line-height:40px;
text-align:center;
margin-left:1px;
}
.nav li a:hover,.nav li a.on{
background-color:#FF6600;
color:#FFFFFF;
}
</style>
<script type="text/javascript">
window.onload=function(){
var aLists=document.getElementsByTagName("a");
//遍历每个li元素
for(var i=0;i<aLists.length;i++){
aLists[i].onmouseover=function(){
var that=this;
//清除定时器
clearInterval(this.time);
//设置定时器
that.time=setInterval(function(){
that.style.width=that.offsetWidth+8+"px";
if(that.offsetWidth>=120){
clearInterval(that.time);
}
},30)
}
aLists[i].onmouseout=function(){
clearInterval(this.time);
var that=this;
that.time=setInterval(function(){
that.style.width=that.offsetWidth-8+"px";
if(that.offsetWidth<=90){
that.offsetWidth="90px";
clearInterval(that.time);
}
},30)
}
}
}
</script>
</head>
<body>
<div id="nav" class="nav">
<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>
</div>
</body>
</html>
</span>
~~~
效果展示：
初始化状态或鼠标离开的状态：
鼠标放在相应的元素上的状态：
### 六.伸缩菜单之水平方向(jQuery方法)
和上面使用JavaScript方法实现的区别是：
~~~
<span style="font-size:18px;"><!--引用百度服务器的jQuery库-->
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
//使用jQuery库中的hover()方法实现鼠标放上去和离开时触发事件
$("a").hover(
function(){
//使用jQuery库中的animate()方法实现菜单伸缩动画变换
$(this).stop().animate({"width":"120px"},200);
},
function(){
//使用jQuery库中的animate()方法实现菜单伸缩动画变换
$(this).stop().animate({"width":"90px"},200);
}
)
})
</script></span>
~~~
效果还是和上面的一模一样的。