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

Question

我希望只使用 CSS 制作一个像纸一样展开的导航菜单，看起来像这样：http://felixniklas.com/paperfold/ 因为它主要使用 CSS 来创建过渡效果。

可惜我得到的效果还是不太好，是这样的：https://jsfiddle.net/yaharga/7z2rg8gk/。显示有空格，li 没有粘在一起。理想情况下，我也想让效果显示在子菜单上。

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

// 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 的代码笔）。当边距折叠时，我将边距设置为菜单项大小的两倍，所以它是完美的。这是我能达到的最接近预期效果的效果，尽管我更愿意获得 Felix Niklas 插件的效果。我认为它也使用阴影，但不能用纯 CSS 实现，因为过渡是线性的。

您可以纠正我所说的任何内容或添加到我的代码中。

// 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>

编辑：对于所有感兴趣的人，我在这里使用框阴影完成了效果：。

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

How to make menu fold like paper using CSS?

html

css

css-transitions

css-transforms