|
Сообщение от рони
|
|
как сделать последовательное не только появление но и исчезновение?
|
не могу точно расчитать transition-delay в строках 97 и 104 ... возможно есть более "красивый" вариант ... при открытии меню часть li уже открыта, хотелось бы увидеть весь процесс открытия с первого пункта меню
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<header>
<div class="logo" itemscope="" itemtype="http://schema.org/Organization">
<a href="#" itemprop="name">
BLACKCODE.
<span class="logo--white">agency</span>
</a>
</div>
<nav role="menu" itemscope="" itemtype="http://schema.org/SiteNavigationElement">
<ul>
<li role="menuitem"><a itemprop="url" href="#">Все проекты</a></li>
<li role="menuitem"><a itemprop="url" href="#">Почему мы?</a></li>
<li role="menuitem"><a itemprop="url" href="#">Услуги</a></li>
<li role="menuitem"><a itemprop="url" href="#">Контакты</a></li>
<li role="menuitem"><a itemprop="url" href="#">Главная</a></li>
<li role="menuitem"><a itemprop="url" href="#">Преимущества</a></li>
<li role="menuitem"><a itemprop="url" href="#">Что мы делаем?</a></li>
<li role="menuitem"><a itemprop="url" href="#">Портфолио</a></li>
<li role="menuitem"><a itemprop="url" href="#">Рассчитать стоимость</a></li>
</ul>
</nav>
<button class="cmn-toggle-switch" area-label="Открыть мобильное меню">Toggle menu</button>
</header>
<style>
@font-face {
font-family: "Qanelas";
src: url("https://viacheslavdemchenko.github.io/blackcode/fonts/qanelas/qanelas-bold/Qanelas-Bold.ttf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "Qanelas";
src: url("https://viacheslavdemchenko.github.io/blackcode/fonts/qanelas/qanelas-light/Qanelas-Light.ttf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "Qanelas";
src: url("https://viacheslavdemchenko.github.io/blackcode/fonts/qanelas/qanelas-medium/Qanelas-Medium.ttf");
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: "Qanelas";
src: url("https://viacheslavdemchenko.github.io/blackcode/fonts/qanelas/qanelas-regular/Qanelas-Regular.ttf");
font-weight: 400;
font-style: normal;
}
html {
font: 1em "Qanelas", sans-serif;
background: #111;
color: white;
}
header .logo a {
font-weight: bold;
color: #eaa627;
position: fixed;
z-index: 2;
display: flex;
width: 100%;
left: 0;
top: 0;
justify-content: center;
text-decoration: none;
font-size: 1.5em;
padding: 1em;
box-sizing: border-box;
}
header .logo a .logo--white {
color: white;
}
header nav[role="menu"] {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: translateX(-100%);
padding: 1em;
padding-top: 4.5em;
background-color: #3e3e3d;
transition: transform 0.5s 2s, visibility 0.5s 2s;
box-sizing: border-box;
overflow: auto;
visibility: hidden;
}
.is-nav-menu-open header nav[role="menu"] {
transform: translateX(0);
transition-delay: .3s;
visibility: visible;
}
header nav[role="menu"] > ul {
all: unset;
display: flex;
flex-direction: column;
align-items: center;
}
header nav[role="menu"] > ul > li {
all: unset;
transition-duration: 0.1s;
transition-delay: calc(var(--k, 0) * 0.2s + 0.25s);
transform: translateY(-100%);
opacity: 0;
}
.is-nav-menu-open header nav[role="menu"] > ul > li {
transition-duration: 0.2s;
transition-delay: calc(var(--i, 0) * 0.2s + 0.25s);
transform: translateY(0%);
opacity: 1;
}
header nav[role="menu"] > ul > li > a {
all: unset;
display: block;
color: white;
padding: 1em;
font-size: 125%;
cursor: pointer;
}
.cmn-toggle-switch {
all: unset;
position: fixed;
right: 1em;
top: 1em;
z-index: 2;
background: none;
width: 3em; height: 3em;
color: transparent;
}
.cmn-toggle-switch::before, .cmn-toggle-switch::after {
content: "";
width: 80%; height: 80%;
border: 0 solid white;
display: block;
margin: 10%;
box-sizing: border-box;
position: absolute;
top: 0; right: 0;
transition: 500ms;
--stripe-width: 5px;
--stripe:
transparent calc(50% - var(--stripe-width) / 2),
white 0 calc(50% + var(--stripe-width) / 2),
transparent 0;
}
.cmn-toggle-switch::before {
border-width: var(--stripe-width) 0;
background: linear-gradient(to bottom, var(--stripe));
}
.is-nav-menu-open .cmn-toggle-switch::before {
transform: scale(0);
opacity: 0;
}
.cmn-toggle-switch::after {
background: linear-gradient(to bottom, var(--stripe)), linear-gradient(to right, var(--stripe));
transform: rotate(45deg) scale(0);
opacity: 0;
}
.is-nav-menu-open .cmn-toggle-switch::after {
transform: rotate(45deg);
opacity: 1;
}
</style>
<script>
document.querySelector("header .cmn-toggle-switch").addEventListener("click", () => {
document.documentElement.classList.toggle("is-nav-menu-open");
});
Array.from(document.querySelectorAll("header [role=menuitem]")).forEach((node, index, ar) => {
node.style.setProperty("--i", index);
node.style.setProperty("--k", ar.length - ++index);
});
</script>
</body>
</html>