您的位置：首页 > Web前端 > JavaScript
HTML+CSS+JavaScript实现简易下拉菜单

2016-09-14 16:17 639 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉列表</title>
<link rel="stylesheet" href="css/reset.css" type="text/css">
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
background: #333;
font: 16px/32px "微软雅黑";
}
#box{
width: 500px;
height: 326px;
border: 3px solid #000;
background: #ffffff;
/*margin: 40px auto;*/
/*本身是一个层*/
position: absolute;
left: 50%;
top:50%;
margin: -163px 0 0 -250px;
}
.province{
width: 320px;
height: 42px;
background: #c00;
margin: 80px auto;
position: relative;
}
.province strong{
width: 64px;
height: 42px;
line-height: 42px;
display: block;
float: left;
color: #ffffff;
padding-left: 10px;
}
#selectProvince{
display: block;
float: left;
width: 200px;
height: 28px;
background: #ffffff url("image/province_sprites.png") no-repeat 190px 1px;
margin-top: 7px;
padding-left: 8px;
color: #ccc;
cursor: pointer;
}
#allProvince{
width: 318px;
height: auto;
line-height: 30px;
clear: both;
position: absolute;
top: 42px;
left: 0;
background: #ffffff;
border: 1px solid #dfdfdf;
display: none;
z-index: 101;
}
#allProvince li{
height: 30px;
border-bottom: 1px solid #dfdfdf;
}
#allProvince li b{
font-weight: bold;
width: 40px;
/**/
display: inline-block;
text-align: center;
}
#allProvince li span{
padding-right: 15px;
cursor: pointer;

}
#allProvince li span:hover{
color: #c00;
}
#layer{
width: 100%;
height: 100%;
background: #fff;
position: absolute;
top:0;
left: 0;
z-index: 100;
filter: alpha(opacity=0);
opacity: 0;
display: none;
}
.show{
color: #cccccc;
background-position: 190px -17px;
}
.hide{
color: #000;
background-position: 190px 1px;
}
</style>
</head>
<body>
<div id="box">
<div class="province">
<strong>送货至:</strong>
<span id="selectProvince">北京</span>
<ul id="allProvince">
<li><b>A</b><span>安徽</span><span>安阳</span></li>
<li><b>B</b><span>北京</span></li>
<li><b>C</b><span>重庆</span></li>
<li><b>D</b><span>东北</span></li>
<li><b>F</b><span>福建</span></li>
<li><b>N</b><span>南京</span></li>
<li><b>G</b><span>广东</span><span>广西</span></li>
<li><b>T</b><span>天津</span></li>
<li><b>H</b><span>湖南</span><span>河南</span><span>黑龙江</span></li>
<li><b>Z</b><span>郑州</span></li>
<li><b>S</b><span>上海</span><span>山东</span></li>
</ul>
</div>
</div>
<div id="layer">

</div>
<script type="text/javascript">
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
function getDOM(id) {
return document.getElementById(id);
}
function showProvince() {
getDOM("selectProvince").onclick=showAllProvince;
getDOM("layer").onclick=function () {
hideAllProvince();
};
}
function showAllProvince() {
getDOM("allProvince").style.display="block";
getDOM("layer").style.display="block";
getDOM("selectProvince").className="show";
setectProvice();
}
function hideAllProvince() {
getDOM("allProvince").style.display="none";
getDOM("layer").style.display="none";
getDOM("selectProvince").className="hide";
}
function setectProvice() {
var pro=getDOM("allProvince").getElementsByTagName("li");
var links;
for (var i=0;i<pro.length;i++){
links=pro[i].getElementsByTagName("span");
for (var j=0;j<links.length;j++){
links[j].onclick=function () {
getDOM("selectProvince").innerHTML=this.innerHTML;
hideAllProvince();
}
}
}
}
addLoadEvent(showProvince);
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航