ITエンジニア/デザイナ向けにオープンソースを毎日紹介

最近のWebサイトではサイドバーをなくして1カラムですっきりとしたデザインのサイトが増えています。そんな時にメニューをどう表示するかは問題です。1、2個であればヘッダーに並べても良いですが、複数あった場合はどうでしょう。

そこで使ってみたいのがスマートフォンアプリでよくあるスライド式メニューです。Pushyを使えばスムーズなアニメーション付きメニューを簡単に実装できます。

Pushyの使い方

Pushyを使ったHTMLは次のようになります。

<!-- Pushy Menu -->
<nav class="pushy pushy-left">
    <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
    </ul>
</nav>

<!-- Site Overlay -->
<div class="site-overlay"></div>

<!-- Your Content -->
<div id="container">
    <!-- Menu Button -->
    <div class="menu-btn">&#9776; Menu</div>
</div>

とても簡単な構造で分かりやすいです。

実際に使うと次のようになります。
実際に使うと次のようになります。

CSSを使ったアニメーションで、メインコンテンツが徐々に暗くなるのも良い感じです。モバイルデバイスでもスムーズに動くように実装されています。対応ブラウザはデスクトップであればIE7以上(jQueryのアニメーション利用)、スマートフォンであればAndroid 4.x以上、iOS 7以上となっています。

jQuery 1.9以上は必要ですが、UIフレームワークに依存する訳ではないのでどのサイトでも気軽に使えそうです。

PushyはJavaScript/CSS3製のオープンソース・ソフトウェア(MIT License)です。

Pushy - Off-Canvas Navigation Menu

christophery/pushy

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2