帶有 HTML、CSS、JavaScript 的全屏覆蓋菜單
[英]Full screen overlay menu with HTML,CSS,JavaScript
問題描述
我正在嘗試制作一個全屏覆蓋導航菜單。 我不知道我做錯了什么。 所以我使用復選框作為全屏導航菜單的切換器。 並且還使用漢堡包作為按鈕。
這可能有一個我似乎沒有發現的小錯誤，但我是這方面的初學者。 請幫忙
這是 HTML 代碼
<body>
<div class="menu-wrap">
<input type="checkbox" class="toggler">
<div class="hamburger">
<div>
</div>
</div>
</div>
<div class="fullpagemenu" id="menu">
<div class="nav">
<ul>
<li><a href="#" data-text="home">Home</a></li>
<li><a href="#" data-text="About">About</a></li>
<li><a href="#" data-text="services">Services</a></li>
<li><a href="#" data-text="Portfolio">Portfolio</a></li>
<li><a href="#" data-text="Team">Team</a></li>
<li><a href="#" data-text="Contact">Contact</a></li>
</ul>
</div>
</div>
<section class="landing">
<img src="./circles.svg" alt="dots">
<h1>Dots</h1>
</section>
<script type="text/javascript" src="/js/index.js"></script>
這是 index.js。 這也工作正常，因為它切換 fullpagemenu div 中的活動類
const toggler = document.querySelector(".toggler");
const menu = document.querySelector("#menu");
toggler.addEventListener("click", () => {
menu.classList.toggle("active");
});
這是 index.css。 當我在 fullpagemenu 類中將 top 設置為 0 時，一切正常。
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
min-height: 100vh;
}
.fullpagemenu{
position: fixed;
top: -100%;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
}
.fullpagemenu .active{
top: 0%;
}
.fullpagemenu .nav{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
overflow-y: auto;
}
.fullpagemenu .nav ul{
position: relative;
}
.fullpagemenu .nav ul li{
position: relative;
list-style: none;
padding: 0 20px;
margin: 5px 0;
overflow: hidden;
display: table;
}
.fullpagemenu .nav ul li:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: orange;
transition: transform 0.5s ease-in-out;
transform: scaleY(0);
transform-origin: bottom;
}
.fullpagemenu .nav ul li:hover:before{
transition: transform 0.5s ease-in-out;
transform: scaleY(1);
transform-origin: top;
}
.fullpagemenu .nav ul li a{
position: relative;
color: black;
text-decoration: none;
font-size: 4em;
font-weight: 700;
line-height: 1.2em;
padding-top: 12px;
display: inline-block;
text-transform: uppercase;
transition: 0.5s ease-in-out;
}
.fullpagemenu .nav ul li a:before {
content: attr(data-text);
position: absolute;
bottom: -100%;
left: 0;
color: black;
}
.fullpagemenu .nav ul li:hover a {
transform: translateY(-100%);
color: black;
}
.landing{
height: 90vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.landing h1{
margin: 100px;
font-size: 50px;
color: purple;
}
/* MENU STYLES */
.menu-wrap {
position: fixed;
top: 10px;
right: 20px;
z-index: 1;
}
.menu-wrap .toggler {
position: absolute;
top: 10px;
right: 20px;
z-index: 2;
cursor: pointer;
width: 50px;
height: 50px;
opacity: 0;
}
.menu-wrap .hamburger {
position: absolute;
top: 10px;
right: 20px;
z-index: 1;
width: 60px;
height: 60px;
padding: 1rem;
background: orange;
display: flex;
align-items: center;
justify-content: center;
}
/* Hamburger Line */
.menu-wrap .hamburger > div {
position: relative;
flex: none;
width: 100%;
height: 2px;
background: black;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease;
}
/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
content: '';
position: absolute;
z-index: 1;
top: -10px;
width: 100%;
height: 2px;
background: inherit;
}
/* Moves Line Down */
.menu-wrap .hamburger > div::after {
top: 10px;
}
/* Toggler Animation */
.menu-wrap .toggler:checked + .hamburger > div {
transform: rotate(135deg);
}
/* Turns Lines Into X */
.menu-wrap .toggler:checked + .hamburger > div:before,
.menu-wrap .toggler:checked + .hamburger > div:after {
top: 0;
transform: rotate(90deg);
}
/* Rotate On Hover When Checked */
.menu-wrap .toggler:checked:hover + .hamburger > div {
transform: rotate(225deg);
}
1 個解決方案
解決方案1
1 已采納 2020-09-04 11:57:47
你在.fullpagemenu .active之間有一個空格，它應該是： .fullpagemenu.active編輯這個，你的代碼工作：
const toggler = document.querySelector(".toggler"); const menu = document.querySelector("#menu"); toggler.addEventListener("click", () => { menu.classList.toggle("active"); });
*{ margin: 0; padding: 0; box-sizing: border-box; } body{ min-height: 100vh; } .fullpagemenu{ position: fixed; top: -100%; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; transition: 0.5s; } .fullpagemenu.active{ top: 0; } .fullpagemenu .nav{ display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; overflow-y: auto; } .fullpagemenu .nav ul{ position: relative; } .fullpagemenu .nav ul li{ position: relative; list-style: none; padding: 0 20px; margin: 5px 0; overflow: hidden; display: table; } .fullpagemenu .nav ul li:before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: orange; transition: transform 0.5s ease-in-out; transform: scaleY(0); transform-origin: bottom; } .fullpagemenu .nav ul li:hover:before{ transition: transform 0.5s ease-in-out; transform: scaleY(1); transform-origin: top; } .fullpagemenu .nav ul li a{ position: relative; color: black; text-decoration: none; font-size: 4em; font-weight: 700; line-height: 1.2em; padding-top: 12px; display: inline-block; text-transform: uppercase; transition: 0.5s ease-in-out; } .fullpagemenu .nav ul li a:before { content: attr(data-text); position: absolute; bottom: -100%; left: 0; color: black; } .fullpagemenu .nav ul li:hover a { transform: translateY(-100%); color: black; } .landing{ height: 90vh; display: flex; justify-content: center; align-items: center; flex-direction: column; } .landing h1{ margin: 100px; font-size: 50px; color: purple; } /* MENU STYLES */ .menu-wrap { position: fixed; top: 10px; right: 20px; z-index: 1; } .menu-wrap .toggler { position: absolute; top: 10px; right: 20px; z-index: 2; cursor: pointer; width: 50px; height: 50px; opacity: 0; } .menu-wrap .hamburger { position: absolute; top: 10px; right: 20px; z-index: 1; width: 60px; height: 60px; padding: 1rem; background: orange; display: flex; align-items: center; justify-content: center; } /* Hamburger Line */ .menu-wrap .hamburger > div { position: relative; flex: none; width: 100%; height: 2px; background: black; display: flex; align-items: center; justify-content: center; transition: all 0.4s ease; } /* Hamburger Lines - Top & Bottom */ .menu-wrap .hamburger > div::before, .menu-wrap .hamburger > div::after { content: ''; position: absolute; z-index: 1; top: -10px; width: 100%; height: 2px; background: inherit; } /* Moves Line Down */ .menu-wrap .hamburger > div::after { top: 10px; } /* Toggler Animation */ .menu-wrap .toggler:checked + .hamburger > div { transform: rotate(135deg); } /* Turns Lines Into X */ .menu-wrap .toggler:checked + .hamburger > div:before, .menu-wrap .toggler:checked + .hamburger > div:after { top: 0; transform: rotate(90deg); } /* Rotate On Hover When Checked */ .menu-wrap .toggler:checked:hover + .hamburger > div { transform: rotate(225deg); }
<div class="menu-wrap"> <input type="checkbox" class="toggler"> <div class="hamburger"> <div> </div> </div> </div> <div class="fullpagemenu" id="menu"> <div class="nav"> <ul> <li><a href="#" data-text="home">Home</a></li> <li><a href="#" data-text="About">About</a></li> <li><a href="#" data-text="services">Services</a></li> <li><a href="#" data-text="Portfolio">Portfolio</a></li> <li><a href="#" data-text="Team">Team</a></li> <li><a href="#" data-text="Contact">Contact</a></li> </ul> </div> </div> <section class="landing"> <img src="./circles.svg" alt="dots"> <h1>Dots</h1> </section>
Javascript、CSS、HTML - 單擊屏幕使下拉菜單消失
[英]Javascript, CSS, HTML - Click screen to make dropdown menu disappear
全屏菜單僅在滑塊的第一張幻燈片上起作用，而在其余部分上不起作用-CSS，HTML
[英]Full screen menu working just on first slide of slider not on the rest - CSS, HTML
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.