all

패밀리 사이트 Select 디자인 링크

알 수 없는 사용자 2010. 3. 15. 15:09

[원본 - http://naradesign.net/wp/2010/02/18/1192/] 수정
DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

jQuery Link
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>

Script
jQuery(function($){
 
 // Common
 var select_root = $('div.select');
 var select_value = $('.myValue');
 var select_a = $('div.select>ul>li>a');
 var select_input = $('div.select>ul>li>input[type=radio]');
 var select_label = $('div.select>ul>li>label');
 
 // Radio Default Value
 $('div.myValue').each(function(){
  var default_value = $(this).next('ul').find('label:first').text();
  $(this).append(default_value);
 });
 
 // Line
 select_value.focusin(function(){$(this).addClass('outLine');});
 select_value.focusout(function(){$(this).removeClass('outLine');});
 select_input.focusin(function(){$(this).parents('div.select').children('div.myValue').addClass('outLine');});
 select_input.focusout(function(){$(this).parents('div.select').children('div.myValue').removeClass('outLine');});
 
 // Show
 function show_option(){
  $(this).parents('div.select:first').toggleClass('open');
 }
 
 // Hover
 function i_hover(){
  $(this).parents('ul:first').children('li').removeClass('hover');
  $(this).parents('li:first').toggleClass('hover');
 }
 
 // Hide
 function hide_option(){
  var t = $(this);
  setTimeout(function(){
   t.parents('div.select:first').removeClass('open');
  }, 1);
 }
 
 // Set Input
 function set_label(){
  var v = $(this).next('label').text();
  $(this).parents('ul:first').prev(select_value).text('').append(v);
  $(this).parents('ul:first').prev(select_value).addClass('selected');
 }
 
 // Set Anchor
 function set_anchor(){
  var v = $(this).text();
  $(this).parents('ul:first').prev(select_value).text('').append(v);
  $(this).parents('ul:first').prev(select_value).addClass('selected');
 }

 // Anchor Focus Out
 $('*:not("div.select a")').focus(function(){
  select_root.removeClass('open');
 });
   
 select_value.click(show_option);
 select_root.removeClass('open');
 select_root.mouseleave(function(){$(this).removeClass('open');});
 select_a.click(set_anchor).click(hide_option).focus(i_hover).hover(i_hover);
 select_input.change(set_label).focus(set_label);
 select_label.hover(i_hover).click(hide_option);
 
});

CSS
/* Select */
.clear { clear:both; }
.select { position:relative; line-height:normal; display:inline-block; *display:inline; vertical-align:middle; *zoom:1; }
.select * { margin:0; padding:0; cursor:pointer; font-size:11px; font-family:Tahoma, Sans-serif; }
.select .myValue { position:relative; z-index:2; left:0; top:0; border:1px solid #DBD7C4; color:#797979; line-height:16px; _line-height:normal; text-align:left; overflow:visible; background:transparent; }
.select button.myValue { height:18px; width:100%; text-indent:5px; *text-indent:0; *padding-left:5px; }
.select ul { position:absolute; top:17px; left:0; width:100%; list-style:none; border:0; border-top:1px solid #DBD7C4; border-bottom:1px solid #DBD7C4; background:#fff; 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:16px; border-left:1px solid #DBD7C4; border-right:1px solid #DBD7C4; }
.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:16px; line-height:16px; color:#767676; background:#fff; }
.select li a { display:block; text-indent:8px; *text-indent:6px; height:16px; line-height:16px; color:#767676; background:#fff; text-decoration:none; }
.select li.hover * { background:#999; color:#fff; }
.type1 { width:200px; background:#fff url(../images/select/arrow1.gif) no-repeat right 2px; }
.type2 { width:200px; background:#32302E url(../images/select/arrow2.gif) no-repeat right 4px; }
.type2 .myValue {border-color:#32302E; color:#C1BE94; }
.type2 ul {border-top:1px solid #32302E; border-bottom:1px solid #32302E; }
.type2 li {border-left:1px solid #32302E; border-right:1px solid #32302E; }

HTML
<div class="type1 select open">
 <button type="button" class="myValue">Select Link</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>
<br class="clear" />
<br /><br /><br />
<div class="type2 select open">
 <button type="button" class="myValue">Select Link</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>

Image Sources



Snapshots


[원본 - http://naradesign.net/wp/2010/02/18/1192/] 수정