2단계 드롭다운 레이어 메뉴 입니다.

혀니천사

· 9년 전 · 조회 288 288

<html>
<head>
<script type="text/javascript">

var TimeOut         = 300;
var currentLayer    = null;
var currentitem     = null;

var currentLayerNum = 0;
var noClose         = 0;
var closeTimer      = null;

// Open Hidden Layer
function mopen(n)
{
    var l = document.getElementById("menu"+n);
    var mm = document.getElementById("mmenu"+n);

    if(l)
    {
        mcancelclosetime();
        l.style.visibility='visible';

        if(currentLayer && (currentLayerNum != n))
            currentLayer.style.visibility='hidden';

        currentLayer = l;
        currentitem = mm;
        currentLayerNum = n;
    }
    else if(currentLayer)
    {
        currentLayer.style.visibility='hidden';
        currentLayerNum = 0;
        currentitem = null;
        currentLayer = null;
    }
}

// Turn On Close Timer
function mclosetime()
{
    closeTimer = window.setTimeout(mclose, TimeOut);
}

// Cancel Close Timer
function mcancelclosetime()
{
    if(closeTimer)
    {
        window.clearTimeout(closeTimer);
        closeTimer = null;
    }
}

// Close Showed Layer
function mclose()
{
    if(currentLayer && noClose!=1)
    {
        currentLayer.style.visibility='hidden';
        currentLayerNum = 0;
        currentLayer = null;
        currentitem = null;
    }
    else
    {
        noClose = 0;
    }

    currentLayer = null;
    currentitem = null;
}

// Close Layer Then Click-out
document.onclick = mclose;
</script>
<style>
#dd
{   margin: 0;
    padding: 0}

#dd li
{   margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    font: bold 11px arial}

#dd li a.menu
{   display: block;
    text-align: center;
    background: #5970B2;
    padding: 4px 10px;
    margin: 0 1px 0 0;
    color: #FFF;
    width: 100px;
    text-decoration: none}

#dd li a.menu:hover
{   background: #49A3FF}

.submenu
{   background: #EAEBD8;
    border: 1px solid #5970B2;
    visibility: hidden;
    position: absolute;
    z-index: 3}

    .submenu a
    {   display: block;
        font: 11px arial;
        text-align: left;
        text-decoration: none;
        padding: 5px;
        color: #2875DE}

    .submenu a:hover
    {   background: #49A3FF;
        color: #FFF}

</style>
</head>
<body>

<ul id="dd">
    <li>
        <a href="#" class="menu" id="mmenu1" onmouseover="mopen(1);" onmouseout="mclosetime();">Home</a>
        <div class="submenu" id="menu1" onmouseover="mcancelclosetime()" onmouseout="mclosetime();">
            <a href="#">HTML DropDown</a>
            <a href="#">DHTML DropDown menu</a>
            <a href="#">JavaScript DropDown</a>
            <a href="#">DropDown Menu</a>
            <a href="#">CSS DropDown</a>
        </div>
    </li>
    <li>
        <a href="#" class="menu" id="mmenu2" onmouseover="mopen(2);" onmouseout="mclosetime();">Download</a>
        <div class="submenu" id="menu2" onmouseover="mcancelclosetime()" onmouseout="mclosetime();">
            <a href="#">ASP Dropdown</a>
            <a href="#">Pulldown menu</a>
            <a href="#">AJAX dropdown</a>
            <a href="#">DIV dropdown</a>
        </div>
    </li>
    <li><a href="#" class="menu">Order</a></li>
    <li><a href="#" class="menu">Help</a></li>
    <li><a href="#" class="menu">Contact</a></li>
</ul>
</body>
</html>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시판 목록

팁게시판

디자인과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

글쓰기

번호	제목	글쓴이	날짜	조회
6077	알고있으면 유용한 무료 디자인소스 사이트 #디자이너	덕서리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	158
6076	서버시간 알아내기 #개발자 #javascript	PlayPixel 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	147
6075	css 템플릿 사이트 #디자이너	덕서리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	163
6074	모바일 ui 사이트 [1] #디자이너	덕서리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	218
6073	swip 사용 안하고, touchstart, touchmove 사용하여 슬라이드 구현 #퍼블리셔 #기타	돼지코구뇽 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	180
6072	숫자를 한글표기로 바꾸기 입니다. #개발자 #php	Angelos 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	324
6071	Android,IOS 앱용 아이콘 템플릿 참고 사이트 #개발자 #mobile	인덱스웹 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	227
6070	여러문장을 한번에 자동 줄바꿈 하기 입니다. #개발자 #php	Angelos 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	267
6069	서버 동시접속자 설정 변경하기 #개발자 #웹서버	인덱스웹 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	237
6068	디렉토리의 모든 파일을 읽어 목록으로 만들기 입니다. #개발자 #php	Angelos 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	189
6067	PHP 버전이 낮아 imagerotate() 함수가 없을때 대신 사용하는 함수 #개발자 #php	뿌하하 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	204
6066	간단하게 자동으로 테이블 너비 조정하기 입니다. [1] #개발자 #php	Angelos 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	317
6065	문자열자르기 (문자별 다른 너비 해결) #개발자 #php	PASKRAN 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	212
6064	테이블 복사 쿼리 #개발자 #mysql	서로웹 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	233
6063	많이들 사용하시는 Slider 에 대해서... [2] #퍼블리셔 #기타	kiplayer 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	342
6062	현재 접속중인 사용자 나타내기 #개발자 #php	Angelos 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	273
6061	mysql select 후 update 하기 #개발자 #mysql	서로웹 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	216
6060	다른 페이지로 이동하는 방법 3가지 입니다. #개발자 #php	Angelos 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	276
6059	한글문자열 자르는 법 입니다. #개발자 #php	Angelos 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	212
6058	mysql_query 전체 갯수 빨리 알아보기 입니다. #개발자 #php	Angelos 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	205
6057	POST값 통째로 인코딩하기, 배열, iconv #개발자 #php	서로웹 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	254
6056	이메일주소 검사하기 입니다. #개발자 #php	Angelos 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	207
6055	php 확장자 내 맘대로 바꾸기 입니다. #개발자 #웹서버	Angelos 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	254
6054	문자열을 한 문자씩 나누어 출력하기 입니다. #개발자 #php	Angelos 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	231
6053	Node js 게시판 프로젝트 소개합니다. #개발자 #node.js	snshero 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	574

알고있으면 유용한 무료 디자인소스 사이트

#디자이너

덕서리

2단계 드롭다운 레이어 메뉴 입니다.

댓글 작성

게시판 목록

팁게시판

알고있으면 유용한 무료 디자인소스 사이트

서버시간 알아내기

css 템플릿 사이트

모바일 ui 사이트 [1]

swip 사용 안하고, touchstart, touchmove 사용하여 슬라이드 구현

숫자를 한글표기로 바꾸기 입니다.

Android,IOS 앱용 아이콘 템플릿 참고 사이트

여러문장을 한번에 자동 줄바꿈 하기 입니다.

서버 동시접속자 설정 변경하기

디렉토리의 모든 파일을 읽어 목록으로 만들기 입니다.

PHP 버전이 낮아 imagerotate() 함수가 없을때 대신 사용하는 함수

간단하게 자동으로 테이블 너비 조정하기 입니다. [1]

문자열자르기 (문자별 다른 너비 해결)

테이블 복사 쿼리

많이들 사용하시는 Slider 에 대해서... [2]

현재 접속중인 사용자 나타내기

mysql select 후 update 하기

다른 페이지로 이동하는 방법 3가지 입니다.

한글문자열 자르는 법 입니다.

mysql_query 전체 갯수 빨리 알아보기 입니다.

POST값 통째로 인코딩하기, 배열, iconv

이메일주소 검사하기 입니다.

php 확장자 내 맘대로 바꾸기 입니다.

문자열을 한 문자씩 나누어 출력하기 입니다.

Node js 게시판 프로젝트 소개합니다.