正文

HTML5 折叠下拉列表示例代码：如何创建一个响应式的折叠菜单

/0 浏览量
0702

创建一个响应式的折叠下拉菜单是网站设计中的一个常见需求。使用 HTML5、CSS3 和 JavaScript，我们可以轻松实现这一功能。以下是一个简单的示例，展示如何创建一个折叠菜单，该菜单在不同屏幕尺寸下能够自动调整，以提供良好的用户体验。

HTML 结构

首先，我们需要构建菜单的 HTML 结构。我们将使用 <div> 元素来创建菜单项，并通过点击显示或隐藏子菜单。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式折叠菜单示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="menu">
    <button class="menu-toggle" aria-controls="submenu-1" aria-expanded="false">
        Menu Item 1
    </button>
    <ul id="submenu-1" class="submenu">
        <li><a href="#">Subitem 1-1</a></li>
        <li><a href="#">Subitem 1-2</a></li>
        <li><a href="#">Subitem 1-3</a></li>
    </ul>
    
    <button class="menu-toggle" aria-controls="submenu-2" aria-expanded="false">
        Menu Item 2
    </button>
    <ul id="submenu-2" class="submenu">
        <li><a href="#">Subitem 2-1</a></li>
        <li><a href="#">Subitem 2-2</a></li>
        <li><a href="#">Subitem 2-3</a></li>
    </ul>
</div>

<script src="script.js"></script>
</body>
</html>

CSS 样式

接下来，我们需要一些 CSS 来美化菜单，并使其在不同屏幕尺寸下具有响应性。

/* styles.css */
.menu {
    list-style: none;
    padding: 0;
}

.menu > button {
    background: #333;
    color: white;
    padding: 10px;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.submenu {
    display: none;
    list-style: none;
    padding-left: 20px;
}

.submenu li {
    padding: 5px 0;
}

@media screen and (min-width: 600px) {
    .submenu {
        display: block;
    }
}

JavaScript 行为

最后，我们需要一些 JavaScript 来添加交互功能。我们将使用 JavaScript 来监听按钮的点击事件，并根据点击状态切换子菜单的显示状态。

// script.js
document.addEventListener('DOMContentLoaded', function() {
    var menuToggles = document.querySelectorAll('.menu-toggle');

    for (var i = 0; i < menuToggles.length; i++) {
        var toggle = menuToggles[i];
        var submenu = document.getElementById(toggle.getAttribute('aria-controls'));

        toggle.addEventListener('click', function() {
            var isExpanded = this.getAttribute('aria-expanded') === 'true';
            this.setAttribute('aria-expanded', !isExpanded);
            submenu.style.display = isExpanded ? 'none' : 'block';
        });
    }
});

在这个例子中，我们使用了 ARIA 属性来增强可访问性。aria-controls 属性链接按钮和对应的子菜单，而 aria-expanded 属性表示子菜单的当前状态。

通过这种方式，我们创建了一个基本且响应式的折叠菜单。这个菜单在屏幕宽度小于 600px 时会隐藏所有子菜单，点击主菜单项时展开相应的子菜单。你可以根据需要调整样式和行为，以满足特定设计需求。

-- 展开阅读全文 --