jQuery Navobile

JavaScript

横スライドが素敵!レスポンシブ対応モバイルナビゲーション「jQuery Navobile」

jQuery NavobileというjQueryプラグインを使えば、レスポンシブに対応したモバイルナビゲーションを実装することができます。モバイル時のナビゲーションでは、メニューアイコンをクリックすると横からスライド表示されます。とても実用的でよさそうですね。

[ads_center]

jQuery Navobileの使い方

以下はPC閲覧時の場合です。

PC閲覧時

スマホなどのモバイル時のブラウザサイズでは以下のようなナビゲーションに切り替わります。

モバイル時

メニューアイコンをクリックすると、こんな感じでナビゲーションが横からスライドで表示されます。

横からスライドで表示

使い方もシンプルそうでいいですね。

$('#navigation').navobile();

オプションもcta、content、easing、bindSwipe、bindDragといった色んな項目が用意されています。

jQuery Navobile

フリーのアイコンセットWebページやモバイルサイトで使いたいフリーのアイコンセット前のページ

シンプルなスクロールエフェクトを実装できるjQueryプラグイン「ScrollMe」次のページScrollMe

関連記事

  1. gridstack.js

    JavaScript

    ウィジェットレイアウトを作成できるjQueryプラグイン「gridstack.js」

    gridstack.jsはドラッグ&ドロップでウィジェットレイアウトを…

  2. MG Space

    JavaScript

    Google画像のようなアコーディオンプラグイン「MG Space」

    MG SpaceはGoogle画像のようなjQueryアコーディオンプ…

  3. Glide.js

    JavaScript

    軽量・フレキシブル・高速なスライダー&カルーセル実装「Glide.js」

    Glide.jsは軽量・フレキシブル・高速なJavaScript ES…

  4. jQuery Hero Slider Plugin
  5. Product comparison

    JavaScript

    製品などの比較に役立つjQueryプラグイン「Product comparison」

    Product comparisonは、いくつかの種類のものを比較する…

  6. JavaScript

    とても簡単にカッコいいタグクラウドを実装することができるjQueryプラグイン「jQCloud」

    とってもカッコいいタグクラウドを実装することができるjQueryプラグ…

最近の記事

  1. EOS R6
  2. EOS R5
  3. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ

アーカイブ

PAGE TOP