如何使用CSS将菜单像纸一样折叠

Question

我希望制作一个仅使用CSS像纸一样展开的导航菜单，看起来像这样的东西：http：//felixniklas.com/prapefold/过渡效果。

不幸的是，我得到的效果仍然不那么好，就是这样：https：//jsfiddle.net/yaharga/7z2rg8gk/。有一些空间显示，li不要粘在一起。理想情况下，我也想对子菜单进行效果。

我总结了代码以显示涉及的过渡和转换：

// Nav Button Toggle
jQuery('.dropdown-toggle').on('click', function() {
  jQuery(this).toggleClass('active');
});

.dropdown-toggle {
  color: #ecf0f1;
  padding: 12px 0;
}
.dropdown-toggle.acitve {
  color: #bdc3c7
}
.toggleable {
  -webkit-transition: max-height .75s ease-in-out, -webkit-transform .75s ease-in-out, visibility .75s ease-in-out;
  transition: max-height .75s ease-in-out, transform .75s ease-in-out, visibility .75s ease-in-out;
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-perspective: 320px;
  perspective: 320px;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  list-style: none;
  position: relative;
  margin: 0;
  padding: 0
}
.dropdown-toggle.active+.toggleable {
  visibility: visible;
  max-height: 1200px;
  -webkit-transform: scaleY(1);
  transform: scaleY(1)
}
.nav-primary {
  margin: 30px 10px;
  text-align: center;
  position: relative
}
#menu-main-toggle {
  border: 0;
  background-color: #e74c3c;
  width: 100%;
  border-bottom: 1px dashed #c0392b;
}
#menu-main {
  width: 100%;
  position: absolute
}
#menu-main,
.toggleable {
  position: relative
}
.dropdown-toggle,
.menu-item {
  background: #e74c3c
}
.menu-item {
  border-top: 1px dashed #c0392b;
  transition: transform .75s ease-in-out;
}
.dropdown-toggle.active + #menu-main .menu-item {
  transform: rotateX(0deg);
}
.odd {
  transform: rotateX(-90deg);
}
.even {
  transform: rotateX(90deg);
}
.menu-item.first {
  border-top: none
}
.menu-link {
  display: block;
  padding: 12px 0;
  color: #ecf0f1
}
.menu-link:active {
  color: #fbfcfc
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<nav class="nav-primary">
  <button id="menu-main-toggle" class="dropdown-toggle">Menu</button>
  <ul id="menu-main" class="nav toggleable hide">
    <li class="odd first menu-item"><a class="menu-link" href="//localhost:3000/index.php/about/">About</a></li>
    <li class="even menu-item"><a class="menu-link" href="/index.php/category/bahrain/">Bahrain</a></li>
    <li class="odd menu-item parent"><a class="menu-link" href="/index.php/category/information-technology/">Information Technology</a>
    </li>
    <li class="even menu-item"><a class="menu-link" href="/index.php/category/snippets/">Snippets</a></li>
    <li class="odd last menu-item"><a class="menu-link" href="//localhost:3000/index.php/contact/">Contact</a></li>
  </ul>
</nav>

Answer 1

我通过使用负余量和过渡到转换到过渡所需的时间相同的时间来解决它（解决方案的信用转换为 @gcyrillus的codepen）。我将保证金设置为菜单项大小的两倍，因为利润率崩溃，所以它是完美的。这是我最接近所需的效果的最接近，尽管我希望获得Felix Niklas的插件的效果。我认为它也使用阴影，但是由于过渡是线性的，因此不能用纯CS实现。

您可能会在我所说的任何一个或添加到我的代码中纠正我。

// Nav Button Toggle
jQuery('.dropdown-toggle').on('click', function() {
  jQuery(this).toggleClass('active');
});

.dropdown-toggle {
  color: #ecf0f1;
  padding: 12px 0;
}
.dropdown-toggle.acitve {
  color: #bdc3c7
}
.toggleable {
  -webkit-transition: max-height .75s ease-in-out, -webkit-transform .75s ease-in-out, visibility .75s ease-in-out;
  transition: max-height .75s ease-in-out, transform .75s ease-in-out, visibility .75s ease-in-out;
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  list-style: none;
  position: relative;
  margin: 0;
  padding: 0
}
.toggleable .toggleable {
  -webkit-transform-origin: center;
  transform-origin: center;
}
.dropdown-toggle.active+.toggleable {
  visibility: visible;
  max-height: 1200px;
  -webkit-transform: scaleY(1);
  transform: scaleY(1)
}
#nav-primary {
  margin: 30px 10px;
  text-align: center;
  position: relative
}
#menu-main-toggle {
  border: 0;
  background-color: #e74c3c;
  width: 100%;
  border-bottom: 1px dashed #c0392b;
  height: 50px;
}
#menu-main {
  width: 100%;
  position: absolute
}
.dropdown-toggle,
.menu-item {
  background: #e74c3c
}
.menu-item {
  border-top: 1px dashed #c0392b;
  height: 50px;
  transition: transform .75s ease-in-out, margin .75s ease-in-out;
}
#menu-main .menu-item.odd {
  -webkit-transform: perspective(320px) rotateX(90deg);
  transform: perspective(320px) rotateX(90deg);
  -webkit-transform-origin: bottom;
  transform-origin: bottom;
  margin-top: -100px
}
#menu-main .menu-item.even {
  -webkit-transform: perspective(320px) rotateX(-90deg);
  transform: perspective(320px) rotateX(-90deg);
  -webkit-transform-origin: top;
  transform-origin: top;
  margin-bottom: -100px
}
#nav-primary .dropdown-toggle.active + .toggleable .menu-item {
  -webkit-transform: perspective(320px) rotateX(0deg);
  transform: perspective(320px) rotateX(0deg);
  margin: 0
}
.menu-item.first {
  border-top: none
}
.menu-link {
  display: block;
  padding: 12px;
  color: #ecf0f1
}
.menu-link:active {
  color: #fbfcfc
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<nav id="nav-primary">
  <button id="menu-main-toggle" class="dropdown-toggle">Menu</button>
  <ul id="menu-main" class="nav toggleable hide">
    <li class="odd first menu-item"><a class="menu-link" href="//localhost:3000/index.php/about/">About</a></li>
    <li class="even menu-item"><a class="menu-link" href="/index.php/category/bahrain/">Bahrain</a></li>
    <li class="odd menu-item parent"><a class="menu-link" href="/index.php/category/information-technology/">Information Technology</a>
    </li>
    <li class="even menu-item"><a class="menu-link" href="/index.php/category/snippets/">Snippets</a></li>
    <li class="odd last menu-item"><a class="menu-link" href="//localhost:3000/index.php/contact/">Contact</a></li>
  </ul>
</nav>

edit ：对于所有感兴趣的人，我在此处使用盒子遮盖完成了效果：https：//stackoverflow.com/a/38083570/1934402。