테스트 사이트 - 개발 중인 베타 버전입니다

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

· 9년 전 · 277

<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>  

댓글 작성

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

로그인하기

게시글 목록

번호 제목
12307
12306
12305
12304
12303
JavaScript 계산기
12302
12301
12300
12299
12298
12297
12296
12295
12294
12293
12292
12291
12290
12289
12288
12287
12286
12285
12284
12283