如何在手机上将悬停下拉菜单转换为可点击的侧边栏下拉菜单

Question

我正在我的网站上构建导航菜单，但我在移动设备上遇到了关于下拉子菜单的问题。在桌面上，我使用w3Schools作为参考，创建了一个子菜单，在悬停时显示ul。

然而，在移动设备上，我遇到了两个问题：

• 第一个是我希望能够点击打开菜单。我试着研究在手机上切换可点击菜单和在桌面上切换悬停的解决方案，但我对javascript了解不多，也不知道从哪里开始。我也尝试过通过点击桌面和手机来打开菜单，但我更喜欢它在桌面上悬停
• 我还希望菜单在手机和平板电脑上以不同的方式显示。我希望它是一个跨越我弹出侧边栏宽度的块，而不是桌面上的弹出窗口。我试着以不同的方式设计菜单，使其符合我的愿景(几乎像手风琴式下拉菜单(，但它会在我的其他列表项目上方打开。相反，我希望它打开并向下推列表项

如有任何帮助，我们将不胜感激！

这是我的代码(这个版本包括在桌面和手机上点击打开菜单(：

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function subOpen() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.sub-menu-link')) {
var dropdowns = document.getElementsByClassName("sub-menu-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}

//Code for hamburger menu toggle
const menuBtn = document.querySelector(".menu-btn");
let menuOpen = !1;
menuBtn.addEventListener("click", () => {
menuOpen ? (menuBtn.classList.remove("open"), menuOpen = !1, document.documentElement.style.overflow = "scroll", document.body.scroll = "yes") : (menuBtn.classList.add("open"), menuOpen = !0, document.documentElement.style.overflow = "hidden", document.body.scroll = "no")
})

body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #333;
background-color: #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
text-decoration: none;
}
.header-cont {
display: flex;
max-width: 1350px;
margin: auto;
justify-content: space-between;
padding: 0 1rem 0 1rem;
box-sizing: border-box;
}
.header-cont,
.nav-link {
align-items: center;
}
.header-nav,
.nav-item {
height: 60px;
}
.header {
background: #fff;
box-shadow: 0 0 10px -3px rgb(0 0 0 / 50%);
}
.header-cont {
display: flex;
max-width: 1350px;
margin: auto;
justify-content: space-between;
padding: 0 1rem 0 1rem;
box-sizing: border-box;
}
.nav-link,
.sub-menu-link {
padding: 0 1rem 0 1rem;
font-weight: 600;
color: #0f0f0f !important;
cursor: pointer;
}
.sub-menu-link:after {
position: absolute;
right: 15px;
content: "⌃";
font-size: 15px;
border: none;
transform: rotate(180deg);
visibility: hidden!important;
}
.header-menu {
margin-right: 20px;
}
.header-menu li:last-child {
margin-bottom: 0;
padding-bottom: 0;
}
.only-mobile {
display: none !important;
}
.nav-item,
.nav-link {
display: inline-block;
}
.nav-item {
line-height: 60px;
}
.drop-chevron {
margin-left: 10px;
height: 13px;
fill: #0f0f0f;
}
.nav-item:hover svg {
fill: #00007a !important;
}
.nav-item:hover {
background-color: #00007a0d;
transition: background-color 0.3s;
}
.nav-link:hover,
.sub-menu-link:hover {
color: #00007a !important;
transition: 0.3s;
text-decoration: none !important;
}
.sub-menu {
position: relative !important;
}
.sub-menu-link {
display: inline-block !important;
text-decoration: none !important;
}
#check,
.checkbtn {
display: none;
}
.sub-menu-content {
display: none;
margin-top: -0.1rem;
background-color: #fff !important;
box-shadow: 0 6px 14px -1px rgb(0 5 20 / 15%);
border-radius: 3px;
overflow: hidden;
position: absolute;
width: 200px;
z-index: 1000;
}
.sub-menu-content ul {
list-style-type: none;
line-height: 30px;
}
.sub-item {
width: 200px;
margin-left: -0.5rem;
}
.sub-menu-content li:last-child {
border-bottom: 1px solid transparent !important;
padding-bottom: 0.1rem !important;
margin-bottom: -0.2rem;
}
.sub-menu-content a {
color: #0f0f0f;
width: 100%;
padding: 0.8rem;
margin-left: -2rem;
text-decoration: none;
display: block;
text-align: left;
border-left: solid 4px transparent;
}
.sub-menu-content a:hover {
text-decoration: none;
border-left: 4px solid #ff9f1c;
background-color: #00007a0d;
color: #00007a !important;
}

/*.sub-menu:hover .sub-menu-content {
display: block;
}*/
.checkbtn {
font-size: 20px;
color: #00007a;
float: right;
line-height: 60px;
margin-right: 1rem;
cursor: pointer;
}
@media (max-width: 1025px) {
selector .header-logo {
margin-top: 0.1rem;
padding-top: 0;
}
.header-cont {
justify-content: space-between;
}
.only-mobile,
.sub-menu-link {
display: block !important;
}
.checkbtn,
.nav-link,
.sub-menu {
display: block;
}
.drop-chevron {
display: none;
}
.sub-menu-content {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
position: relative!important;
box-shadow: none;
border-radius: 0px!important;
}
.sub-menu-link:after {
visibility: visible!important;
}
.sub-item {
border-top: none;
margin-left: -1rem;
margin-top: 0rem;
margin-bottom: 0px;
box-sizing: border-box;
line-height: 3rem;
border-bottom: solid 1px #B5B5B5;
}
.sub-menu-content li:last-child {
padding-bottom: 0rem!important;
margin-bottom: 0rem;
}
.sub-menu-content a {
color: #0f0f0f;
width: 100%;
padding: 8px;
margin-left: 0rem;
text-decoration: none;
display: block;
border-left: none;
}
.sub-menu-content a:hover {
text-decoration: none;
border-left: none;
background-color: #00007a0d;
color: #00007a!important;
}
.header-menu {
position: absolute;
margin-top: 60px;
width: 80%;
height: 100vh;
background: #e8e8e8;
left: -100%;
text-align: left;
transition: 0.5s;
margin-right: 0;
padding: 0;
box-shadow: rgb(18 18 18 / 8%) 4px 4px 12px 0;
overflow: hidden!important;
}
.header-menu li:first-child {
margin-top: 0;
}
.header-menu :last-child {
padding-bottom: 0 !important;
}
.nav-item {
border-top: none;
margin-left: 0;
box-sizing: border-box;
border-bottom: 1px solid #b5b5b5;
width: 100%;
text-align: left;
line-height: 60px;
height: 60px;
display: block;
}
.nav-link:hover,
.sub-menu-link:hover {
background: #00007a0d;
transition-duration: 0.25s;
}
#check:checked~ul {
left: 0;
}
}
.menu-btn {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 22px;
height: 60px;
cursor: pointer;
transition: 0.5s ease-in-out;
}
.menu-btn__burger,
.menu-btn__burger::after,
.menu-btn__burger::before {
width: 22px;
height: 2.5px;
background: #00007a;
border-radius: 3px;
transition: 0.3s ease-in-out;
}
.menu-btn__burger::after,
.menu-btn__burger::before {
content: "";
position: absolute;
}
.menu-btn__burger::before {
transform: translateY(-6.5px);
}
.menu-btn__burger::after {
transform: translateY(6.5px);
}
.menu-btn.open .menu-btn__burger {
background: 0 0;
box-shadow: none;
}
.menu-btn.open .menu-btn__burger::before {
transform: rotate(45deg);
}
.menu-btn.open .menu-btn__burger::after {
transform: rotate(-45deg);
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
display: block;
}
.submenu {
list-style-type: none!important;
}
.subitem {
padding: 15px;
}
.submenu {
display: none;
}
.submenu-active .submenu {
display: block;
}
.has-submenu:after {}
.has-submenu>a::after {
line-height: 16px;
font-weight: 600;
font-size: 15px;
border: none;
color: #0f0f0f;
padding-right: 0.3rem;
padding-top: 0.2rem;
display: inline-block;
content: "⌃";
transform: rotate(180deg);
}
.subitem a {
padding: 10px 15px;
}
.submenu-active {
background-color: #111;
border-radius: 3px;
}
.submenu-active .submenu {
display: block;
position: absolute;
left: 0;
top: 68px;
background: #111;
}
.submenu-active {
border-radius: 0;
}

<div class="header">
<div class="header-cont">
<div class="header-logo">
<a aria-hidden="true" href="/">
LOGO
</a>
</div>
<nav class="header-nav">
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<div class="menu-btn">
<div class="menu-btn__burger"></div>
</div>
</label>
<ul class="header-menu">
<li class="nav-item">
<div class="sub-menu">
<a onclick="subOpen()" class="sub-menu-link">link 1<svg class="drop-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg></a>
<div id="myDropdown" class="sub-menu-content">
<ul>
<li class="sub-item"><a href="#">sub link 1</a></li>
<li class="sub-item"><a href="#">sub link 2</a></li>
<li class="sub-item"><a href="#">sub link 3</a></li>
<li class="sub-item"><a href="#">sub link 4</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item"><a href="#" class="nav-link">link 2</a></li>
<li class="nav-item"><a href="#" class="nav-link">link 3</a></li>
<li class="nav-item"><a href="#" class="nav-link">link 4</a></li>
</ul>
</nav>
</div>
</div>

Answer 1

将其添加到您的CSS:

@media(min-width: 1025px){
.sub-menu:hover .sub-menu-content {
display: block;
}
}

这将确保当屏幕宽度大于1025px时(例如在桌面而非移动设备上(，悬停功能将显示子菜单。