菜单向上拉html,模拟select控件,CSS上拉菜单
模拟select控件,CSS下拉菜单
模拟select控件
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(http://www.codefans.net/jscss/demoimg/201206/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;}
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";
};
};
请选择游戏名称
搜索
- QQ炫舞
- 穿越火线
- 地下城与勇士
- 热血江湖
- 大话西游II
- QQ幻想世界
菜单向上拉html,模拟select控件,CSS上拉菜单相关推荐
- html下拉列表插件,js+CSS实现模拟华丽的select控件下拉菜单效果
本文实例讲述了js+CSS实现模拟select控件的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一个JS+CSS技术实现的Select控件效果,模拟出来的,比默认的Select更漂亮,有了这个 ...
- elementui树状菜单tree_Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)...
这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单 输入过滤框 以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...
- 一个WinForm记事本程序(包含主/下拉/弹出菜单/打开文件/保存文件/打印/页面设置/字体/颜色对话框/剪切版操作等等控件用法以及记事本菜单事件/按键事件的具体代码)...
(一).说明 功能类似Windows 操作系统自带的记事本. 一个WinForm记事本程序(包含主/下拉/弹出 菜单/打开保存对话框等控件用法以及记事本菜单事件的具体代码) (二).图片示例 (三) ...
- Matlab App Designer自学笔记(十四):分档旋钮控件、下拉菜单控件、微调控件
由于一些主观及客观的原因,博主已经放弃了在CSDN上更新文章,感兴趣的朋友可以去我的个人博客去浏览可能需要的文章. 陶小桃Blog-无限进步的优质帅气大学生!热衷于分享技术和日常生活的机械专业小哥哥, ...
- html下拉列表框做日期,几种常用的控件(下拉框 可选框 起止日期 在HTML页面直接读取当前时间)...
下拉框 状态 ----请选择---- 制单 已提交 已审核 可选框 value="Y" checked="checked" id="isValid&q ...
- HTML select控件
select控件 select控件用于创建下拉列表框(下拉菜单),并通过 option 元素创建列表中的选项,供用户从中选择. 定义 select控件时,在 select元素中设置 name 属性,并 ...
- Selenium处理Select控件
Selenium处理Select控件 1.介绍: 在进行Web应用自动化测试的过程中,Select下拉框是我们经常会操作的控件,Selenium针对这种控件封装了Select类供我们测试使用.当然,也 ...
- elemtnui select控件结合树形控件 实现自定义搜索方法
业务需求: 可以从下拉框中选择数据,也可以自定义搜索. 前端效果: 1:从下拉框中选择 2:自定义搜索 3:单选并赋值:也就是选中那个就回显那个 代码实现: 1.首先需要用到select控件和tree ...
- c#模拟看板控件_ComponentOne for Winform
WinForm UI 控件集 WinForm UI 控件集 快速创建直观.现代的 Windows 窗体应用程序 ComponentOne for WinForm 控件集为 WinForm 应用程序提供 ...
最新文章
- Scala函数的调用过程分析
- .net core ocelot 获取路由的mothed_Net Core微服务入门全纪录(四)Ocelot网关(上)
- Dubbo 版 Swagger 来啦!
- SAP Spartacus UnitDetailsComponent的路由跟踪
- 如何使用c#编写单片机程序
- c语言if不能判断u8变量值,C语言变量名命规则.doc
- bsp模型适用于图计算_【论文解读】目标检测之RFBnet模型
- github(GitHub Flavored Markdown)
- 用自己电脑做服务器,建个人网站
- 创业失败三年后,这个曾经的富二代变得一无所有
- is running beyond physical memory limits. Current usage: 2.0 GB of 2 GB physical memory used; 2.6 GB
- 深入学习Spring框架(二)- 注解配置
- java能否回文_如何使用Java查找字符串是否是回文?
- 敲7(升级版约瑟夫)
- 7.3 环境(Condition)
- mysql 重建表空间_表空间瘦身之重建表
- 【Java】 环境变量如何配置?
- Samba使用大全(绝对经典)
- 收货了!2019年为你精选的十款最佳外置硬盘
- 如何导出带有dn值的栅格影像(方便arcgis处理)
热门文章
- Android辅助开发工具说明
- 重装系统后删除Cygwin的安装文件
- POJ 1458 Common Subsequence DP LCS 最长公共子序列
- “模板”学习笔记(7)-----数组模板+对象数组举例
- 案例:演示out对象的使用及原理分析
- 如何插卡虚拟机 mysql_怎么在虚拟机中搭建mysql服务器
- python调用函数怎么错_在Python中从类调用函数时参数数目错误
- mysql amoeba 事务_MySQL基于Amoeba实现读写分离
- html与js二级菜单横排,JavaScript实现横向滑出的多级菜单效果
- 【安利UI设计师】电商购物移动应用程序界面设计UI套件包,轻松完成项目需求。