Я пытаюсь перейти на использование чистого CSS для интерактивности интерфейса и анимации. В настоящее время я работаю над веб-сайтом, на котором я хочу, чтобы окно полноэкранного меню выпадало, когда пользователь нажимает на значок меню.
У меня есть флажок (скрытый с меткой), расположенный слева от сетка с z-индексом 2 в верхней части экрана. Мое меню - 100vw и 100vh, расположенные на вершине -100vh. Когда я проверяю флажок, я хочу изменить положение меню сверху: 0px.
По какой-то причине, хотя флажок, по-видимому, работает, флажок не меняет положение меню.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/793b1590a4.js"></script>
<link rel="stylesheet" href="css.css" />
</head>
<body>
<div id="top">
<input type="checkbox" id="mt" />
<label for="mt" id="mb"><i class="fa fa-bars fa-2x"></i></label>
<div id="ttl"> Website </div>
<div id="krt"><i class="fas fa-shopping-cart fa-2x"></i> </div>
</div>
<div id="menu">
<ul id="ul">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</body>
CSS:
html, body {
margin: 0;
padding: 0;
}
#top {
display: grid;
position: fixed;
z-index: 2;
height: 8vh;
padding: 1vh 3vw 0 3vw;
background: #fff;
grid-template-columns: 10vw 74vw 10vw;
justify-items: center;
align-items: center;
}
#mt {
display: none;
}
#mb {
grid-column: 1;
}
#ttl {
font-size: 4.5vh;
grid-column: 2;
color: #101010;
}
#krt {
grid-column: 3;
}
#menu {
position: fixed;
width: 100vw;
height: 100vh;
top: -100vh;
background: #E0E0E0;
transition: 300ms ease-in-out;
}
#ul {
transition: 300ms ease-in-out;
font-size: 30px;
margin-top: 150px;
}
#ul>li {
list-style: none;
width: 100vw;
}
#mt:checked~#menu {
top: 0px;
}
Я уже некоторое время устраняю неполадки, и я сделал более простую версию, которая работает как предполагалось, но я не могу понять, что нарушает меню между ними. Версия для устранения неполадок выглядит следующим образом:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/793b1590a4.js"></script>
<link rel="stylesheet" href="css.css" />
</head>
<body>
<input type="checkbox" id="menu-button" />
<label for="menu-button" class="menu-icon"><i class="fa fa-bars fa-2x"></i></label>
<div id="menu">
<ul id="ul">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="container">
<div id="title">
Website
</div>
</div>
</body>
CSS:
html, body {
margin: 0;
padding: 0;
}
#menu-button:checked~#menu {
left: 0px;
}
#title {
font-size: 5vh;
padding: 0 0 0 75px;
}
#menu {
position: fixed;
height: 100vh;
width: 300px;
left: -300px;
background: #E0E0E0;
transition: 300ms ease-in-out;
}
#ul {
transition: 300ms ease-in-out;
font-size: 30px;
margin-top: 100px;
}
#ul>li {
list-style: none;
margin-top: 20px;
}
#ul>li:last-child {
border: none;
}
#menu-button {
display: none;
}
.menu-icon {
position: absolute;
top: 19px;
left: 30px;
z-index: 1;
}
#container {
transition: 300ms ease-in-out;
}
Может кто-нибудь сказать мне, почему флажок не установлен изменить положение моего меню в первом примере и изменить во втором?