基本的导航条的制作

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>




已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页