3D transformsを使った効果的な折りたたみ表現を与えられる「meny.js」

3D transformsを使った効果的な折りたたみ表現を与えられる「meny.js」サンプル 要素を隠しておいて、マウスオーバーで表現という手法は多いです。
今回紹介するMeny - CSS 3D fold-in menu conceptもそのひとつですが、表現が印象的で目立つものとなっています。
※CSS3のtransformsを利用しているためブラウザにより表現ができないことがあります

使用方法 hakimel/Menyからファイル一式をダウンロード。
head内にCSSを。
<link rel="stylesheet" href="meny.css" />
</body>直上にjsを記述します。
<script type="text/javascript" src="meny.js"></script>
最後に本文を以下のように記述していきます。
<div class="meny">
隠れている部分
</div>
<!-- 矢印部分 -->
<div class="meny-arrow">►</div>
<div class="meny-contents">
<div class="cover"></div>
<!-- メインコンテンツ記述 -->
</div>

3D transformsを使った効果的な折りたたみ表現を与えられる「meny.js」サンプル

sponsors

「3D transformsを使った効果的な折りたたみ表現を与えられる「meny.js」」をシェアする

記事作成:
記事URL:

TOP > > > 3D transformsを使った効果的な折りたたみ表現を与えられる「meny.js」