大家好，又见面了，我是你们的朋友全栈君。
1、垂直导航条的制作
一想到导航菜单就会想到用 ul li无序列表来制作。因为他的语义非常接近条目性的内容。
<ul class="nav">
<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>
给导航条加上css装饰
*{ margin:0; padding:0; font-size:14px; } //这里做了一个基本的样式清除，并且设置初始的文字大小为14px;ul{ list-style:none; width:100px; } //list-style:none;是为了清除条目前的那个圆点 li{ height:30px; line-height:30px; width:100px; background-color:#f60; margin-bottom:1px; padding-left:10px;} //padding-left:10px是为了让文字向右移动10个像素，但是li的宽度也会增加10个像素，这里推荐用text-indent:10px;文本缩进10个像素a{text-decoration:none; display:block; height:30px; line-height:30px; width:100px; background-color:#f60; margin-bottom:1px; padding-left:10px;a:hover{ background-color:#f60; color:#0000;} //这个是鼠标经过的样式效果如图所示：
2、水平菜单的制作
垂直菜单只需要将水平菜单中设置为float:left就可。
li{ float:left;}效果图如图所示：
3、圆角菜单的制作
通过设置背景，改变外观样式，通过a:hover,可以为菜单增加交互效果
先看一个圆角背景的贴图，图片的宽120px 高60px 分为上下两个部分，上面部分为默认状态，下面黄色部分为鼠标经过的时候的状态。
最终效果图：
代码如图：
<style type="text/css">
*{margin:0; padding:0; font-size:14px;}
a{color:#333;text-decoration:none}
.nav{list-style:none; height:30px; border-bottom:10px solid #F60; margin-top:20px; padding-left:50px;} .nav li{float:left}.nav li a{display:block; height:30px;text-align:center; line-height:30px; width:120px; background:url(images/btnBg.png); margin-left:1px;}.nav li a.on, .nav li a:hover{ background-position:0 -30px; color:#fff;}
</style>
</head>
<body>
<ul class="nav">
<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>原理：并不是将原来的矩形通过代码变成的圆角矩形，而是借助刚刚那个圆角图片，通过移动图片的位置，让人们在视觉上认为，变成了圆角矩形。 还有关于background-position:0 -30px;
背景图片宽120px，高60px，但a标签的高度只有30px，所以默认状态下背景图片只显示了上半部分，然后通过background-position来移动背景图片左右不变为0，希望上移一半所以是-30px，所以hour状态实际就变成显示下半部分，所以就变色了~ 所以我们只看到了下面的橙色矩形。
将首页设置为了超链接状态
首页 标签设置了class=“on”，css样式表中.on{ }里边的设置就一直生效，所以移到其他标签上首页也不还原，想要还原要用到js
4、通过js对导航条进行伸缩变换
改变高度的伸缩
效果图：这里只需改变a:hover鼠标经过时候的状态即可
.on,a:hover{ color:#fff; background-color:#f60; height:40px; margin-top:-10px;} 因为图片的宽度是30px 这里设置的是当鼠标经过的时候高度变为40px 但是如果不加 margin-top:-10px的时候增加的高度是在往下延伸，而不是向上延伸
注意：margin可以取负值，使他沿着相反的方向移动
改变宽度的伸缩
<style type="text/css">
*{margin:0; padding:0; font-size:14px;}
a{color:#333;text-decoration:none}
.nav{list-style:none; height:30px; border-bottom:10px solid #F60; margin-top:20px; padding-left:50px;}
.nav li{float:left}
.nav li a{display:block; height:30px;text-align:center; line-height:30px; width:80px; background:#efefef; margin-left:1px;}
.nav li a.on, .nav li a:hover{background:#F60;color:#fff; }
</style>
<script> window.οnlοad=function(){ var oNav=document.getElementsByTagName('ul')[0]; //将a标签选择出来， var aA=oNav.getElementsByTagName('a'); for(var i=0; i<aA.length; i++){ //遍历每个a标签 aA[i].οnmοuseοver=function(){ //在鼠标经过每个a标签的时候，设置出现的动画事件 if(this.className!="on"){ clearInterval(this.timer); var This=this; //将当前的那个对象取出来 This.time=setInterval(function(){ //然后建立定时器 This.style.width=This.offsetWidth+8+"px"; //当前的宽度，加上变宽的速度 if(This.offsetWidth>=120) //当大于这么多的时候就不在增加 clearInterval(This.time); },30) //30表示每30毫秒运行一下 } } aA[i].οnmοuseοut=function(){ if(this.className!="on"){ clearInterval(this.time); var This=this; this.time=setInterval(function(){ This.style.width=This.offsetWidth-8+"px"; if(This.offsetWidth<=80){ This.style.width='80px'; clearInterval(This.time); } },30) } } } }
</script>
</head>
<body>
<ul class="nav">
<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>版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/163152.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...