首页用HTML代码做一个商品分类清晰，各条商品并列排列使用无序列表的电商悬浮窗

用HTML代码做一个商品分类清晰，各条商品并列排列使用无序列表的电商悬浮窗

时间: 2024-09-28 11:05:38 浏览: 36

要创建一个HTML无序列表形式的商品分类悬浮窗，可以采用以下结构： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> .sidenav { position: fixed; top: 0; left: 0; height: 100%; width: 200px; /* 悬浮窗宽度 */ background-color: #f8f9fa; overflow-y: auto; padding: 20px; transition: 0.3s ease-in-out; } .sidenav ul { list-style-type: none; padding: 0; margin: 0; } .sidenav li a { display: block; padding: 8px 16px; text-decoration: none; color: black; } .sidenav li a:hover { background-color: #ddd; } .show-menu { transform: translateX(-200px); /* 移动到屏幕左侧 */ } </style> </head> <body> <button onclick="toggleMenu()">点击展开/收起</button> <div id="sidenav" class="sidenav"> <ul> <li><a href="#">电子产品</a></li> <li><a href="#">家居用品</a></li> <li><a href="#">服装鞋包</a></li> <li><a href="#">图书音像</a></li>  </ul> </div> <script> function toggleMenu() { var sidenav = document.getElementById('sidenav'); if (sidenav.className === 'sidenav') { sidenav.className += ' show-menu'; } else { sidenav.className = 'sidenav'; } } </script> </body> </html> ``` 在这个代码中： - `.sidenav` 创建了一个可滚动的侧边栏，通过JavaScript控制其显示隐藏。 - `li a` 用于表示每个商品类别，点击后可以跳转到对应页面。 - `transform: translateX(-200px)` 实现了滑动效果。

阅读全文