태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

셀렉트 메뉴를 레이어로 표현

16년 전

예제보기: http://xtx.kr/tag/select_dropdown.htm

<html>
<head>
<title>http://www.xtx.kr</title>
<style>
.dhtmlselect{ /*style of DHTML Select Menu, main box */
border: 1px solid #999999;
position: relative;
text-indent: 5px;
padding: 2;
cursor: hand;
cursor: pointer;
background-color: #efefef;
font-family:tahoma;
font-size:9pt;
}

.menutext {
font-family:tahoma;
font-size:9pt;
}

.dhtmlselect .dropdown{ /*style of Drop Down Menu that appears onMouseover */
position: absolute;
left: 0;
border: 1px solid black;
border-bottom-width: 0;
display: none;
z-index: 5;
font-weight: normal;
}

.dhtmlselect .dropdown a{ /*style of Drop Down Menu's links */
width: auto;
display: block;
background: #fff7d1;
border-bottom: 1px solid black;
padding: 1px 0;
text-indent: 5px;
text-decoration: none;
color: black;
}

.dhtmlselect .dropdown a:hover{
background: #ffe469;
}
</style>

<script type="text/javascript">
var combodropimage='http://www.xtx.kr/tag/select_button.gif'
var combodropoffsetY=2 //offset of drop down menu vertically from default location (in px)
var combozindex=100

if (combodropimage!="")
combodropimage='<img src="'+combodropimage+'" title="Select an option" align=absmiddle border=0">'

function dhtmlselect(selectid, selectwidth, optionwidth){
var selectbox=document.getElementById(selectid)
document.write('<div id="dhtml_'+selectid+'" class="dhtmlselect"><table width=100% cellpadding=0 cellspacing=0 border=0><td class=menutext>'+selectbox.title+"</td><td align=right>"+combodropimage+'</td></table><div class="dropdown">')
for (var i=0; i<selectbox.options.length; i++)
document.write('<a href="'+selectbox.options[i].value+'">'+selectbox.options[i].text+'</a>')
document.write('</div></div>')
selectbox.style.display="none"
var dhtmlselectbox=document.getElementById("dhtml_"+selectid)
dhtmlselectbox.style.zIndex=combozindex
combozindex--
if (typeof selectwidth!="undefined")
dhtmlselectbox.style.width=selectwidth
if (typeof optionwidth!="undefined")
dhtmlselectbox.getElementsByTagName("div")[0].style.width=optionwidth
dhtmlselectbox.getElementsByTagName("div")[0].style.top=dhtmlselectbox.offsetHeight-combodropoffsetY+"px"
if (combodropimage!="")
dhtmlselectbox.getElementsByTagName("img")[0].style.left=dhtmlselectbox.offsetWidth+3+"px"
dhtmlselectbox.onmouseover=function(){
this.getElementsByTagName("div")[0].style.display="block"
}
dhtmlselectbox.onmouseout=function(){
this.getElementsByTagName("div")[0].style.display="none"
}
}
</script>

아래 콤보메뉴에 마우스를 올려보세요..<p>

<form>
<select id="webmaster" title="다주지">
<option value="http://www.xtx.kr">dajuji</option>
<option value="http://www.xtx.kr">dajuji Menu</option>
<option value="http://www.xtx.kr">dajuji Image</option>
<option value="http://www.xtx.kr">dajuji Background</option>
<option value="http://www.xtx.kr">dajuji Keyboard/Mouse</option>
</select>

<script type="text/javascript">
dhtmlselect("webmaster", "120px","140px")
</script>
<p>

<select id="network" title="Search Engine">
<option value="http://www.naver.com">www.naver.com</option>
<option value="http://www.daum.com">www.daum.net</option>
<option value="http://www.yahoo.co.kr">www.yahoo.co.kr</option>
<option value="http://www.nate.com/">www.nate.com</option>
</select>

<script type="text/javascript">
dhtmlselect("network", "190px", "190px")
</script>
</form>

추천 목록

번호	제목
108	숫자만 입력받기..
107	테이블 포함한 폼 입력란 동적 추가/삭제
106	체크한 것만 합계를 표시하는 스크립트
105	선택하지 못하는 select option 만들기
104	입력한 길이만큼 늘어나고 줄어드는 TEXTAREA
103	무한 이미지 업로드
102	SELECT BOX로 해당 주소로 이동하기2
101	표안의 레이어 고정좌표 풀기
100	레이어에 스크롤바 달기
99	조건에 따라 다른 페이지를 열어주는 소스
98	입력폼에서 변수 체크하는 스크립트
97	폼 관련 객체들
96	tabindex : TAB 키를 통하여 이동순서 지정
95	MySQL 데이타 입력 크기
94	테이블의 폭을 고정하고 싶을때..
93	메일전송 클래스(SMTP Class)
	셀렉트 메뉴를 레이어로 표현
91	textarea의 입력된 HTML을 미리보기 합니다..
90	textarea에 있는 내용을 선택만 하면 COPY가 되고 다른 폼을 선택하면 붙히기가 됩니다.
89	textarea안을 클릭하면 그 안에 내용전체가 선택됩니다
88	input 입력상자에 텍스트 입력을 제한 및 글자수를 실시간 표시합니다.
87	textarea에 글을 입력하면 다른 textarea와 레이어에 실시간으로 타이핑 됩니다
86	textarea에 입력된 내용중 URL,도메인, 이메일만 추출합니다.
85	체크박스를 선택해야만 INPUT이 활성화 됩니다.
84	radio버튼 선택 여부에 따라 셀렉트 항목이 바뀝니다
83	radio버튼을 선택하면 해당 value값이 input 상자에 나타납니다.
82	라디오 버튼 목록을 옵션에 따라 LOCK을 겁니다.
81	라디오 버튼 선택에 따라 입력폼이 나타나거나 사라집니다.
80	라디오버튼을 선택하면 입력된 주소로 이동합니다.
79	체크박스 선택 갯수를 제한하는 스크립트