您的位置：首页 > 其它

七彩导航栏的制作（一）

2015-07-12 23:05 127 查看

简介：彩色的导航十分具有视觉美感，简约时尚，比较适合于童儿网站，女性网站等页面的导航。

功能：每一个栏目对应一个颜色，当鼠标移动到对应栏目时，该栏目突出显示，并同时改变下方横线的颜色。

实现：

1.导航栏用ul列表实现，横向显示通过 li{float:left} 实现；

2.列表项li和a标签通过 display：block；来设置显示方式为块状元素；

3.通过li和a标签的高度 height：40px;和行高line-height:40px;来实现hover效果

4.导航栏底部的横线通过ul的 border-bottom 的设置来实现；

5.底部横线随栏目颜色变化而变化通过ul的类名来实现，即当鼠标移到a标签上，执行函数改变ul的类名，并在css代码中定义对应类的样式（颜色等），每一个a标签对应一个函数

这里的实现方法思路简单，但是代码量比较大，在下一节的随笔中将展示另一种更简单的改变样式的方法。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nav</title>
</head>

<style type="text/css">
*{margin: 0;padding: 0;}
#nav{margin-top: 50px}
body{background-image: url(1.jpg);}
.bar0,.bar1,.bar2,.bar3,.bar4,.bar5,.bar6{list-style: none;height:48px;padding-left: 123px;width:900px;}
.bar0{border-bottom: 10px solid #F8A0A0;}
.bar1{border-bottom: 10px solid #FFD699;}
.bar2{border-bottom: 10px solid #FFFFCC;}
.bar3{border-bottom: 10px solid #CCFFE0;}
.bar4{border-bottom: 10px solid #BBFFFF;}
.bar5{border-bottom: 10px solid #99C2FF;}
.bar6{border-bottom: 10px solid #E0CCFF;}

li{float: left;}
li a{text-decoration: none;padding:5px;display: block;line-height: 25px;width: 100px;
color: black;font-size: 17px;text-align: center;
border-radius:8px 8px 0 0;margin-left: 1px;margin-top: 12.5px;}

#l0:hover,#l1:hover,#l2:hover,#l3:hover,#l4:hover,#l5:hover,#l6:hover
{height: 40px;margin-top: 2.5px;line-height: 40px;background-color: #F8A0A0;color: white;}
</style>
<body>
<center>
<!-- div#nav>ul>li*5>a[href="#"]{links $} -->
<div id="nav">
<ul class="bar0">
<li ><a id="l0" href="#" style="background-color:#F8A0A0;" onmouseover="ch0()">links 0</a></li>
<li ><a id="l1" href="#" style="background-color:#FFD699;" onmouseover="ch1()">links 1</a></li>
<li ><a id="l2" href="#" style="background-color:#FFFFCC;" onmouseover="ch2()">links 2</a></li>
<li ><a id="l3" href="#" style="background-color:#CCFFE0;" onmouseover="ch3()">links 3</a></li>
<li ><a id="l4" href="#" style="background-color:#BBFFFF;" onmouseover="ch4()">links 4</a></li>
<li ><a id="l5" href="#" style="background-color:#99C2FF;" onmouseover="ch5()">links 5</a></li>
<li ><a id="l6" href="#" style="background-color:#E0CCFF;" onmouseover="ch6()">links 6</a></li>
</ul>
</div>
</center>

<script type="text/javascript">
function ch0(){
var p1 = document.getElementsByTagName("ul");
p1[0].className = "bar0";
}

function ch1(){
var p1 = document.getElementsByTagName("ul");
p1[0].className = "bar1";
}

function ch2(){
var p1 = document.getElementsByTagName("ul");
p1[0].className = "bar2";
}

function ch3(){
var p1 = document.getElementsByTagName("ul");
p1[0].className = "bar3";
}

function ch4(){
var p1 = document.getElementsByTagName("ul");
p1[0].className = "bar4";
}

function ch5(){
var p1 = document.getElementsByTagName("ul");
p1[0].className = "bar5";
}

function ch6(){
var p1 = document.getElementsByTagName("ul");
p1[0].className = "bar6";
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航