阅读量:0
要实现一个基于HTML5的折叠菜单，可以使用HTML、CSS和JavaScript。以下是一个简单的示例：，，1. 创建一个HTML文件（index.html）：，，``
html，，，，，，折叠菜单，，，，，，首页，，产品，，产品1，产品2，产品3，，，关于我们，联系我们，，，，，，`，，2. 创建一个CSS文件（styles.css）：，，`css，* {， margin: 0;， padding: 0;， boxsizing: borderbox;，}，，body {， fontfamily: Arial, sansserif;，}，，nav {， backgroundcolor: #333;，}，，.menu {， liststyletype: none;， display: flex;，}，，.menu li {， position: relative;，}，，.menu li a {， display: block;， padding: 1rem;， color: white;， textdecoration: none;，}，，.menu li a:hover {， backgroundcolor: #555;，}，，.submenu {， display: none;， position: absolute;， top: 100%;， left: 0;， backgroundcolor: #333;， liststyletype: none;， minwidth: 200px;，}，，.submenu li a {， padding: 0.5rem 1rem;，}，，.submenu li a:hover {， backgroundcolor: #555;，}，，.dropdown:hover .submenu {， display: block;，}，``，，3. 创建一个JavaScript文件（scripts.js），但在这个例子中，我们不需要添加任何JavaScript代码，因为折叠菜单的功能已经通过CSS实现了。HTML5代码实现折叠菜单
HTML结构
在HTML5中，折叠菜单通常使用<ul>和<li>标签来构建，以下是一个简单的示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF8"> <title>折叠菜单示例</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div id="leftMenu"> <ul class="nav"> <li> <label for="">标题1</label> <span class="triangledown"></span> <ul class="sub"> <li><a href="#">子项11</a></li> <li><a href="#">子项12</a></li> <! 更多子项 > </ul> </li> <li> <label for="">标题2</label> <span class="triangledown"></span> <ul class="sub"> <li><a href="#">子项21</a></li> <li><a href="#">子项22</a></li> <! 更多子项 > </ul> </li> <! 更多主菜单项 > </ul> </div> </body> </html>
CSS样式
通过CSS来定义菜单的样式，这包括菜单的宽度、颜色、背景等，特别地，li:hover > ul的样式用于定义当鼠标悬停在主菜单项上时，子菜单如何展开。
/* styles.css */ .nav { liststyle: none; padding: 0; } .nav li { position: relative; } .nav li .sub { display: none; position: absolute; top: 100%; left: 0; backgroundcolor: #f9f9f9; minwidth: 200px; boxshadow: 0 8px 16px rgba(0,0,0,0.2); zindex: 1; } .nav li:hover > .sub { display: block; }JavaScript代码
使用JavaScript来实现菜单的动态交互，当点击父菜单项时，其子菜单会展开或折叠。
// script.js document.querySelectorAll('.nav > li').forEach(function(item) { item.addEventListener('click', function(e) { var subMenu = this.querySelector('.sub'); if (subMenu.style.display === 'block') { subMenu.style.display = 'none'; } else { subMenu.style.display = 'block'; } e.stopPropagation(); // 阻止事件冒泡，避免点击子菜单时触发父菜单的折叠 }); });源码下载
你可以将上述HTML、CSS和JavaScript代码保存为相应的文件，并在本地服务器上运行查看效果，如果你需要一个完整的项目结构，可以创建一个包含以下文件的目录：
index.html 包含HTML结构。
styles.css 包含CSS样式。
script.js 包含JavaScript代码。
将这些文件放在同一个目录下，并用浏览器打开index.html即可看到折叠菜单的效果。
