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

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

· 9년 전 · 279

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

댓글 작성

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

로그인하기

게시글 목록

번호 제목
12357
12356
12355
12354
12353
20387
12352
12351
12350
12349
12348
12347
12346
12345
12344
12343
12342
12341
12340
12339
12338
12337
12336
12335
12334