Sidenav в стиле Stripe с помощью React
Есть ли у кого-нибудь идеи, как я могу добиться боковой навигации на странице документации полосы https://stripe.com/docs Боковая навигационная панель имеет вложенные элементы. Мне было интересно, как, щелкнув «Платежи» на домашней странице, я могу открыть навигацию стороны платежей и ее вложенный список и выполнить перенаправление на страницу платежей. Я знаю, что это не имеет смысла, но если вы щелкните страницу документации и попытаетесь, вы поймете, чего я пытаюсь достичь.
Ответы 1
Вы можете добиться аналогичного поведения с переходом высоты CSS. На рабочем столе они кажутся довольно плавными (60 кадров в секунду достижимы, но не через полный переходный период). Если вам нужно больше контроля (например, закрыть другие элементы навигации, когда другие открыты), вы можете удалить элементы флажков и изменить элементы меток на «h2». Затем установите прослушиватель «onclick» для элементов «h2» в коде JS, который добавит класс (со стилями из «input: checked ~ ul») к выбранному «ul».
:root {
--liHeight: 1em
}
label {
cursor: pointer
}
ul {
opacity: 0;
height: 0px;
overflow: hidden;
transition: 0.3s;
}
ul li {
height: var(--liHeight);
}
input {
position: absolute;
opacity: 0;
}
input:checked ~ ul {
opacity: 1;
position: initial;
height: calc(7 * var(--liHeight));
}<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class = "item">
<label for = "item1">
Item 1
</label>
<input id = "item1" type = "checkbox"/>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
<div class = "item">
<label for = "item2">
Item 2
</label>
<input id = "item2" type = "checkbox"/>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
<div class = "item">
<label for = "item3">
Item 3
</label>
<input id = "item3" type = "checkbox"/>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</body>
</html>Другое решение - написать JS-анимацию, например, с использованием API «window.requestAnimationFrame», чтобы анимировать высоту элемента «ul». (Я думаю, что именно это и происходит на stripe.com)