Pushy - UIフレームワークに依存しないスライド式ナビゲーションメニュー
最近のWebサイトではサイドバーをなくして1カラムですっきりとしたデザインのサイトが増えています。そんな時にメニューをどう表示するかは問題です。1、2個であればヘッダーに並べても良いですが、複数あった場合はどうでしょう。
そこで使ってみたいのがスマートフォンアプリでよくあるスライド式メニューです。Pushyを使えばスムーズなアニメーション付きメニューを簡単に実装できます。
Pushyの使い方
Pushyを使ったHTMLは次のようになります。
<!-- Pushy Menu -->
<nav class="pushy pushy-left"><br><ul>
<br><li><a href="#">Item 1</a></li>
<br><li><a href="#">Item 2</a></li>
<br>
</ul>
<br></nav>
<!-- Site Overlay -->
<!-- Your Content -->
<!-- Menu Button -->
☰ Menu
とても簡単な構造で分かりやすいです。
CSSを使ったアニメーションで、メインコンテンツが徐々に暗くなるのも良い感じです。モバイルデバイスでもスムーズに動くように実装されています。対応ブラウザはデスクトップであればIE7以上（jQueryのアニメーション利用）、スマートフォンであればAndroid 4.x以上、iOS 7以上となっています。
jQuery 1.9以上は必要ですが、UIフレームワークに依存する訳ではないのでどのサイトでも気軽に使えそうです。
PushyはJavaScript/CSS3製のオープンソース・ソフトウェア（MIT License）です。