HTML折叠菜单

最新推荐文章于 2026-04-21 17:24:43 发布

原创最新推荐文章于 2026-04-21 17:24:43 发布 · 3.1w 阅读

49 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html

本文介绍了一种使用HTML、CSS及JavaScript实现的可折叠菜单栏设计方案。通过简单的鼠标点击操作，用户可以展开或收起子菜单，提高了网页导航的用户体验。文章详细解释了代码结构，包括样式设置和JavaScript交互逻辑。

<html>
<head>
<meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
var itemHeight = 40;
var dividerHeight = 1;

function openMenu(obj) {
    menuTitleId = obj.id;
    menuId = "menu" + menuTitleId.substring(10);
    indicatorId = "indicator" + menuTitleId.substring(10);

    menu = document.getElementById(menuId);
    indicator = document.getElementById(indicatorId);
    height = menu.style.height;

    if (height == "0px" || height == "") {
        childAmount = menu.getElementsByTagName('div').length;
        dividerAmount = menu.getElementsByTagName('li').length;
        height = childAmount * itemHeight + dividerAmount * dividerHeight;
        menu.style.height = height + "px";
        indicator.style.transform = "rotate(180deg)";
    } else {
        menu.style.height = "0px";
        indicator.style.transform = "rotate(0deg)";
    }
}
</script>
<style>

.menus {
width: 320px;
overflow: hidden;
box-shadow: 1px 1px 4px gray;
/* border-bottom: 1px solid black;
border-top: 1px solid black; */
border: 1px solid gray;
border-radius: 5px;
}

.menu {
overflow: hidden;
height: 0px;
transition: all 0.3s ease;
}

.menu_title {
width: 305px;
height: 50px;
line-height: 50px;
background: #fafafa;
color: gray;
font-size: 20px;
padding-left: 15px;
transition: all 0.3s ease;
cursor: pointer;
position: relative;
font-weight: bold;
overflow: hidden;
}

.menu_title:hover {
background: #dedede;
color: black;
}

.indicator {
width: 50px;
height: 50px;
font-weight: bold;
position: absolute;
right: 0px;
top: 0px;
transition: all 0.3s ease;
font-weight: bold;
text-align: center;
}

.item {
width: 290px;
height: 40px;
line-height: 40px;
background: gray;
color: white;
padding-left: 30px;
transition: all 0.3s ease;
cursor: pointer;
overflow: hidden;
}

.item:hover {
background: #B22222;
}

.item a {
width: 290px;
height: 40px;
display: block;
text-decoration: none;
color: white;
text-decoration: none;
}

.item_divider {
width: 322px;
height: 1px;
background: white;
display: block;
opacity: 0.8;
}

.menu_divider {
width: 100%;
height: 1px;
background: gray;
}

</style>
</head>
<body>

<div class="menus">

    <div id="menu_title1" class="menu_title" onclick="openMenu(this)">
        Menu1
        <div class="indicator" id="indicator1">^</div>
    </div>
    <div class="menu" id="menu1">
        <div class="item">
            <a href="#">Item1</a>
        </div>
        <li class="item_divider"></li>
        <div class="item">
            <a href="#">Item2</a>
        </div>
        <li class="item_divider"></li>
        <div class="item">
            <a href="#">Item3</a>
        </div>
        <li class="item_divider"></li>
        <div class="item">
            <a href="#">Item4</a>
        </div>
    </div>

    <li class="menu_divider"></li>

    <div id="menu_title2" class="menu_title" onclick="openMenu(this)">
        Menu2
        <div class="indicator" id="indicator2">^</div>
    </div>
    <div class="menu" id="menu2">
        <div class="item">
            <a href="#">Item1</a>
        </div>
        <li class="item_divider"></li>
        <div class="item">
            <a href="#">Item2</a>
        </div>
    </div>

    <li class="menu_divider"></li>

    <div id="menu_title3" class="menu_title" onclick="openMenu(this)">
        Menu3
        <div class="indicator" id="indicator3">^</div>
    </div>
    <div class="menu" id="menu3">
        <div class="item">
            <a href="#">Item1</a>
        </div>
        <li class="item_divider"></li>
        <div class="item">
            <a href="#">Item2</a>
        </div>
        <li class="item_divider"></li>
        <div class="item">
            <a href="#">Item3</a>
        </div>
    </div>
</div>
</body>
</html>

这里写图片描述