<script type=text/javascript src="http://code.jquery.com/jquery-latest.js" jQuery="87"></script>
<script type=text/javascript jQuery="88">
jQuery(function($){
// Common
var select_root = $('div.select');
var select_value = $('.my_value');
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.my_value').each(function(){
var default_value = $(this).next('.i_list').find('input[checked]').next('label').text();
$(this).append(default_value);
});
// Line
select_value.bind('focusin',function(){$(this).addClass('outLine')});
select_value.bind('focusout',function(){$(this).removeClass('outLine')});
select_input.bind('focusin',function(){$(this).parents('div.select').children('div.my_value').addClass('outLine')});
select_input.bind('focusout',function(){$(this).parents('div.select').children('div.my_value').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('.my_value').text('').append(v);
$(this).parents('ul:first').prev('.my_value').addClass('selected');
}
// Set Anchor
function set_anchor(){
var v = $(this).text();
$(this).parents('ul:first').prev('.my_value').text('').append(v);
$(this).parents('ul:first').prev('.my_value').addClass('selected');
}
// Anchor Focus Out
$('*:not("div.select a")').focus(function(){
$('.a_list').parent('.select').removeClass('open');
});
select_value.click(show_option);
select_root.removeClass('open');
select_root.focus(function(){$(this).removeClass('open')});
select_a.click(i_hover).focus(i_hover).hover(i_hover);
select_input.focus(set_label);
select_label.click(hide_option);
});
//select_value.click(show_option);
//select_root.removeClass('open');
// select_root.mouseleave(function(){$(this).removeClass('open')});
//select_a.click(set_anchor).focus(i_hover).hover(i_hover);
//select_input.change(set_label).focus(set_label);
//select_label.hover(i_hover).click(hide_option);
//});
</script>
<style>
.select{ display:inline-block; *display:inline; position:relative; background:#fff; line-height:normal; vertical-align:middle; *zoom:1}
.select *{ margin:0; padding:0; font-size:12px; font-family:Tahoma, Sans-serif; cursor:pointer}
.select .my_value{ overflow:visible; position:relative; top:0; left:0; z-index:2; border:1px solid #bababa; background:transparent; color:#666; text-align:left; line-height:19px; _line-height:normal}
.select .my_value.selected{ font-weight:bold}
.select.open .my_value,
.select .my_value.outLine{ border:1px solid #999}
.select p.my_value{ width:100%; height:21px; *padding-left:5px; text-indent:5px; *text-indent:0}
.select div.my_value{ height:19px; text-indent:8px}
.select ul{ overflow:hidden; position:absolute; top:20px; left:0; width:100%; border:0; border-top:1px solid #bababa; border-bottom:1px solid #bababa; background:#fff; list-style:none}
.select ul.a_list{ display:none}
.select.open ul.a_list{ display:block}
.select ul.i_list{ left:-2000%}
.select.open ul.i_list{ left:0}
.select li{ overflow:hidden; position:relative; height:18px; border-left:1px solid #bababa; border-right:1px solid #bababa; white-space:nowrap}
.select li input.option{ position:absolute; width:100%; height:20px; line-height:20px}
.select li label{ position:absolute; top:0; left:0; width:100%; height:18px; background:#fff; color:#767676; line-height:18px; text-indent:8px; *text-indent:6px}
.select li a{ display:block; height:18px; background:#fff; color:#767676; line-height:18px; text-indent:8px; *text-indent:6px; text-decoration:none}
.select li.hover *{ background:#999; color:#fff}
.select_go{ overflow:visible; height:21px; width:28px; *margin:-1px 0 -1px 4px; padding:0; border:1px solid #bababa; background:#eee; font:bold 11px Tahoma; color:#767676; line-height:19px; _line-height:normal; vertical-align:middle; cursor:pointer}
</style>
<div style="width:200px" class="select" jQuery="1" sizcache="0" sizset="0">
<p class="my_value" jQuery="1">select link</p>
<ul class="a_list" jQuery="1" sizcache="0" sizset="0">
<li jQuery="1" sizcache="0" sizset="0"><a href="#1" jQuery="1">link_1</a></li>
<li jQuery="2" sizcache="0" sizset="1"><a href="#2" jQuery="2">link_2</a></li>
<li jQuery="3" sizcache="0" sizset="2"><a href="#3" jQuery="3">link_3</a></li>
</ul>
</div>
'CSS HTML5 > 퍼블리싱 팁' 카테고리의 다른 글
유동성 버튼 만들기 (0) | 2016.11.09 |
---|---|
가로로 나열되며 l 로 나뉘는 메뉴 (0) | 2016.11.09 |
버튼 스타일시트 (0) | 2016.11.09 |
백그라운드 라운드 이미지 처리 (0) | 2016.11.09 |
제목이 길 경우 점선으로 나오게 하는... (0) | 2016.11.09 |