[英]How I am struggling to have my fixed sidebar menu on desktop/laptop to switch into hamburger menu on mobile / tablets
尽管我很清楚我想要实现的目标，但我真的很难让它发挥作用。 我想要实现的是我的网站的响应式布局，其中侧边栏菜单固定在台式机和笔记本电脑上，然后切换到手机和平板电脑的汉堡菜单？
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { font-family: "Lato", sans-serif; } .sidebar { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidebar a { padding: 9px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; } .sidebar a:hover { color: #f1f1f1; } .sidebar .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } .openbtn { font-size: 20px; cursor: pointer; background-color: #111; color: white; padding: 10px 15px; border: none; } .openbtn:hover { background-color: #444; } #main { transition: margin-left .5s; padding: 16px; } /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */ @media screen and (max-height: 450px) { .sidebar {padding-top: 15px;} .sidebar a {font-size: 18px;} } </style> </head> <body> <div id="mySidebar" class="sidebar"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div> <div id="main"> <button class="openbtn" onclick="openNav()">☰ Open Sidebar</button> <h2>Collapsed Sidebar</h2> <p>Click on the hamburger menu/bar icon to open the sidebar, and push this content to the right.</p> </div> <script> function openNav() { document.getElementById("mySidebar").style.width = "250px"; document.getElementById("main").style.marginLeft = "250px"; } function closeNav() { document.getElementById("mySidebar").style.width = "0"; document.getElementById("main").style.marginLeft= "0"; } </script> </body> </html>
非常感谢您的帮助
您只需要在通过 JS 切换菜单时设置要更改的值（ width 、 margin-left等），然后将它们更改为您最初使用该media query 。 此外，您可能希望隐藏和显示切换按钮。
这是一种方法：
body { font-family: "Lato", sans-serif; } .sidebar { height: 100%; width: 250px; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidebar a { padding: 9px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; } .sidebar a:hover { color: #f1f1f1; } .sidebar .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; display: none; } .openbtn { font-size: 20px; cursor: pointer; background-color: #111; color: white; padding: 10px 15px; border: none; display: none; } .openbtn:hover { background-color: #444; } #main { transition: margin-left .5s; padding: 16px; margin-left: 250px; } /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */ @media screen and (max-height: 450px) { .sidebar { padding-top: 15px; width: 0; } .sidebar a { font-size: 18px; } .openbtn { display: block; } .sidebar .closebtn { display: block; } #main { margin-left: 0; } }
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="mySidebar" class="sidebar"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div> <div id="main"> <button class="openbtn" onclick="openNav()">☰ Open Sidebar</button> <h2>Collapsed Sidebar</h2> <p>Click on the hamburger menu/bar icon to open the sidebar, and push this content to the right.</p> </div> <script> function openNav() { document.getElementById("mySidebar").style.width = "250px"; document.getElementById("main").style.marginLeft = "250px"; } function closeNav() { document.getElementById("mySidebar").style.width = "0"; document.getElementById("main").style.marginLeft = "0"; } </script> </body> </html>
小提琴： https : //jsfiddle.net/1czk379m/2/
编辑：切换菜单后调整窗口大小时，样式之间似乎存在一些冲突。 更改了closeNav()以删除元素的内联样式。 还在 css #mySidebar .sidebar更改为#mySidebar 。
看看更新的小提琴
在我正在处理的网站上打开侧边栏后，试图弄清楚如何在我的汉堡菜单上停止 CSS animation
[英]Trying to figure out how to stop a CSS animation on my hamburger menu after the sidebar opens on a site I am working on
如何创建固定的边栏，该边栏会折叠到移动设备上的菜单中（Boostrap 4）
[英]How do I create a fixed sidebar that collapses into menu on mobile (Boostrap 4)
如何将容器/框添加到我的固定侧边栏以具有像菜单一样的结构
[英]How do I add containers/ boxes to my fixed sidebar to have structure like a menu
我无法根据汉堡菜单修复移动菜单汉堡图标和主页图标以及 hover 菜单未出现在同一行
[英]I am not able to fix the mobile menu hamburger icon and home icon in same line alongwith the hover menu does not appear according to hamburger menu
Blogger SOHO 主题：如何始终在桌面视图上显示汉堡菜单而不是打开侧边栏？
[英]Blogger SOHO theme: How to always show Hamburger menu on Desktop view instead of open Sidebar?
如何在 991px 宽的平板电脑上强制使用 Bootstrap 中的汉堡包菜单？
[英]How can I force the hamburger menu in Bootstrap on tablets at 991px wide?
如何使用响应式设计将导航栏变成移动设备的汉堡菜单？
[英]How can I turn my navbar into Hamburger menu for mobile using responsive design?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.