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. Guardian

    JavaScript

    フォームにバリデーションを実装できるjQueryプラグイン「Guardian」

    Guardianはフォームにバリデーション機能を実装することができるj…

  2. Adi.js

    JavaScript

    アドブロックを検知してくれる「Adi.js」

    Adi.jsはアドブロックを検知してくれるjQueryプラグインです。…

  3. no-image

    JavaScript

    レスポンシブでスタイリッシュな「lightbox-jquery-plugin」

    lightbox-jquery-pluginは、レスポンシブに対応した…

  4. Simple button checks

    JavaScript

    カスタマイズ可能なチェックボックスを実装できる「Simple button checks」

    Simple button checksはカスタマイズ可能なチェックボ…

  5. no-image

    JavaScript

    多彩な方向に表示できるツールチップ「jq-tooltip」

    jq-tooltipは多彩な方向に表示可能なツールチップを実装できるj…

  6. Typewriter JS

    JavaScript

    タイプライターっぽいエフェクトでテキストを表現できる「Typewriter JS」

    Typewriter JSは、タイプライターを使って文字入力するような…

最近の記事

  1. DCG-CA21
  2. Apple WatchでのMacロック解除を無効
  3. オータムスイートポテトフラペチーノ
  4. 紅葉
  5. ナノケア EH-NA0E

アーカイブ

PAGE TOP