自定义下拉菜单（选项有图片和注释）

来源：互联网发布：北京医院网络文案招聘编辑：程序博客网时间：2024/05/17 00:59

CSS Code

01/* UI Object */
select{position:relative;z-index:1000;width:300px;font-family:'돋움',dotum;font-size:12px}
select ul,.select li,.select dl,.select dt,.select dd,.select p{margin:0;padding:0}
select li{list-style:none}
select .select_label{height:12px;padding:4px 17px 3px 5px;border:1px solid #6e706f;border-right-color:#d4d5d7;border-bottom-color:#d4d5d7;background:#fff url(img/bu_arr_label.gif) no-repeat 100% 0;line-height:12px;cursor:pointer;_cursor:hand}
select .select_label span{display:block;overflow:hidden;width:100%;white-space:nowrap;text-overflow:ellipsis}
select .select_layer{display:none;position:absolute;top:19px;left:0;width:100%;z-index:1000;background:#fff}
select .select_layer ul{border:1px solid #d4d5d7;border-left-color:#6e706f;border-top:0;padding:1px 2px 2px}
select .select_layer ul li{display:inline-block;width:100%;vertical-align:top}
select .select_layer ul li dl dt{display:block;*display:inline-block;overflow:hidden;width:100%;margin-top:1px;color:#666;line-height:100%;cursor:pointer;_cursor:hand}
select .select_layer ul li dl dt span{display:block;overflow:hidden;padding:4px 3px 3px;white-space:nowrap}
select .select_layer ul li dl{position:relative}
select .select_layer ul li dl dd{display:none;position:absolute;top:-2px;left:100%;margin-left:-5px;padding-left:14px;background:url(img/bu_arr_tooltip.gif) no-repeat 10px -1px;color:#fff;line-height:15px}
select .select_layer ul li dl dd p{padding:4px;border:1px solid #333;border-left:0;background:#4d4d4d;white-space:nowrap}
select .select_layer ul li dl dd img{vertical-align:top}
select .select_layer ul li.on dl dd{display:block}
select .select_layer ul li.on dl dt{background:#eee;color:#000}
18/* //UI Object */

HTML Code

01<!-- UI Object -->
02<div class="select" style="width:120px">
03             
04    <div id="select_label" class="select_label">
05        <span>선택하세요</span>
06    </div>
07     
08    <div id="select_layer" class="select_layer">
09     
10        <ul>
11        <li>
12            <dl>
13            <dt><span>그레이트 피레니즈</span></dt>
14            <dd>
15                <p>하얀놈</p>
16            </dd>
17            </dl>
18        </li>
19        <li>
20            <dl>
21            <dt><span>골든 레트리버</span></dt>
22            <dd>
23                <p>누런놈</p>
24            </dd>
25            </dl>
26        </li>
27        <li>
28            <dl>
29            <dt><span>말라뮤트</span></dt>
30            <dd>
31                <p>무서운놈</p>
32            </dd>
33            </dl>
34        </li>
35        <li>
36            <dl>
37            <dt><span>허스키</span></dt>
38            <dd>
39                <p>멋있는놈</p>
40            </dd>
41            </dl>
42        </li>
43        <li>
44            <dl>
45            <dt><span>치와와</span></dt>
46            <dd>
47                <p><img src="img/temp.jpg" width="300" height="100" alt="쪼끄만 놈"></p>
48            </dd>
49            </dl>
50        </li>
51        </ul>
52         
53    </div>
54     
55</div>
56<!-- //UI Object -->

JavaScript Code

view source
print?
01<script type="text/javascript">
02/* UI Pattern Script */
03// 액션만 구현해 둔 테스트용 스크립트
04function selectBoxAction() {
05    var label, layer, li;
06    label = document.getElementById("select_label");
07    layer = document.getElementById("select_layer");
08    li = layer.getElementsByTagName("LI");
09    label.onclick = function() {
10        layer.style.display = (layer.style.display != "block") ? "block" :"none";
11    }
12    for (var i=0;i<li.length;i++) {
13        li[i].onmouseover = function() { this.className = "on" }
14        li[i].onmouseout = function() { this.className = "" }
15        li[i].onclick = function() {
16            label.getElementsByTagName("SPAN")[0].childNodes[0].nodeValue = this.getElementsByTagName("DT")[0].childNodes[0].childNodes[0].nodeValue;
17            layer.style.display = "none";
18        }
19    }
20}
21selectBoxAction();
22/* //UI Pattern Script */
23</script>