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制作関連

    今どきなUIデザインサンプル35個

    アプリやWebサービスのインターフェイスに役立ちそうなUIサンプルです…

  2. WEB制作関連

    パララックス効果で奥行きを魅せるWEBサイトまとめ

    パララックス効果とは視差効果ともいい、平面で重なり合う画像を異なる速さ…

  3. WEBディレクターズマニュアル

    WEBディレクターの為のEXCEL術(1)作業スケジュール

    個人的な感覚値ですが、優秀なWEBディレクターさんは総じてMS Exc…

  4. WEB制作関連

    「jQuery逆引きマニュアル 」の読者モニターをやってみた vol.01

    「jQuery逆引きマニュアル Webデザインの現場で役立つ基本と実践…

  5. WEB制作関連

    HTML5を学ぶなら必ず見ておきたいWEBサイト35選

    そろそろ本格的に学びたいHTML5ですが、そんな時にぜひ参考にしたいW…

  6. WEB制作関連

    色とWEBデザイン -オレンジ編-

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

  1. 話題・トレンド

    リアルとバーチャルの融合「プロジェクションマッピング」
  2. Design Items

    クリエイティブな2012年カレンダーのまとめ
  3. WEB制作関連

    MT4.2でブログ記事に関連記事一覧を表示
  4. 話題・トレンド

    クリエイティブな交通広告を集めてみた。
  5. 話題・トレンド

    モレスキンのカッコいい使い方。
PAGE TOP
Top