Snap.svgを使ったスライドしてくる動きが気持ちいドロワーメニューです。

Off-Canvas Menu Effectsのサイトでは9つの動きが紹介されてますが、
そのなかでも一番気に入ったBubbleをやってみました。

デモサイト

ぷるんっと動きます。

ダウンロード

Off-Canvas Menu EffectsのページのDownloadをクリックして、
ファイル一式をダウンロードします。

Off-Canvas Menu Effects

たくさんありますが、9つの動き分あるので、
使用するのは一部です。

読み込み

jsフォルダの「snap.svg-min.js」と「classie.js」。
また、今回はBubbleをやってみるので、「main4.js」と
CSSフォルダの「menu_bubble.css」を読み込みます。

<link rel="stylesheet" href="menu_bubble.css">
<script src="snap.svg-min.js"></script>
<script src="classie.js"></script>
<script src="main4.js"></script>

HTML

HTMLの構造を以下のようにします。

<div class="container">
<div class="menu-wrap">
		<nav class="menu">
			<div class="icon-list">
                                <!-- メニューの箇所 -->
				<a href="#">メニュー1</a>
				<a href="#">メニュー2</a>
				<a href="#">メニュー3</a>
			</div>
		</nav>
<button class="close-button" id="close-button">Close Menu</button>
<div class="morph-shape" id="morph-shape" data-morph-open="M-7.312,0H15c0,0,66,113.339,66,399.5C81,664.006,15,800,15,800H-7.312V0z;M-7.312,0H100c0,0,0,113.839,0,400c0,264.506,0,400,0,400H-7.312V0z">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 800" preserveAspectRatio="none">
<path d="M-7.312,0H0c0,0,0,113.839,0,400c0,264.506,0,400,0,400h-7.312V0z"/>
</svg>
</div>
</div>
<button class="menu-button" id="open-button">Open Menu</button>
<div class="content-wrap">
<div class="content">
<!-- コンテンツ部分 -->
</div><!-- /content-wrap -->
</div><!-- /container -->

CSSやJSは特に記述はありません。

.containerや.contentを必要に応じてスタイルを変更するぐらいです。

ちょっと残念なところ

けっこう簡単に面白い動きのドロワーメニューを実装できるのはいいですが、
ちょっと残念なところも。。

①拡張性がない。

メニューの表示範囲が決まっているようです。

例えば、メニューが増えていった場合、下の方のメニューは見れなくなってしまいます。

デモサイトではメニュー19まで記述してますが、
メニュー11までで切れてしまってます。

記述ミスかな？と思いましたが、ダウンロードしたファイルで試してみても同じ結果なので、そういう仕様なのだと思います。

最初からメニューの数が決まっていればいいですが、
今後も増えていくかもという場合は適していないです。

②メニューが開いている時、コンテンツ部分もスクロールする

これは個人的な希望ですが、ドロワーメニューが開いている時は、
コンテンツ部分は動かないでほしいです。

メニューを見てるので、コンテンツ部分が動く必要ないですし。

さいごに

とはいっても、動きはすごく気持ちいい！

実装も簡単なので、そのうち使ってみたいです。

他の動きも面白いです。