css配合js模拟的select下拉框

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 <style>

 *{margin:0; padding:0;}

 a{text-decoration:none;}

 .selectBox{width:300px; height:30px; position:relative; border:#09F solid 1px; margin:100px auto;}

 .select_txt{width:100%; height:30px; font:14px/30px "Microsoft YaHei"; position:relative;}

 .txt{padding:0 10px; font-size:14px; font-weight:normal;}

 .sj{border-width:6px; border-color:#09F #FFFFFF #FFFFFF #FFFFFF; border-style:solid dashed dashed dashed; position:absolute; right:10px; top:12px; cursor:pointer;}

 .select{border:#09F solid 1px; overflow:hidden; width:300px; position:absolute; left:-1px; top:30px; display:none;}

 .select a{display:block; padding:0 10px; font:14px/2 "Microsoft YaHei";}

 .select a:hover{background:#09F; color:#FFF;}

 </style>

 </head>

 <body>

 <div class="selectBox">

         <div class="select_txt">

             <h3 class="txt" id="txt">文字部分</h3>

         <span class="sj" id="sj"></span>

     </div>

     <div class="select" id="select">

             <a href="javascript:;">首页</a>

             <a href="javascript:;">关于我们</a>

             <a href="javascript:;">联系我们</a>

             <a href="javascript:;">关于我们</a>

             <a href="javascript:;">联系我们</a>

             <a href="javascript:;">联系我们</a>

             <a href="javascript:;">联系我们</a>

             <a href="javascript:;">联系我们</a>

     </div>

 </div>

 <script>

 (function(){

         var oTxt = document.getElementById('txt');

         var oSj = document.getElementById('sj');

         var oSelect = document.getElementById('select');

         var aA = oSelect.getElementsByTagName('a');

         oSj.onclick = function(ev)

         {

                 var oEvent = ev || event;

                 oSelect.style.display = 'block';

                 for(var i=0;i<aA.length;i++)

                 {

                         aA[i].onclick = function(ev)

                         {

                                 var oEvent = ev || event;

                                 oTxt.innerHTML = this.innerHTML;

                         }

                 }

                 oEvent.cancelBubble = true;

         }

         document.onclick = function(){oSelect.style.display = 'none';}

 })()

 </script>

 </body>

 </html>

css配合js模拟的select下拉框的更多相关文章

  1. 利用css新属性appearance优化select下拉框

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. js&jquery 获取select下拉框的值、文本内容、自定义属性

      js&jquery 获取select下拉框的值.文本内容.自定义属性 CreationTime--2018年7月2日09点22分 Author:Marydon html <selec ...

  3. js如何获取select下拉框的value以及文本内容

    select下拉框在项目开发中是经常用到的,特别是在联级菜单方面的应用更为广泛.但是,对于一些初学者来说,如何获取下拉框子节点option的value值和文本内容,还是有一点难度的.其他的就不说了,现 ...

  4. div模拟实现select下拉框

    <!DOCTYPE html> <html> <head> <title></title> <style type="tex ...

  5. 非常实用的select下拉框-Select2.js

    在Web开发中,Select下拉框是常用的输入组件.由于原生的Select几乎很难通过CSS样式控制.一些好看的Select下拉框就只能通过模拟来实现.PHP程序员雷雪松给大家推荐一筐款不错的Sele ...

  6. 自定义样式的select下拉框深入探索

    第一个版本: 首先实现自定义select下拉框应该具有的功能,我是选择将原来的select隐藏掉,自己在jquery代码中动态写进去<dl><dd><dt>这样的结 ...

  7. 好看的Select下拉框是如何制造的

    现在在大多数网站中都能看到很华丽的Select下拉框,他们是如何实现的呢?使用默认select肯定是不好实现,我们可以使用div+js去模拟出来select的功能,并且又能很简单的去美化它. CSS代 ...

  8. jQuery插件实现select下拉框左右选择_交换内容（multiselect2side）

    效果图: 使用jQuery插件---multiselect2side做法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  9. select下拉框左右变换

    效果图: 使用jQuery插件---multiselect2side做法: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 ...

随机推荐

  1. Netty 中文教程 Hello World ！详解

    1.HelloServer 详解 HelloServer首先定义了一个静态终态的变量---服务端绑定端口7878.至于为什么是这个7878端口,纯粹是笔者个人喜好.大家可以按照自己的习惯选择端口.当然 ...

  2. Wmware桥接网络虚拟机无法上网的问题

    之前装好的一个虚拟机,安装到本地的Wmware workstation的时候,发现无法上网. 虚拟机使用的是桥接模式:一开始怀疑IP被占用,修改后发现不起作用.    排查所有的网络配置,发现都没有问 ...

  3. IntelliJ IDEA 15 部署Tomcat及创建一个简单的Web工程

    一.部署Tomcat 二.创建一个简单的Web工程 2.1创建一个新工程 创建一个新工程 设置JDK及选择Web Application (创建的是Web工程) 点击Next,选择工作空间,起个工程名 ...

  4. 如何深入理解 StatsD 与 Graphite ？

    众所周知,StatsD 负责收集并聚合测量值.之后,它会将数据传给 Graphite,后者以时间序列为依据存储数据,并绘制图表.但是,我们不知道,基于 http 访问的图表在展示时,是基于每秒钟的请求 ...

  5. CentOS中实现Nginx负载均衡和反向代理

    一.安装必要软件 负载均衡服务器:IP设置为192.168.1.10 Web服务器1:安装Apache或者Nginx,IP设置为192.168.1.11: Web服务器2:安装Apache或者Ngin ...

  6. trie树--详解

    文章作者:yx_th000 文章来源:Cherish_yimi (http://www.cnblogs.com/cherish_yimi/) 转载请注明,谢谢合作.关键词:trie trie树 数据结 ...

  7. UVA 10246 Asterix and Obelix

    题意:每个城市举办庆祝有一定的花费,A在路径上会选择庆祝花费最大的城市 让你求,A回家所花的路费和庆祝费最少,也就是说并不是最短路径就是结果, 还有可能就是路费比最短路径的多,但是庆祝费就比它的少,总 ...

  8. 51Nod 有限背包计数问题 题解报告

    首先这道题理论上是可以做到O(nlogn)的,因为OEIS上有一个明显可以用多项式乘法加速的式子 但是由于模数不是很兹磁,所以导致nlogn很难写 在这里说一下O(n*sqrt(n))的做法 首先我们 ...

  9. 移植 FFMPEG-2.2.4 -（编译）

    源码下载:http://www.ffmpeg.org/download.html编译安装: http://trac.ffmpeg.org/wiki/CompilationGuide/Ubuntu su ...

  10. ArcGIS 10.1 for Desktop新特性之地理标记照片

    转自:http://blog.csdn.net/esrichinacd/article/details/7730825 地理标记照片是指带有地理位置信息的照片,通常通过内置GPS的数码相机或智能手机拍 ...