Chia sẻ menu dọc 2 cấp

[hunghsmn]

2 Cấp: click vào menu mẹ ra menu con

Code:

<script type="text/javascript">
window.onload=tinhthuong_submenu;
function tinhthuong_submenu(obj) {
    var HTLT = document.getElementById(obj);
    for (var i = 1; i<=20; i++) {
        if (document.getElementById('submenu'+i)) {
            document.getElementById('submenu'+i).style.display='none';
        }
    }
    if (HTLT) {HTLT.style.display='block';}
}
</script>

<style type="text/css">
dl, dt, dd, ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
#menu {
    width: 180px;
}
#menu dt {
    text-align: left;
    cursor: pointer;
    line-height: 24px;
    font-weight: bold;
    border: #C2C2C2;
    border-style: solid;
    border-left-width: 1px;
    border-top-width: 1px;
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-top-color: #0000FF;
    border-lefy-color: #0000FF;
    border-bottom-color: #CFCFCF;
    border-right-color: #CFCFCF;

    background: #A60000;
    Color: #FFFFFF
}


#menu dd {
    border: 0px solid #FF0000;
}
#menu {
    margin:0px;
    position:absolute;
    top:4px;
    left:4px;
}
#menu li a, #menu dt a {
    color: #FFFFFF;
    text-decoration: none;
    display: block;
    border: 1 ;
    height: 100%;
}
#menu li {
    text-align: left;
    font-weight:bold;
    background: #00CCFF;
    border: 1px solid #FFFF00;
}
#menu li a:hover, #menu dd a:hover, #menu dd a:hover {
    background: #FAA518;
    font-family:Times New Roman;
    font-weight:bold;
    color:#FFFFFF
}

#menu dt a:hover {
    background: #C2C2C2;
    font-family:Times New Roman;
    font-weight:bold;
    color:#FFFFFF
}


</style>
<dl id="menu">

    <dt onclick="javascript:tinhthuong_submenu('submenu1');" title="Click">Menu 1</dt>
    <dd id="submenu1">
        <ul>
            <li><a href="http://www.trekhuyettat.org">Sub Menu 1-1</a></li>
            <li><a href="http://www.trekhuyettat.org">Sub Menu 1-2</a></li>
            <li><a href="http://www.trekhuyettat.org">Sub Menu 1-3</a></li>
        </ul>
    </dd>

    <dt onclick="javascript:tinhthuong_submenu('submenu2');" title="Click">Menu 2</dt>
    <dd id="submenu2">
        <ul>
            <li><a href="http://www.trekhuyettat.org">Sub Menu 2-1</a></li>
            <li><a href="http://www.trekhuyettat.org">Sub Menu 2-2</a></li>
            <li><a href="http://www.trekhuyettat.org">Sub Menu 2-3</a></li>
        </ul>
    </dd>

    <dt onclick="javascript:tinhthuong_submenu('submenu3');" title="Click">Menu 3</dt>
    <dd id="submenu3">
        <ul>
            <li><a href="http://www.trekhuyettat.org">Sub Menu 3-1</a></li>
            <li><a href="http://www.trekhuyettat.org">Sub Menu 3-2</a></li>
            <li><a href="http://www.trekhuyettat.org">Sub Menu 3-3</a></li>
        </ul>
    </dd>

    <dt onclick="javascript:tinhthuong_submenu('submenu4');" title="Click">Menu 4</dt>
    <dd id="submenu4">
        <ul>
            <li><a href="http://www.trekhuyettat.org">Sub Menu 4-1</a></li>
            <li><a href="http://www.trekhuyettat.org">Sub Menu 4-2</a></li>
            <li><a href="http://www.trekhuyettat.org">Sub Menu 4-3</a></li>
        </ul>
    </dd>

    <dt onclick="javascript:tinhthuong_submenu('submenu5');" title="Click">Menu 5</dt>
    <dd id="submenu5">
        <ul>
            <li><a href="http://www.trekhuyettat.org">Sub Menu 5-1</a></li>
            <li><a href="http://www.trekhuyettat.org">Sub Menu 5-2</a></li>
            <li><a href="http://www.trekhuyettat.org">Sub Menu 5-3</a></li>
        </ul>
    </dd>

</dl>

Xem thử:

Code:

http://www.trekhuyettat.org/h169-page

[mkkpro199x]

Có cái nào đẹp ko bac"

[mkkpro199x]

nói chung cũng cảm ơn bac" hung đã cho mình 1 ý tưởng mới - Nhìn cái code lại nhớ đến nó

[ܓܨܓMxTrường]

Có một chỗ hơi kì bác Hùng nhỉ...
Mở ra được nhưng đóng lại thì không.

[hunghsmn]

Có một chỗ hơi kì bác Hùng nhỉ...
Mở ra được nhưng đóng lại thì không.

Mở cái kia thì nó đóng cái nọ

Mình thích nhưng chưa mò được:
- Click ra ngoài thì nó đóng cả
- Rê chuột lên menu mẹ cũng đổi màu nền như menu con.

Các bạn có thể sửa:
background: #A60000;
thành:
background-image url(link ảnh nền kiểu button); xem thử có đẹp hơn không

Có cái nào đẹp ko bac"

Một cấp thì nhiều cái đẹp nhưng 2 cấp thì chưa tìm thấy cái nào hơn

[mkkpro199x]

bac hung biết cách nào chỉnh khung vuông đó thành hình vòm không

[hunghsmn]

bac hung biết cách nào chỉnh khung vuông đó thành hình vòm không

Vòm là sao? bo tròn góc hả?
thì thêm cái này vô #menu dd và #menu li
-moz-border-radius: 7px;
7px theo mình là vừa, còn tùy bạn

[Sponsored content]