js+CSS实现模拟华丽的select控件下拉菜单效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>模拟select控件</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 \5fae\8f6f\96c5\9ed1;}

#search,#search form,#search .box,#search .select,#search a{background:url(images/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 i = 0;

 oSelect.onclick = function (event)

 {

  var style = oSub.style;

  style.display = style.display == "block" ? "none" : "block";

  //阻止事件冒泡

  (event || window.event).cancelBubble = true

 };

 for (i = 0; i < aLi.length; i++)

 {

  //鼠标划过

  aLi[i].onmouseover = function ()

  {

   this.className = "hover"

  };

  //鼠标离开

  aLi[i].onmouseout = function ()

  {

   this.className = "";

  };

  //鼠标点击

  aLi[i].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>大话西游II</li>

 <li>QQ幻想世界</li>

 </ul>

</div>

</body>

</html>

js+CSS实现模拟华丽的select控件下拉菜单效果的更多相关文章

Atitit.ui控件---下拉菜单选择控件的实现select html
Atitit.ui控件---下拉菜单选择控件的实现select html 1. 调用& model的实现 1 2. -----select.jsp------ 1 1. 调用& m ...
C# winfrom Datagridview控件下拉菜单
拖拽一个datagridview放在界面,编辑列把下来菜单那列ColumnType设置成DataGridViewComboBoxColumn 然后在数据一栏的Items可以写下来菜单的内容也可以后台代 ...
html/css 实现下拉菜单效果
demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
android控件下拉刷新pulltorefresh
外国人写的下拉刷新控件,我把他下载下来放在网盘,有时候訪问不了github 支持各种控件下拉刷新 ListView.ViewPager.WevView.ExpandableListView.GridV ...
基于vue.js实现远程请求json的select控件
基本思路前端把需要的参数类型编码传到后台,后台返回相应的参数列表json,前端利用vue渲染select控件具体实现前端代码 <select v-model="template. ...
纯CSS实现带小角的对话框式下拉菜单
最近公司首页样式重写,头部下拉菜单改为了带小角的对话框式下拉菜单: 很多人可能会用图片,事实上纯CSS就能够实现: HTML: <!DOCTYPE html> <html lang= ...
select标签（下拉菜单和列表）
下拉菜单和列表标签: <select> <option value="..." >选项</option> <option value=&q ...
组件 layui 常用控件下拉框的应用
下拉框的显示样式: 针对下拉框的绑定等操作时,在最后务必调用一次 form.render(); 1.基本定义: <div class="layui-form-item"> ...
wpf中dropdownButton控件下拉居中。。。
设置模版中popup控件的HorizontalOffset属性来控制居中. 还是对popup控件不熟,折腾了一会.

随机推荐

[leetcode]_Maximum Depth of Binary Tree
第三道树的题目,我还是不会,我擦,怎么递归算法还是不能很好理解.看来还得好好研究下递归算法. 题目:求一棵树的最大深度. 思路:递归地求取左子树最大深度和右子树最大深度,返回较大值即为整棵树的 ...
.NET程序员爱上网站[整理]
1.博客园(代码改变世界) http://www.cnblogs.com 2.开源中国社区(开源软件发现.使用和交流平台) http://www.oschina.net 3.CSDN(中国最大的IT社 ...
使用junit进行Spring测试
这几天在做SpringMVC的项目,现在总结一下在测试的时候碰到的一些问题. 以前做项目,是在较新的MyEclipse(2013)上面进行Maven开发,pom.xml 文件是直接复制的,做测试的时候 ...
【MySql】5.6.14版本的安装和测试
当前状态:apache2.4.6和php5.5.6已经安装成功: mysql的安装和测试: 一.安装mysql5.6.14,参考http://wenku.baidu.com/link?url=_0jk ...
Nginx安装第二步手动下载依赖包
nginx可以使用各平台的默认包来安装,本文是介绍使用源码编译安装,包括具体的编译参数信息. 正式开始前,编译环境gcc g++ 开发库之类的需要提前装好,这里默认你已经装好. ububtu平台编译环 ...
DIV JS CSS 轻量级弹出层兼容各浏览器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
python学习第二天第一部分
备注:写程序不能写重复性的代码学习内容:数据类型.for循环.while循环.字符编码.文件处理一.for循环 1.简单的for循环 for i in range(10): # 此处意思为:循环r ...
hdu 1277 全文检索
题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=1277 全文检索 Description 我们大家经常用google检索信息,但是检索信息的程序是很困难 ...
android开发系列之消息机制
最近接触到一个比较有挑战性的项目,我发现里面使用大量的消息机制,现在这篇博客我想具体分析一下:android里面的消息到底是什么东西,消息机制到底有什么好处呢? 其实说到android消息机制,我们可 ...
android开发中经常遇到的问题汇总
大家都在为项目开发成功而喜悦,但可不知成功的路上是会经常出错的,下面是我碰到的一些错误集合! [错误信息] [2011-01-19 16:39:10 - ApiDemos] WARNING: Appl ...

js+CSS实现模拟华丽的select控件下拉菜单效果

js+CSS实现模拟华丽的select控件下拉菜单效果的更多相关文章

随机推荐

热门专题