下拉列表是网页中最为常见的结构之一,这里暂时采用两种方式:纯CSS的方法和JavaScript的方法来实现。
(PS:其实,除了下拉列表以外,还有很多在网页中使用频率较高的结构,可以自己编写好常用的代码段,以便在项目中使用提高效率。)
1、纯CSS实现:
先看看效果图:
HTML的代码很简单,就不多说了。
这里用CSS实现注意伪类和display属性的使用就好:
下拉列表
这里是纯CSS实现的下拉列表
.css {width:100%; height:30px; background-color:#ccccff; }
.css ul {list-style-type:none; font-weight:bold;}
.css ul li {float:left; border:0px black solid; position: relative;}
.css ul li a {text-decoration:none; height:20px; width:80px; background-color:#afafaf; color:white; text-align:center; float:left; padding:5px; margin-right:1px; }
.css ul li a:hover {background-color:#12aeef}
.css ul li ul {display:none; }
.css ul li:hover ul {display:block; position:absolute; top:30px; left:-40px; width:120px; z-index:5;}
.css ul li:hover li a {background:#12aeef; color:#ffffff; width: 80px; text-align:center; margin:0px;}
.css ul li:hover li a:hover {background:#6dc7ec; color:#ffffff; }
2、用JavaScript来实现:
同样,还是先上图:
HTML和上面的差不多,同时引入外部js文件:
rel="stylesheet" type="text/css" href="listStyle.css" >
<script src="function.js" ></script>
下拉列表
这里是JS实现的下拉列表
重要的是js文件怎么写。鼠标移动到列表项时,调用mOver( )和mOut( )方法改变当前下拉列表的display属性,实现列表下拉(当列表项有很多时,传递参数不太现实。所以其实可以用this关键字来实现,这里等以后有时间再改善吧):
function mOver(i)
{
Y = document.getElementById("aList"+i);
Y.style.backgroundColor = "#12aeef";
X = document.getElementById("list"+i);
X.style.display = "block";
}
function mOut(i)
{
Y = document.getElementById("aList"+i);
Y.style.backgroundColor = "#afafaf";
X = document.getElementById("list"+i);
X.style.display = "none";
}
这个结构实现的方式其实有很多种,代码也可以继续完善,这里只是展示一下实现的思路。