JavaScript 模拟美化select下拉菜单

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

本章节分享一段代码实例,它实现了模拟select下拉菜单的效果。

由于自带的select下拉菜单效果基本不堪入目,所以在一些美观度要求较高的网站使用此方式也是迫不得已。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
html,body{
  height:100%;
  overflow:hidden;
}
body,div,form,h2,ul,li{
  margin:0;
  padding:0;
}
ul{list-style-type:none;}
body{
  background:#23384e;
  font:12px/1.5 faef6fc5ed1;
}
#search,#search form,#search .box,#search .select,#search a{
  background:url(img/search.jpg) no-repeat;
}
#search,#search .box,#search form{height:34px;}
#search{
  position:relative;
  width:350px;
  margin:10px auto;
}
#search .box{
  background-position:right 0;
}
#search form{
  background-repeat:repeat-x;
  background-position:0 -34px;
  margin:0 20px 0 40px;
}
#search .select{
  float:left;
  color:#fff;
  width:190px;
  height:22px;
  cursor:pointer;
  margin-top:4px;
  line-height:22px;
  padding-left:10px;
  background-position:0 -68px;
}
#search a{
  float:left;
  width:80px;
  height:24px;
  color:#333;
  letter-spacing:4px;
  line-height:22px;
  text-align:center;
  text-decoration:none;
  background-position:0 -90px;
  margin:4px 0 0 10px;
}
#search a:hover{
  color:#f60;
  background-position:-80px -90px
;}
#search .sub{
  position:absolute;
  top:26px;
  left:40px;
  color:#fff;
  width:198px;
  background:#2b2b2b;
  border:1px solid #fff;
  display:none;
}
#search .sub li{
  height:25px;
  line-height:24px;
  cursor:pointer;
  padding-left:10px;
  margin-bottom:-1px;
  border-bottom:1px dotted #fff;
}
#search .sub li.hover{background:#8b8b8b;}
</style>
<script type="text/javascript">
window.onload = function () {
  var oSelect = document.getElementsByTagName("span")[0];
  var oSub = document.getElementsByTagName("ul")[0];
  var aLi = oSub.getElementsByTagName("li");
  var index = 0;
  oSelect.onclick = function (ev) {
    var style = oSub.style;
    style.display = style.display == "block" ? "none" : "block";
    //阻止事件冒泡
    ev ? ev.stopPropagation() : window.event.cancelBubble = true
  };
  for (index = 0; index < aLi.length; index++) {
    //鼠标划过
    aLi[index].onmouseover = function () {
      this.className = "hover"
    };
    //鼠标离开
    aLi[index].onmouseout = function () {
      this.className = "";
    };
    //鼠标点击
    aLi[index].onclick = function () {
      oSelect.innerHTML = this.innerHTML
    }
  }
  document.onclick = function () {
    oSub.style.display = "none";
  };
};
</script>
</head>
<body>
<div id="search">
  <div class="box">
    <form>
      <span class="select">请选择游戏名称</span>
      <a href="javascript:;">搜索</a>
    </form>
  </div>
  <ul class="sub">
    <li>地下城与勇士</li>
    <li>魔兽世界(国服)</li>
    <li>魔兽世界(台服)</li>
    <li>前端教程网</li>
    <li>pipipi.net</li>
    <li>QQ幻想世界</li>
  </ul>
</div>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).window.onload = function () {},当文档内容完全加载完毕再去执行函数中的代码。

(2).var oSelect = document.getElementsByTagName("span")[0],获取第一个集合中的第一个span元素。

(3).var oSub = document.getElementsByTagName("ul")[0],获取集合中的第一个ul元素。

(4).var aLi = oSub.getElementsByTagName("li"),获取li元素集合。

(5).var index = 0,声明一个变量并赋初值为0,后面会用到。

(6).oSelect.onclick = function (ev) {},注册click事件处理函数。

(7).var style = oSub.style,获取存储各种样式的一个对象,并赋值给变量style,这样就不用每次oSub.style.xxx这样的写了,这样每次都是重新从oSub对象中获取样式对象,对性能有影响。

(8).style.display = style.display == "block" ? "none" : "block",如果当前显示,那么就隐藏,繁殖就显示。

(9).ev ? ev.stopPropagation() : window.event.cancelBubble = true,阻止事件冒泡,为什么要阻止下面会介绍。

(10).for (index = 0; index < aLi.length; index++) {},批量注册事件处理函数,实现当鼠标悬浮或者离开下拉菜单栏目的时候背景颜色发生改变效果。

(11).document.onclick = function () {

  oSub.style.display = "none";

};,为document注册事件处理函数,当点击页面除了span元素,都会隐藏二级导航菜单。

如果上面不阻止冒泡行为,那么下来菜单永远无法展现。

二.相关阅读:

(1).getElementsByTagName()可以参阅document.getElementsByTagName()一章节。

(2).三元运算符可以参阅三元运算符用法详解一章节。

(3).兼容所有浏览器的阻止冒泡功能可以参阅兼容低版本IE浏览器的阻止事件冒泡效果代码一章节。

(4).onmouseover事件可以参阅javascript mouseover事件一章节。

(5).className可以参阅js className一章节。

(6).innerHTML可以参阅js innerHTML一章节。

完整代码下载:JavaScript 模拟美化select下拉菜单模拟select.rar

回复

我来回复
  • 暂无回复内容