//================== CSS코드 ===================//
/* Select */ .select{ position:relative; line-height:normal; display:inline-block; *display:inline; vertical-align:middle; background:#2e2e2e; *zoom:1;} .select *{ margin:0; padding:0; cursor:pointer; font-size:12px; font-family:Tahoma, Sans-serif;} .select .myValue{ position:relative; z-index:2; left:0; top:0; border:1px solid #404040; margin:1px; color:#fff; line-height:19px; _line-height:normal; padding-top:4px; text-align:left; overflow:visible; background:transparent;}.select .myValue.selected{ font-weight:bold;} .select.open .myValue, .select .myValue.outLine{ border:1px solid #999;} .select button.myValue{ height:24px; width:100%; text-indent:5px; *text-indent:0; *padding-left:5px;} .select div.myValue{ height:19px; text-indent:8px;} .select .ctrl{ position:absolute; top:0; right:0; width:23px; height:24px; border:1px solid #2e2e2e; border-left:1px solid #2e2e2e; background:#2e2e2e;} .select .arrow{ position:absolute; width:0; height:0; top:11px; right:9px; line-height:0; font-size:0; border-top:5px solid #999; border-left:5px solid #2e2e2e; border-right:5px solid #2e2e2e;} .select ul{ top:24px; left:0; width:100%; list-style:none; border:0; border-top:1px solid #2e2e2e; border-bottom:1px solid #2e2e2e; background:#2e2e2e; overflow:hidden;} .select ul.aList{ display:none;} .select.open ul.aList{ display:block;} .select ul.iList{ left:-2000%;} .select.open ul.iList{ left:0;} .select li{ position:relative; overflow:hidden; white-space:nowrap; height:18px; border-left:1px solid #404040; border-right:1px solid #404040;} .select li input.option{ position:absolute; width:100%; height:20px; line-height:20px;} .select li label{ position:absolute; left:0; top:0; width:100%; text-indent:8px; *text-indent:6px; height:18px; line-height:18px; color:#767676; background:#fff;} .select li a{ display:block; text-indent:8px; *text-indent:6px; height:18px; line-height:18px; color:#767676; background:#fff; text-decoration:none;} .select li.hover *{ background:#999; color:#fff;}
//================== HTML 코드 ===================//
<div class="select open" style="width:136px;"> <span class="ctrl"><span class="arrow"></span></span> <button type="button" class="myValue">지역CVB</button> <ul class="aList"> <li><a href="#1">Link_1</a></li> <li><a href="#2">Link_2</a></li> <li><a href="#3">Link_3</a></li> </ul> </div>
//================== 자바스크립트 코드 ===================//
'IT' 카테고리의 다른 글
[PhotoShop]Beautiful Winter Scenery (0) | 2012.05.25 |
---|---|
[j-Query/Navigation] Gnb / 탭메뉴 스크립트。 (0) | 2012.05.23 |
[Javascript/Floating] 따라다리는 퀵메뉴 스크립트。 (0) | 2012.05.23 |
[Javascript/배너] 하단 롤링 배너 스크립트。 (0) | 2012.05.23 |
[Typography]Don't Worry. Be Happy。 (0) | 2012.05.23 |