[CSS]パタパタっと折り畳むアニメーションが気持ちいいナビゲーションを実装するテクニック
Post on:2014年6月18日
子アイテムをパタパタっと折り畳むアニメーションが気持ちいいナビゲーションを実装するスタイルシートのテクニックを紹介します。
デモ
実際の動作は、下記のデモページで確認できます。
実装
HTML
ナビゲーションの親のカテゴリはdivでまとめ、各子供はリストで実装します。
<div class="navbar"> <a class="menu" href="#">MENU</a> <div class="link large" href="#"> <span class="active"><i class="icon-twitter"></i>Twitter</span> <ul class="hover-bot"> <a href="">Reply</a> <a href="">Favorite</a> </ul> <ul class="hover-top"> <a href="">Follow</a> <a href="">Retweet</a> </ul> </div> <div class="link" href="#"> <span class="active"><i class="icon-facebook"></i>Facebook</span> <ul class="hover-bot"> <a href="">Comment</a> </ul> <ul class="hover-top"> <a href="">Like</a> </ul> </div> <div class="link" href="#"> <span class="active"><i class="icon-google-plus"></i>Google Plus</span> <ul class="hover-bot"> <a href="">Share</a> </ul> <ul class="hover-top"> <a href="">Add to Circle</a> </ul> </div> <div class="end"></div> </div>
CSS
ぱたぱたさせるアニメーションの本体は、ulタグの.hover-botと.hover-topでこれらがセットになることで折り畳むようになります。
.navbar { position: fixed; left: 0; width: 200px; height: 100%; -webkit-box-shadow: 1px 0 1px 0 rgba(0,0,0,.1); box-shadow: 1px 0 1px 0 rgba(0,0,0,.1); background-color: #666; } .navbar i { margin-right: 10px; } .navbar a.menu { display: block; margin: 0; width: 100%; height: 50px; color: #444; background-color: #fff; font-size: 23px; line-height: 50px; } .navbar .link { position: relative; display: block; margin: 0; width: 100%; height: 50px; z-index: 1; perspective: 100px; -webkit-perspective: 100px; /* Safari and Chrome */ transition: .23s; -webkit-transition: .23s; } .navbar .link:hover { height: 150px; } .navbar .link.large:hover { height: 230px; } .navbar .link a { display: block; color: #999; text-align: left; padding-left: 20px; transition: .3s; -webkit-transition: .3s; } .navbar .link a:hover { color: #666; padding-left: 30px; } .navbar .link span.active, .navbar .link .hover-top, .navbar .link .hover-bot { display: block; position: absolute; width: 100%; height: 50px; line-height: 50px; left: 0; top: 0; color: #777; font-size: 12px; transition: .23s; -webkit-transition: .23s; } /* Larger foldout size */ .navbar .link.large .hover-top, .navbar .link.large .hover-bot { line-height: 45px; height: 90px; } .navbar .link.large:hover .hover-bot { transform: translateY(140px) rotateX( 0deg ); -webkit-transform: translateY(140px) rotateX( 0deg ); background-color: #f0f0f0; } .navbar .link span.active { top: 0; left: 0; background-color: #fff; color: #aaa; font-size: 13px; border-top: 1px solid rgba(0,0,0,.1); } .navbar .link .hover-top { top: 50px; transform-origin: 0% 0% 0px; -webkit-transform-origin: 0% 0% 0px; transform: rotateX( -90deg ); -webkit-transform: rotateX( -90deg ); z-index: -1; background-color: #fff; } .navbar .link:hover .hover-top { transform: rotateX( 0deg ); -webkit-transform: rotateX( 0deg ); background-color: #f0f0f0; } .navbar .link .hover-bot { transform-origin: 0% 100% 0px; -webkit-transform-origin: 0% 100% 0px; transform: rotateX( 130deg ); -webkit-transform: rotateX( 130deg ); z-index: -1; background-color: #888; } .navbar .link:hover .hover-bot { transform: translateY(100px) rotateX( 0deg ); -webkit-transform: translateY(100px) rotateX( 0deg ); background-color: #f0f0f0; } .navbar .end { position: relative; z-index: 1; width: 100%; height: 100%; background-color: #fff; border-top: 1px solid rgba(0,0,0,.1); }
sponsors