1
CSSを使って紙のように展開するナビゲーションメニューは、http://felixniklas.com/paperfold/のようになります。これは主にCSSを使ってトランジションエフェクトを作成するためです。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>
私はすぐに完全な答えを開発する時間がありませんが、私はあなたが望むものに近づいたときに、いつかcodepenで何かを作ったのです：http://codepen.io/wbarlow/pen/obWqEZ。とにかく、あなたを始めるのに十分かもしれません。 –
PaperfoldはMITライセンスを受けており、作者に帰属して自由に使用することができます。ソースコードはGitHub上にあるので、効果をどのように達成しているかを正確に見ることができます（300行未満）。あなたはすでにあなたの例でjQueryに頼っています。 Paperfoldを利用してサブメニューを追加しようとしないのはなぜですか？ – Sam
@ Sam私は、jQueryを使用してインラインスタイルを作成する代わりに、スタイルシートを使用したいと思っています。それはとにかにアニメーションのためにCSSを使用します。自分で効果を実装するのではなく、それを組み込むと冗長になります。 – yaharga