WEB制作関連

アプリのようなスライドメニューを実装するプラグイン6選

facebookのスマートホンサイトなどでも採用されているサイドからスライドして表示されるメニューを実装できるプラグインを紹介します。

ちなみにこのサイドからスライドして表示される形式のメニューはドロワーメニューと呼ばれるようです。

表示領域の限られたスマートホンサイトではドロップダウンのメニューもよく見かけますが、格納する内容が多い場合などはコンテンツ位置を固定したままスクロールできるドロワーメニューの方が相性がよさそうですね。

Sidr

drawer_01.jpg

jQuery.mmenu

drawer_02.jpg

PageSlide

drawer_03.jpg

Drawer Slide Menu

drawer_04.jpg

jPanelMenu

drawer_05.jpg

Sidebar Transitions

drawer_06.jpg

ちなみにこのブログのスマートホン版では「Sidr」を利用しています。

それぞれ動作や格納するコンテンツのマークアップの仕方などが異なるので自身のWebサイトにあったものを選んでいただくとよいかと思います。

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

  1. WEB制作関連

    円形を効果的に使用したWEBデザイン50個

    WEBデザインはコーディングを含めグリッドをベースに考えることが多いと…

  2. WEB制作関連

    デザイナーなら必ずダウンロードしたいフリーフォント100個

    クールなものやポップなものなど、デザインに重宝しそうなフリーフォントの…

  3. WEB制作関連

    使いづらい(!?)けどフリーで高品質なアイコン素材60個

    「汎用性がない。」「何に使うの?」というものもありますが、ピッタリはま…

  4. WEB制作関連

    色とWEBデザイン -ピンク編-

    色別WEBデザインのまとめです。今回のテーマは「ピンク」です。…

  5. WEB制作関連

    クリエイティブなシングルページWEBサイト20選

    1枚構成のビジュアルをベースにしたWEBサイトのまとめです。&…

  6. WEB制作関連

    Webサイトをレイヤーに分けて保存できる「Page Layers」

    久々の更新になってしまいましたがおもしろいMac Appを見つけたので…

  1. 話題・トレンド

    大迫力なアートオペラ「Bregenz Festival」
  2. WEB制作関連

    話題の「about.me」でプロフィールページをつくってみた。
  3. WEB制作関連

    より良いナビゲーションにするためのjQueryプラグイン40個
  4. LifeHack・仕事術

    忙しい相手にもすぐに返答してもらえるメール術
  5. 話題・トレンド

    思わず微笑んでしまう画像集
PAGE TOP
Top