<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
height:100%;
background:black;
}
.box{
width:296px;
height:30px;
background: url(img/box.png);
border-radius:5px;
margin:0 auto;
}
.se{
width:35px;
height:30px;
background:url(img/search.jpg);
background-position:-1px 0px;
border-radius:5px;
float:left;
}
.txt{
width:180px;
height:20px;
border-radius:5px;
float:left;
margin-top:5px;
cursor:pointer;
color:white;
font-size:12px;
line-height:20px;
text-indent:5px;
overflow:hidden;
}
.gamefirst{
border-radius:5px;
background:url(img/search.jpg);
background-position:-18px -68px;
margin:0;
}
.game{
width:180px;
height:20px;
font-size:12px;
line-height:20px;
text-indent:5px;
color:black;
background: #b8b8b8;
margin:0;
border-bottom:1px dashed white;
}
.game:hover{
background:gray;
color:white;
}
.btn{
width: 70px;
height:18px;
float:left;
background: white;
font-size:12px;
text-align: center;
margin-top:6px;
margin-left:5px;
border-radius:5px;
}
.btn:hover{
background:red;
color:white;
cursor:pointer;
}
</style>
</head>
<body>
<div class="box">
<div class="se"></div>
<div class="txt" id="TXT">
<p class="gamefirst" id="gameFirst">请选择游戏名称</p>
<p class="game">地下城与勇士</p>
<p class="game">魔兽世界(国服)</p>
<p class="game">魔兽世界(台服)</p>
<p class="game">热血江湖</p>
<p class="game">英雄联盟</p>
<p class="game">QQ飞车</p>
<p class="game">穿越火线</p>
</div>
<div class="btn">搜索</div>
</div>
</body>
</html>
<script type="text/javascript">
var gameFirst = document.getElementById("gameFirst");
var game = document.getElementsByClassName("game");
var txt = document.getElementById("TXT");
gameFirst.onclick=function(evt){
TXT.style.overflow="visible";
var e = evt || event;
e.stopPropagation?e.stopPropagation():e.cancelBubble = true;
}
for(var i=0; i<game.length; i++){
game[i].index = i
game[i].onclick=function(){
TXT.style.overflow="hidden";
gameFirst.innerText=game[this.index].innerText;
}
}
document.onclick=function(){
TXT.style.overflow="hidden";
}
</script>
js下拉菜单
最新推荐文章于 2021-01-28 20:12:50 发布