Question

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

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

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

＆＃13;

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

＆＃13;

.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
}

＆＃13;

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

＆＃13;

Answer 1

我通过使用负余量解决了这个问题，并转换了转换过渡所需的时间（转换为@ GCyrillus的代码集）。我将边距设置为菜单项大小的两倍，因为边距会崩溃，所以它非常完美。它是我能达到预期效果的最接近的，尽管我更愿意获得Felix Niklas插件的效果。我认为它也使用阴影，但这不能用纯CSS实现，因为转换是线性的。

您可以对我说的任何内容或我的代码中的任何内容进行更正。

＆＃13;

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

＆＃13;

.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
}

＆＃13;

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

＆＃13;

修改：对于所有感兴趣的人，我在此处使用框阴影完成了效果：https://stackoverflow.com/a/38083570/1934402。

如何使用CSS将菜单折叠成纸张？

1 个答案: