如何通过HTML5代码创建一个可折叠菜单，并获取源码下载？_产品资讯

发布时间:2024-10-14 09:53

阅读量: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(); // 阻止事件冒泡，避免点击子菜单时触发父菜单的折叠     }); });