HTML+CSS+图标：实现带过渡动画的手风琴拉伸式二级导航展开隐藏效果

首先，我们需要创建一个HTML文件，然后在其中添加一级导航和二级导航的HTML结构。接下来，我们需要编写CSS样式来实现手风琴拉伸形式的二级导航展开隐藏效果，并添加过渡动画效果。我们可以使用一些图标图片来替换左侧的图标。以下是一个简单的示例： 1. 创建HTML文件： ```html <!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> <nav> <ul class="accordion"> <li> <a href="#"> <img src="icon1.png" alt="图标1"> 一级导航1 </a> <ul class="submenu"> <li><a href="#">二级导航1-1</a></li> <li><a href="#">二级导航1-2</a></li> <li><a href="#">二级导航1-3</a></li> </ul> </li> <li> <a href="#"> <img src="icon2.png" alt="图标2"> 采购管理 </a> <ul class="submenu"> <li><a href="#">二级导航2-1</a></li> <li><a href="#">二级导航2-2</a></li> </ul> </li> <li> <a href="#"> <img src="icon3.png" alt="图标3"> 一级导航3 </a> <ul class="submenu"> <li><a href="#">二级导航3-1</a></li> <li><a href="#">二级导航3-2</a></li> <li><a href="#">二级导航3-3</a></li> <li><a href="#">二级导航3-4</a></li> </ul> </li> </ul> </nav> </body> </html> ``` 2. 编写CSS样式（styles.css）： ```css body { font-family: Arial, sans-serif; } .accordion { list-style: none; padding: 0; margin: 0; } .accordion li { position: relative; } .accordion a { display: block; padding: 10px; background-color: #f1f1f1; color: #333; text-decoration: none; } .accordion a:hover { background-color: #ddd; } .submenu { list-style: none; padding: 0; margin: 0; display: none; } .submenu li { padding: 0; } .submenu a { display: block; padding: 5px 10px; background-color: #e1e1e1; color: #333; text-decoration: none; transition: all 0.3s ease; } .submenu a:hover { background-color: #ccc; } .submenu.show { display: block; } ``` 3. 添加JavaScript代码以实现展开和隐藏二级导航的功能： ```javascript document.querySelectorAll('.accordion > li > a').forEach(item => { item.addEventListener('click', event => { let submenu = event.target.nextElementSibling; if (submenu) { if (submenu.style.display === 'block') { submenu.style.display = 'none'; } else { document.querySelectorAll('.submenu.show').forEach(showSubmenu => { showSubmenu.classList.remove('show'); showSubmenu.style.display = 'none'; }); submenu.style.display = 'block'; submenu.classList.add('show'); } } }); }); ``` 将上述JavaScript代码添加到HTML文件中的`<script>`标签内，或者将其保存为一个单独的JavaScript文件并在HTML文件中引用。 ######[AI写代码神器 | 1078点数解答 | 2024-10-11 11:33:01]

服务商

更多选项

快捷项

自定义