如何解决如何滚动并完全显示移动菜单的扩展区域？
我创建的多层移动菜单在小屏幕高度上显示出奇怪的行为：当子菜单区域展开时，滚动出 vh 时没有背景颜色，子区域的滚动高度似乎由开始的高度定义屏幕而不是可见的菜单区域，当展开子菜单区域时，页面不会滚动到顶部。
我的技能仅限于您在示例中看到的内容。希望有人能帮我解决/改进这个...
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body::after {
content: "";
position: absolute;
z-index: 99;
background-color: rgba(0,0.5);
height: 100vh;
width: 100vw;
top:0;
left:0;
transition: 0.4s;
opacity: 0;
visibility: hidden;
}
#mm-btn div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
cursor: pointer;
}
.mm-drill {
transform: translateX(100%);
font-family: 'Poppins',sans-serif;
}
.mm-is-toggled .mm-drill {
transform: translateX(0);
}
.mm-is-toggled::after {
opacity: 1;
visibility: visible;
}
.mm-drill {
display: flex;
position: fixed;
z-index: 100;
top: 0;
right: 0;
width: 100vw;
height: 100vh;
background-color: #fff;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
transition: 0.45s;
}
.mm-items {
flex: 0 0 100%;
}
.mm-item:not(:last-child) {
}
.mm-link {
display: block;
padding: 20px 15px;
background-color: red;
font-size: 1rem;
line-height: 1.5rem;
font-weight: 500;
}
.mm-expand-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: translateX(100%);
background-color: #daf9f4;
transition: 0.3s;
visibility: hidden;
}
.mm-expand-content .mm-item:not(:last-child) {
}
.mm-expand-content .mm-link {
background-color: #daf9f4;
}
.mm-expand-content .mm-back-link {
display: flex;
align-items: center;
background-color: #daf9f4 !importnat;
color: black;
}
.mm-expand-content .mm-back-link::before {
content: "\276E";
margin-right: 0.5rem;
}
.mm-expand-link {
display: flex;
justify-content: space-between;
}
.mm-expand-link::after {
content: "\276F";
flex: 0 1 auto;
font-size: 1.2rem;
}
.mm-expand.active > .mm-expand-content {
transform: translateX(0);
visibility: visible;
}
.mm-expand .mm-expand-content {
background-color: #f2f2f2;
}
.mm-expand .mm-expand-content .mm-link {
background-color: #f2f2f2;
}
.mm-expand .mm-expand-content .mm-expand-content {
background-color: #f2f2f2;
}
.mm-expand .mm-expand-content .mm-expand-content .mm-link {
background-color: #f2f2f2;
}
.mm-expand .mm-expand-content .mm-expand-content .mm-expand-content {
background-color: #f2f2f2;
}
.mm-expand .mm-expand-content .mm-expand-content .mm-expand-content .mm-link {
background-color: #f2f2f2;
}
.mm-expand .mm-expand-content .mm-expand-content .mm-expand-content .mm-expand-content {
background-color: #f2f2f2;
}
.mm-expand .mm-expand-content .mm-expand-content .mm-expand-content .mm-expand-content .mm-link {
background-color: #f2f2f2;
}
.mm-drill a {
text-decoration: none;
}
.mm-drill ul,li {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
list-style: none;
}
.mm-topbar{
}
.mm-logo{
margin:20px 10px 10px 20px;
}
.mm-close {
position: absolute;
right: 30px;
top: 20px;
width: 25px;
height: 25px;
cursor: pointer;
}
.mm-close:hover {
opacity: 1;
}
.mm-close:before,.mm-close:after {
position: absolute;
left: 15px;
content: ' ';
height: 25px;
width: 5px;
background-color: black;
}
.mm-close:before {
transform: rotate(45deg);
}
.mm-close:after {
transform: rotate(-45deg);
}
.mm-item {
flex: 0 0 100%;
}
.mm-back-link{
color:black;
padding: 25px 0 0 25px;
}
.mm-headline {
text-align: center;
font-size: 1.1rem;
margin-top:30px;
}
.mm-1st-btn{
border:1px solid red;
margin: 20px 20px 20px 20px;
border-radius: 5px;
font-size: 1rem;
background-color: #f2f2f2;
border: 1px solid #cbd6e2;
box-shadow: 0 1px 24px rgba(45,62,80,0.12);
color: black;
padding-left: 20px;
padding-right: 30px;
}
.mm-2nd-btn{
border:1px solid red;
margin: 20px 20px 20px 20px;
border-radius: 5px;
font-size: 1rem;
background-color: #fff !important;
border: 1px solid #cbd6e2;
color: black;
padding-left: 20px;
padding-right: 30px;
}
.mm-cta-btn{
margin: 40px 20px 15px 20px;
border-radius: 5px;
font-size: 1rem;
background-color: #237fc2;
text-align: center;
color: #fff;
}
.mmsuperbtn{
}
.mmsuperdesc{
}
</style>
</head>
<body>
<div id="mm-btn"><div></div><div></div><div></div></div>
<nav class="mm-drill">
<ul class="mm-items">
<li class"mm-topbar">
<div class="mm-logo"><img width="140" src="http://localhost:8888/docbox3/wp-content/uploads/2021/02/docbox_logo.svg">
</img></div>
<div class="mm-close"></div>
</li>
<li style="height:20px;"></li>
<li class="mm-item mm-expand">
<a class="mm-link mm-expand-link mm-1st-btn" href="#">
Lösungen
</a>
<ul class="mm-items mm-expand-content">
<li class="mm-item mm-headline">
Lösungen
</li>
<li class="mm-item">
<a class="mm-link mm-2nd-btn" href="#">
<div class="mmsuperbtn"><i class="fas fa-hospital" style="font-size:1.5rem"></i> Spital-Kommunikation</div><div class="mmsuperdesc">Elektronische Patienten-Anmeldung und Zuweisung »</div>
</a>
</li>
<li class="mm-item">
<a class="mm-link mm-2nd-btn" href="#">
<div class="mmsuperbtn"><i class="fas fa-flask" style="font-size:1.5rem"></i> Pharma-Kommunikation</div><div class="mmsuperdesc">Keine unerwünschten Walkins und gezielte Termine »</div>
</a>
</li>
<li class="mm-item">
<a class="mm-link mm-2nd-btn" href="#">
<div class="mmsuperbtn"><i class="fas fa-medkit" style="font-size:1.5rem"></i> Notfallsienst-Organisation</div><div class="mmsuperdesc">Organisation und Planung Ärztlicher Notfalldienste »</div>
</a>
</li>
</ul>
</li>
<li class="mm-item mm-expand">
<a class="mm-link mm-expand-link mm-1st-btn" href="#">
Ressourcen
</a>
<ul class="mm-items mm-expand-content">
<li class="mm-item mm-headline">
Ressourcen
</li>
<li class="mm-item mm-expand">
<a class="mm-link mm-expand-link mm-2nd-btn" href="#">
Kennenlernen
</a>
<ul class="mm-items mm-expand-content">
<li class="mm-item mm-headline">
Ressourcen > Kennenlernen
</li>
<li class="mm-item">
<a class="mm-link mm-2nd-btn" href="#">
Übersicht aller Services
</a>
</li>
<li class="mm-item">
<a class="mm-link mm-2nd-btn" href="#">
Warum docbox?
</a>
</li>
<li class="mm-item">
<a class="mm-link mm-2nd-btn" href="#">
Kundenstimmen
</a>
</li>
</ul>
</li>
<li class="mm-item mm-expand">
<a class="mm-link mm-expand-link mm-2nd-btn" href="#">
Erste Schritte
</a>
<ul class="mm-items mm-expand-content">
<li class="mm-item mm-headline">
Ressourcen > Erste Schritte
</li>
<li class="mm-item">
<a class="mm-link mm-2nd-btn" href="#">
Einen Account eröffnen
</a>
</li>
<li class="mm-item">
<a class="mm-link mm-2nd-btn" href="#">
Account einrichten
</a>
</li>
<li class="mm-item">
<a class="mm-link mm-2nd-btn" href="#">
Ich brauche Hilfe!
</a>
</li>
</ul>
</li>
<li class="mm-item mm-expand">
<a class="mm-link mm-expand-link mm-2nd-btn" href="#">
Wissenswertes
</a>
<ul class="mm-items mm-expand-content">
<li class="mm-item mm-headline">
Ressourcen > Wissenswertes
</li>
<li class="mm-item">
<a class="mm-link mm-2nd-btn" href="#">
Webblog
</a>
</li>
<li class="mm-item">
<a class="mm-link mm-2nd-btn" href="#">
Schulungen & Webinare
</a>
</li>
<li class="mm-item">
<a class="mm-link mm-2nd-btn" href="#">
Fallstudien & Analysen
</a>
</li>
<li class="mm-item">
<a class="mm-link mm-2nd-btn" href="#">
Artikel & Whitepaper
</a>
</li>
</ul>
</li>
<li class="mm-item mm-expand">
<a class="mm-link mm-expand-link mm-2nd-btn" href="#">
Service
</a>
<ul class="mm-items mm-expand-content">
<li class="mm-item mm-headline">
Ressourcen > Service
</li>
<li class="mm-item">
<a class="mm-link mm-2nd-btn" href="#">
Dienstleistung & Beratung
</a>
</li>
<li class="mm-item">
<a class="mm-link mm-2nd-btn" href="#">
Onboarding-Service
</a>
</li>
<li class="mm-item">
<a class="mm-link mm-2nd-btn" href="#">
Solutions-Partner
</a>
</li>
</ul>
</li>
<li class="mm-item mm-expand">
<a class="mm-link mm-expand-link mm-2nd-btn" href="#">
Support
</a>
<ul class="mm-items mm-expand-content">
<li class="mm-item mm-headline">
Ressourcen > Support
</li>
<li class="mm-item">
<a class="mm-link mm-2nd-btn" href="#">
Wissensdatenbank
</a>
</li>
<li class="mm-item">
<a class="mm-link mm-2nd-btn" href="#">
Kundensupport
</a>
</li>
</ul>
</li>
<li class="mm-item mm-expand">
<a class="mm-link mm-expand-link mm-2nd-btn" href="#">
Partner & Entwickler
</a>
<ul class="mm-items mm-expand-content">
<li class="mm-item mm-headline">
Ressourcen > Partner & Entwickler
</li>
<li class="mm-item">
<a class="mm-link mm-2nd-btn" href="#">
Partnerprogramme
</a>
</li>
<li class="mm-item">
<a class="mm-link mm-2nd-btn" href="#">
Entwickler-Tools
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="mm-item">
<a class="mm-link mm-1st-btn" href="#">
Warum docbox?
</a>
</li>
<li class="mm-item mm-expand">
<a class="mm-link mm-expand-link mm-1st-btn" href="#">
Unternehmen
</a>
<ul class="mm-items mm-expand-content">
<li class="mm-item mm-headline">
Unternehmen
</li>
<li class="mm-item">
<a class="mm-link mm-2nd-btn" href="#">
Über uns
</a>
</li>
<li class="mm-item">
<a class="mm-link mm-2nd-btn" href="#">
Karriere
</a>
</li>
<li class="mm-item">
<a class="mm-link mm-2nd-btn" href="#">
Kontakt aufnahmen
</a>
</li>
<li class="mm-item">
<a class="mm-link mm-2nd-btn" href="#">
Management Team
</a>
</li>
</ul>
</li>
<li class="mm-item">
<a class="mm-link mm-cta-btn" href="#">
Anmelden
</a>
</li>
</ul>
</nav>
<script>
const navExpand = [].slice.call(document.querySelectorAll('.mm-expand'));
const backLink = `<li class="mm-item"><a class="mm-link mm-back-link" style="width:100px;" href="javascript:;">BACK</a><div class="mm-close"></div></li>`;
navExpand.forEach(item => {
item.querySelector('.mm-expand-content').insertAdjacentHTML('afterbegin',backLink);
item.querySelector('.mm-link').addEventListener('click',() => item.classList.add('active'));
item.querySelector('.mm-back-link').addEventListener('click',() => item.classList.remove('active'));
});
const mmbtn = document.getElementById('mm-btn');
mmbtn.addEventListener('click',function () {
document.body.classList.toggle('mm-is-toggled');
});
const mmclose = document.querySelectorAll('.mm-close');
mmclose.forEach(item => {
item.addEventListener('click',event => {
document.body.classList.toggle('mm-is-toggled');
})
})
</script>
source: https://codepen.io/tiffachoo/pen/yzZRXK#_=_
</body>
</html>
希望的行为是：在整个高度的子菜单区域中显示背景颜色，通过每个菜单层的高度定义最大高度，并在扩展子菜单区域时滚动顶部。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
