js模拟实现select下拉菜单代码实例

快乐打工仔 分类:实例代码

自带的select下拉菜单的美观度还是逊色很多的。

往往不能够满足实际应用的需要,下面就分享一个使用原生js模拟实现的下拉菜单。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
* {
padding: 0;
margin: 0;
font-size: 13px;
font-family: "微软雅黑";
}
li {
list-style: none;
}
#main {
width: 200px;
position: relative;
margin: 80px auto;
}
#main cite {
display: block;
height: 24px;
width: 164px;
border: 1px solid #000;
font-style: normal;
line-height: 24px;
padding-left: 4px;
padding-right: 30px;
}
#main cite:before {
content: '';
height: 0;
width: 0;
position: absolute;
right: 7px;
bottom: 7px;
border-width: 4px;
border-style: solid;
border-color: #888 transparent transparent transparent;
cursor: pointer;
transition: all 0.2s;
-webkit-transition: all 0.2s;
-o-transition: all 0.2s;
-moz-transition: all 0.2s;
transform-origin: 50% 25%;
-webkit-transform-origin: 50% 25%;
-o-transform-origin: 50% 25%;
-moz-transform-origin: 50% 25%;
}
.select cite:before {
transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
#main ul {
width: 198px;
border: 1px solid #000;
background: #fff;
position: absolute;
margin-top: -1px;
overflow: hidden;
display: none;
}
#main ul li {
height: 24px;
line-height: 24px;
}
#main ul li a {
text-decoration: none;
color: #333;
display: block;
padding-left: 10px;
padding-right: 10px;
}
.speed_fast {
animation-duration: 0.2s;
-webkit-animation-duration: 0.2s;
-o-animation-duration: 0.2s;
-moz-animation-duration: 0.2s;
}
.animated {
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
-o-animation-fill-mode: both;
-moz-animation-fill-mode: both;
}
.anim_down {
animation-name: down;
-webkit-animation-name: down;
-o-animation-name: down;
-moz-animation-name: down;
}
@keyframes down {
0% {
border-bottom-color: transparent;
height: 0;
}
100% {
border-bottom-color: #333;
height: 144px;
}
}
@-webkit-keyframes down {
0% {
border-bottom-color: transparent;
height: 0;
}
100% {
border-bottom-color: #333;
height: 144px;
}
}
@-o-keyframes down {
0% {
border-bottom-color: transparent;
height: 0;
}
100% {
border-bottom-color: #333;
height: 144px;
}
}
@-moz-keyframes down {
0% {
border-bottom-color: transparent;
height: 0;
}
100% {
border-bottom-color: #333;
height: 144px;
}
}
@-ms-keyframes down {
0% {
border-bottom-color: transparent;
height: 0;
}
100% {
border-bottom-color: #333;
height: 144px;
}
}
</style>
<script>
window.onload = function() {
var box = document.getElementById("main"),
cite = box.getElementsByTagName("cite")[0],
menu = box.getElementsByTagName("ul")[0],
as = box.getElementsByTagName("a"),
index = -1;
//每个li的背景颜色
function restA() {
for (var i = 0; i < as.length; i++) {
as[i].style.background = "#fff";
}
}
//初始效果
function restM() {
box.className = "";
menu.className = "";
menu.style.display = "none";
index = -1;
restA();
}
//为cite加上点击事件(ul下拉框出现)
cite.onclick = function(event) {
event = event || window.event;
event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;
if (box.className == "select") {
restM();
} else {
box.className = "select";
menu.className = "anim_down animated speed_fast";
menu.style.display = "block";
}
}
//为每个li加上点击与鼠标滑过的事件
for (var i = 0; i < as.length; i++) {
as[i].onmouseover = function() {
restA();
this.style.background = "#ccc";
index = this.getSetAttribute("selectid") - 1;
}
as[i].onclick = function() {
restM();
cite.innerHTML = this.innerHTML;
}
}
//点击其他地方ul下拉框消失
document.onclick = function() {
restM();
}
}
</script>
</head>
<body>
<div id="main">
<cite>请选择分类</cite>
<ul>
<li><a href="javascript:;" selectid="1">HTML5</a></li>
<li><a href="javascript:;" selectid="2">CSS</a></li>
<li><a href="javascript:;" selectid="3">CSS3</a></li>
<li><a href="javascript:;" selectid="4">Javascript</a></li>
<li><a href="javascript:;" selectid="5">犀牛前端部落</a></li>
<li><a href="javascript:;" selectid="6">jQuery</a></li>
</ul>
</div>
</body>
</html>

js模拟实现select下拉菜单代码实例,这样的场景在实际项目中还是用的比较多的,关于js模拟实现select下拉菜单代码实例就介绍到这了。

js模拟实现select下拉菜单代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容