no-image

JavaScript

レスポンシブでマルチレベルに対応したナビゲーション「K-Responsive-Menu」

K-Responsive-Menuは、レスポンシブでマルチレベルに対応したナビゲーションメニューを実装できるjQueryプラグインです。ファイル容量も軽量でモバイルフレンドリーなことから、スマホやタブレットからの閲覧・操作性も良好です。

K-Responsive-Menu

デモ

デモでは大きく分けて水平(Horizontal)と垂直(Vertical)の2タイプが用意されています。水平のデモには、Basic、Basic with form、Fluid、Push Left、Push Right、Push Left + Pull Mail、Push Right + Pull Main、Map to、BackDrop、Using Attributeが、垂直のデモにはBasic、Basic with form、Push rightが用意されています。

デモでは画面を縮小していくと特定のポイントでハンバーガーアイコンに切り替わります。モバイル版ではハンバーガーアイコンをクリックするとメニューが表示されます。メニューが上からスライドで降りてきたり左から出てきたりと、様々な動きのナビゲーションが実装可能です。

アニメーションのスピードやメニュータイプなど、APIも豊富でカスタマイズ性も高いのがいいですね。イベントもいろいろ用意されているので、気になる人はぜひチェックしてみてください。

K-Responsive-Menu

HC Stickyスクロールしても要素を固定できるJSライブラリ「HC Sticky」前のページ

フラットでシンプルなカラーピッカー実装「Pickr」次のページno-image

関連記事

  1. no-image

    JavaScript

    タブやアコーディオンを実装できるjQueryプラグイン「jpix」

    jpixはシンプルなタブやアコーディオンを実装することができるjQue…

  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでJavaScriptのfor…inを使ってオブジェクトから値を1つずつ取り…

    JavaScriptにはfor...inというプロパティの数だけ繰り返…

  3. FitText

    JavaScript

    テキストサイズをブラウザ幅の大きさに自動で合わせてくれるjQueryプラグイン「FitText」

    可変するブラウザ幅にテキストサイズを自動で合わせてくれるjQueryプ…

  4. jQuery Navobile
  5. jQuery touchSwipe Carousel
  6. JavaScript

    リストなど複数の要素をランダムにフェードで表示していくjQueryプラグイン「champagne.j…

    どこかで使う機会がありそうな感じのjQueryプラグイン「champa…

最近の記事

  1. EOS R5
  2. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ
  3. ペットボトルホルスター

アーカイブ

PAGE TOP