わお!
Javascriptサンプルページ一覧
skuare.net

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

要素を隠しておいて、マウスオーバーで表現という手法は多いです。 今回紹介するMeny - CSS 3D fold-in menu conceptもそのひとつですが、表現が印象的で目立つものとなっています。
※CSS3のtransformsを利用しているためブラウザにより表現ができないことがあります

sponsors

使用方法

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>
			

サンプル

左の矢印

sponsors