css配合js模拟的select下拉框

css配合js模拟的select下拉框

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 *{margin:0; padding:0;}
 8 a{text-decoration:none;}
 9 .selectBox{width:300px; height:30px; position:relative; border:#09F solid 1px; margin:100px auto;}
10 .select_txt{width:100%; height:30px; font:14px/30px "Microsoft YaHei"; position:relative;}
11 .txt{padding:0 10px; font-size:14px; font-weight:normal;}
12 .sj{border-width:6px; border-color:#09F #FFFFFF #FFFFFF #FFFFFF; border-style:solid dashed dashed dashed; position:absolute; right:10px; top:12px; cursor:pointer;}
13 .select{border:#09F solid 1px; overflow:hidden; width:300px; position:absolute; left:-1px; top:30px; display:none;}
14 .select a{display:block; padding:0 10px; font:14px/2 "Microsoft YaHei";}
15 .select a:hover{background:#09F; color:#FFF;}
16 </style>
17 </head>
18 
19 <body>
20 <div class="selectBox">
21         <div class="select_txt">
22             <h3 class="txt" id="txt">文字部分</h3>
23         <span class="sj" id="sj"></span>
24     </div>
25     <div class="select" id="select">
26             <a href="javascript:;">首页</a>
27             <a href="javascript:;">关于我们</a>
28             <a href="javascript:;">联系我们</a>
29             <a href="javascript:;">关于我们</a>
30             <a href="javascript:;">联系我们</a>
31             <a href="javascript:;">联系我们</a>
32             <a href="javascript:;">联系我们</a>
33             <a href="javascript:;">联系我们</a>
34     </div>
35 </div>
36 <script>
37 (function(){
38         var oTxt = document.getElementById('txt');
39         var oSj = document.getElementById('sj');
40         var oSelect = document.getElementById('select');
41         var aA = oSelect.getElementsByTagName('a');
42         
43         oSj.onclick = function(ev)
44         {
45                 var oEvent = ev || event;
46                 oSelect.style.display = 'block';
47                 
48                 for(var i=0;i<aA.length;i++)
49                 {
50                         aA[i].onclick = function(ev)
51                         {
52                                 var oEvent = ev || event;
53                                 oTxt.innerHTML = this.innerHTML;
54                         }
55                         
56                 }
57                 
58                 oEvent.cancelBubble = true;
59         }
60         document.onclick = function(){oSelect.style.display = 'none';}
61         
62 })()
63 </script>
64 </body>
65 </html>