时间戳

首页 > 解决方案 > 带反应的条纹文档样式sidenav

css - 带反应的条纹文档样式sidenav

问题描述

有没有人知道如何在条纹文档页面https://stripe.com/docs上实现侧导航 侧导航具有嵌套元素。我想知道如何单击主页上的“付款”打开付款侧导航及其嵌套列表并重定向到付款页面。我知道这没有意义，但是如果您单击文档页面并尝试一下，您可能会理解我想要实现的目标。

标签： cssreactjsuser-interfacesidebaruser-experience

解决方案

You can achieve similar behavior with CSS height transition. They appears to be pretty smooth on desktop (60fps is achievable but not through full transition period). If you need more control (for example close other navigation 'ul's when other is opened) you can remove checkbox elements and change label elements to "h2". Then set "onclick" listener on "h2" elements in JS code that will add class (with styles from "input:checked ~ ul") to selected "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>

Another solution is to write JS animation, for example using "window.requestAnimationFrame" API, to animate height of "ul" element. (I think that this is what exacly is happening on stripe.com)

推荐阅读