본문 바로가기

IT

[j-Query/셀렉트] 패밀리 사이트(링크) 스크립트。

 

//================== CSS코드 ===================//

/* Select */
.selectposition:relativeline-height:normaldisplay:inline-block; *display:inlinevertical-align:middlebackground:#2e2e2e; *zoom:1;}
.select *margin:0padding:0cursor:pointerfont-size:12pxfont-family:Tahoma, Sans-serif;}
.select .myValueposition:relativez-index:2left:0top:0border:1px solid #404040margin:1pxcolor:#fffline-height:19px;
 _line-height:normalpadding-top:4pxtext-align:leftoverflow:visiblebackground:transparent;}

.select .myValue.selectedfont-weight:bold;} .select.open .myValue, .select .myValue.outLineborder:1px solid #999;} .select button.myValueheight:24pxwidth:100%text-indent:5px; *text-indent:0; *padding-left:5px;} .select div.myValueheight:19pxtext-indent:8px;} .select .ctrlposition:absolutetop:0right:0width:23pxheight:24pxborder:1px solid #2e2e2eborder-left:1px solid #2e2e2ebackground:#2e2e2e;} .select .arrowposition:absolutewidth:0height:0top:11pxright:9pxline-height:0font-size:0border-top:5px solid #999border-left:5px solid #2e2e2eborder-right:5px solid #2e2e2e;} .select ultop:24pxleft:0width:100%list-style:noneborder:0border-top:1px solid #2e2e2eborder-bottom:1px solid #2e2e2ebackground:#2e2e2eoverflow:hidden;} .select ul.aListdisplay:none;} .select.open ul.aListdisplay:block;} .select ul.iListleft:-2000%;} .select.open ul.iListleft:0;} .select liposition:relativeoverflow:hiddenwhite-space:nowrapheight:18pxborder-left:1px solid #404040border-right:1px solid #404040;} .select li input.optionposition:absolutewidth:100%height:20pxline-height:20px;} .select li labelposition:absoluteleft:0top:0width:100%text-indent:8px; *text-indent:6pxheight:18pxline-height:18pxcolor:#767676background:#fff;} .select li adisplay:blocktext-indent:8px; *text-indent:6pxheight:18pxline-height:18pxcolor:#767676background:#ffftext-decoration:none;} .select li.hover *background:#999color:#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>

//================== 자바스크립트 코드 ===================//

select.js

jquery-latest.js