首页二级导航栏在右边弹出代码

二级导航栏在右边弹出代码

时间: 2024-10-27 18:14:33 浏览: 20

二级导航栏通常出现在响应式设计中，当用户滚动到一定程度或者点击某个触发按钮时，会从页面右侧滑出或折叠显示。这样的设计可以节省空间并提高用户体验。下面是一个简单的HTML和CSS示例，展示了如何创建一个基本的右滑二级导航： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .side-navigation { position: fixed; right: 0; top: 50px; /* 根据需要调整 */ width: 200px; height: calc(100% - 50px); background-color: #f1f1f1; overflow-y: auto; transition: all 0.3s ease; display: none; } .show-menu { display: block; } [data-toggle="menu"] { cursor: pointer; float: right; padding: 10px; margin-top: 15px; } </style> </head> <body> <button type="button" data-toggle="menu">菜单</button> <div class="side-navigation" id="navMenu" style="display:none;">  <a href="#">链接1</a> <a href="#">链接2</a>  </div> <script> document.querySelector('[data-toggle="menu"]').addEventListener('click', function() { var navMenu = document.getElementById('navMenu'); navMenu.classList.toggle('show-menu'); }); </script> </body> </html> ``` 在这个例子中，`data-toggle="menu"`是一个用于触发导航显示的属性，当点击按钮时，JavaScript会切换`.side-navigation`的`display`样式，使其从隐藏变为可见。

阅读全文