#javascript #html #css #dom
#javascript #HTML #css #dom
Вопрос:
Я пытаюсь создать полноэкранное меню наложения навигации. И я не знаю, что я делаю не так. Итак, я использую флажок в качестве переключателя для полноэкранного меню навигации. А также использование гамбургера для кнопки.
В этом может быть небольшая ошибка, которую я, похоже, не нахожу, но я новичок в этом. пожалуйста, помогите
это 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. Все работает нормально, когда я устанавливаю верхнее значение в 0 в классе fullpagemenu.
*{
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 amp; 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. используйте z-index, чтобы разместить его над содержимым, и также укажите тело z-index
2.
.fullpagemenu .active
выбирает.active
элемент внутри.fullscreen
элемента; вам нужно использовать.fullpagemenu.active
вместо этого.
Ответ №1:
у вас есть пробел между .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 amp; 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>
Комментарии:
1. Ооо! мой плохой. Это было быстро. Но могу ли я спросить логику, стоящую за этим? в других вариантах выбора тоже есть пробелы. и большое спасибо 🙂
2. посмотрите на комментарий Криса Джи, он был быстрее и имеет хорошее объяснение. в основном, при использовании пробела выбирается дочерний элемент предыдущего выбранного элемента, однако при отсутствии пробела выбирается элемент, соответствующий обоим выбранным элементам