js+CSS实现模拟华丽的select控件下拉菜单效果
2015-09-02 11:53
801 查看
<!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>
CSS3和Html5
图表与图形
表单验证
导航菜单
table选项卡
视频播放器
日期和时间
返回顶部
图层代码
滚动代码
幻灯片
文字特效
图片放大镜
juqery焦点图
瀑布流
广告悬浮代码
在线客服
网页导航菜单
时间倒计时
Jquery教程
wap手机网站教程
javascript教程
CSS3教程
网页基础
php
html
图片表情
手机网站模板
CSS3动画
html5 Canvas画布
相关文章推荐
- CSS 最核心的几个概念
- 【技术】css换行&不换行
- CSS制作图片水平垂直居中
- 简单实用的纯CSS百分比圆形进度条插件
- CSS实现底部固定
- 如何用CSS画三角形
- div动态设置样式
- CSS3 简易照片墙
- 常用CSS备忘
- [CSS] @keyframes
- 【转载】[CSS] CSS position 觀念筆記心得
- 推荐 10 个超棒的 CSS3 代码生成工具
- table表格边框的设置
- css3 2D转换(2D Transform) 动画(Animation)
- CSS实现内容超过长度后以省略号显示
- CSS 遮照层的使用
- CSS中的position
- CSS3——transform学习
- 深入讲解CSS中盒模型的用法
- css实现带箭头选项卡