js+CSS实现模拟华丽的select控件下拉菜单效果
本文实例讲述了js+CSS实现模拟select控件的下拉菜单效果。分享给大家供大家参考。具体如下：
这是一个JS+CSS技术实现的Select控件效果，模拟出来的，比默认的Select更漂亮，有了这个模板，你修改Select就更方便了，由此你也可以将其制作成CSS下拉菜单，在兼容性方面暂未测试，在IE8下没问题。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-css-select-control-style-codes/
具体代码如下：
<!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>
希望本文所述对大家的javascript程序设计有所帮助。
相关推荐
-
JS+CSS 制作的超级简单的下拉菜单附图
先看效果: 代码: 复制代码 代码如下: <html> <head> <title>Good Test</title> <script> function showSubMenu(SubMenu) { document.getElementById(SubMenu).style.display = "inline"; } function HideSubMenu(SubMenu) { document.getElementB
-
js,jq,css多方面实现简易下拉菜单功能
效果图预览 一 .css实现 html代码部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>html+css下拉菜单</title> <link rel="stylesheet" type="text/css" href="css/style.css" rel="e
-
一个css与js结合的下拉菜单支持主流浏览器
首先声明: 本人虽然在web前端岗位干了好多年,但无奈岗位对技术要求不高.html,css用的比较多,JavaScript自己原创的很少,基本都是copy修改,所以自己真正动手写时,发现基础很不牢固,边学习边实践,收获很大. 效果图: 不废话了,贴码了 1.css代码 复制代码 代码如下: a:link{color:white;text-decoration:none;} a:visited{color:white;text-decorative:none;} a:hover{color:whi
-
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
利用struts2和Ajax实现json对象的传输,然后实现菜单的二级联动 下面是我的 js文件原码: 复制代码 代码如下: var mail={ //初始化 init:{ //初始化数据 initdata:{ did:'', ttitle:'', sendpassword:'', description:'' }, //初始化事件 initevent:{ DataEvent:function(){ $("#did").unbind("change");//获取一级
-
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
<!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-Typ
-
css+js下拉菜单
css菜单演示 0? " ": "") + "sfhover"; } sfEls[i].onMouseDown=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onMouseUp=function() { this.className+=(this.cla
-
jQuery获取json后使用zy_tmpl生成下拉菜单
第一次写关于AppCan开发的文章,有人写了关于jQuery或者原生Ajax与json的交互,那我就稍微写写我开发过程中使用jQuery获取json后使用zy_tmpl生成下拉菜单的实例吧. PHP服务端生成json的那部分就不写那么多了,就是输入一个数组$res,然后 复制代码 代码如下: echo $_GET['jsoncallback'] . "(" . json_encode($res) . ")"; 在AppCan的模版中,先加入一个下拉菜单,我的菜单是:
-
js+css实现超简洁的二级下拉菜单效果代码
本文实例讲述了js+css实现超简洁的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一个很简洁的CSS+JavaScript二级菜单,没有使用过多的修饰素材,尽量不调用外部图片,简洁大方,而且便于二级开发完善,最初是一个政府网站上的菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-2jxl-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//
-
js+CSS实现模拟华丽的select控件下拉菜单效果
本文实例讲述了js+CSS实现模拟select控件的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一个JS+CSS技术实现的Select控件效果,模拟出来的,比默认的Select更漂亮,有了这个模板,你修改Select就更方便了,由此你也可以将其制作成CSS下拉菜单,在兼容性方面暂未测试,在IE8下没问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-select-control-style-codes/ 具体代码如下:
-
js实现兼容性好的微软官网导航下拉菜单效果
本文实例讲述了js实现兼容性好的微软官网导航下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款微软官网导航菜单,兼容好的下拉菜单,微软官网导航效果,在IE6下没有动画效果,顺便也把IE6的效果给加上,兼容IE6.现在微软的官方网站正在使用,我觉得非常不错. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-microsoft-web-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-/
-
JS模拟bootstrap下拉菜单效果实例
本文实例讲述了JS模拟bootstrap下拉菜单效果.分享给大家供大家参考,具体如下: 模拟bootstrap下拉菜单 在工作中要切一个效果:点击导航栏,则出现下列菜单,但是当点击其他地方的时候,就隐藏子菜单,效果有点类似于bootstrap 的"下拉菜单" 由于bootstrap的子菜单的样式与设计不同,因此需要自己写一个类似的效果 当点击某个控件的时候,则显示出下拉菜单,但是,当点击空白的地方的时候怎么让其自动隐藏呢? 起初的想法,给body绑定一个onclick事件,当点击空白的
-
JS+CSS实现的经典圆角下拉菜单效果代码
本文实例讲述了JS+CSS实现的圆角下拉菜单效果代码.分享给大家供大家参考,具体如下: 相信不少朋友会喜欢这一款菜单,CSS+JS实现的圆角下拉菜单,没有使用任何修饰性的图片哦,圆角完全是用JS完成的,因此代码多了些,想使用的朋友把JS文件提取出来另存,这样更合理些. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-jd-cicle-style-button-demo/ 具体代码如下: <!DOCTYPE html PUBLIC &qu
-
最简单js代码实现select二级联动下拉菜单
本文实例为大家分享了js实现select二级联动下拉菜单,供大家参考,具体内容如下 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.
-
js实现select二级联动下拉菜单
本文实例为大家分享了js实现select二级联动下拉菜单,供大家参考,具体内容如下 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.
-
JavaScript模拟实现新浪下拉菜单效果
思考:首先在CSS布局上就出错了,导致后面设置JS时就有很大的问题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
-
AngularJS实现的select二级联动下拉菜单功能示例
本文实例讲述了AngularJS实现的select二级联动下拉菜单功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <script src="../script/angular.js"
-
AngularJS service之select下拉菜单效果
本文实例为大家分享了service之select下拉菜单效果的具体代码,供大家参考,具体内容如下 <!-- $watch:持续监听数据上的变化,更新界面 --> <!DOCTYPE html> <html lang="en" ng-app="myApp" ng-controller="myCtrl"> <head> <meta charset="utf-8"> <