태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

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

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>

추천 목록

번호	제목
785	php 랜덤 이미지 디렉토리 검색으로 편하게..
784	랜덤배너 소스
783	랜덤으로 파일 가져와서 재생하고, 끝나면 다른 랜덤파일 또 재생하기..
782	로컬 날짜/시간을 형식화합니다.
781	MySQL 데이타 입력 크기
780	테이블의 폭을 고정하고 싶을때..
779	실시간 카운트 다운 함수
778	웹 서버 접속자의 IP 주소 혹은 도메인명을 가져오는 함수
777	메일전송 클래스(SMTP Class)
776	시간 : date() 옵션 정리
775	파일 및 데이타베이스 백업
774	디렉토리별 용량 체크
773	아파치인증과 비슷한 로그인 페이지 만들기
772	리눅스 명령어
771	mail() 함수를 이용한 첨부 메일 보내기
770	.htaccess를 이용한 PHP ini 환경설정
769	파일찾기 버튼 이미지로 변경하기
768	자동로그인 예제 (로봇)
767	정규식 (PHP)
766	mysqladmin 활용방법 총정리
765	양/음력 달력 변환 함수(띠,요일,간지 포함)
764	박스안의 글이 상하좌우..원하는 방향으로..
763	특이한 글자애니메이션
762	PHP 속도를 향상시키는 방법들 ★ 무조건 알아야 할 PHP 속도 테스트 14 가지
761	자바스크립트 보안법입니다
760	웹 문서 암호화 스크립트
	셀렉트 메뉴를 레이어로 표현
758	CSS 및 JAVASCRIPT 소스 효과적으로 숨기기
757	도트 이모티콘 생성기
756	링크에도 소리가...