首页html侧边悬浮菜单代码

html侧边悬浮菜单代码

时间: 2024-08-14 22:02:32 浏览: 87

HTML侧边悬浮菜单通常通过CSS样式配合HTML结构来实现，例如使用`<nav>`标签构建导航栏。下面是一个简单的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> .sidenav { height: 100%; position: fixed; top: 0; left: -150px; /* 初始时左侧偏移 */ width: 150px; background-color: #f1f1f1; overflow-y: auto; transition: 0.5s; /* 滑动过渡效果 */ } .sidenav a { padding: 8px 16px; text-decoration: none; display: block; color: black; } .show-menu { left: 0; /* 展开时移除左侧偏移 */ } </style> </head> <body> <div class="sidenav" id="mySidenav"> <a href="javascript:void(0)" onclick="closeMenu()">关闭</a> <a href="#">链接1</a> <a href="#">链接2</a> <a href="#">链接3</a> </div> <button onclick="openMenu()">打开</button> <script> function openMenu() { document.getElementById("mySidenav").classList.add("show-menu"); } function closeMenu() { document.getElementById("mySidenav").classList.remove("show-menu"); } </script> </body> </html> ``` 在这个例子中，点击按钮会触发`openMenu()`和`closeMenu()`函数，它们分别添加或删除`.sidenav`的`show-menu`类，从而改变侧边栏的显示状态。

阅读全文