HR Navigation Responsive Menu

JavaScript

Webアプリケーションに最適なレスポンシブ対応メニュー「HR Navigation Responsive Menu」

HR Navigation Responsive Menuは、Webアプリケーションに最適なレスポンシブに対応したナビゲーションメニューを実装することができます。PCはもちろん、モバイルでも操作しやすいナビゲーションメニューです。

HR Navigation Responsive Menu

デモ

デモでは「Live Demo」というところに、PC版のナビゲーションメニューのサンプルが用意されています。Menu 3とMenu 4には子メニューも設定されていて、マウスオーバーすると表示される仕組みになっています。

レスポンシブ対応なので、ブラウザ幅を縮小していくとモバイル版に切り替わります。モバイル版ではハンバーガーアイコンが表示されるので、ここをクリックするとナビゲーションメニューが開かれます。

子メニューが設定されているMenu 3とMenu 4の右側には、下矢印が表示されているのでここをクリックすると子メニューが開かれます。

ナビゲーションメニュー、子メニューともにスライドダウン・スライドアップによるアニメーションで開閉されます。

モバイル版ではハンバーガーアイコンをクリックしないとメニューが表示されないので、スペースを有効活用したい人にはピッタリですね。

また、デモページの下の方には最初からモバイル版のナビゲーションメニューになっているサンプルも設置されています。

Demo 1は上からのスライドダウン表示、Demo 2は左からのスライド表示になります。

HR Navigation Responsive Menuにはオプションもいくつか用意されており、speed、menuType、desktopListWidth、openEvent、multipleといった項目があります。

ファイル容量もかなり軽量なので、よりモバイルにピッタリといえそうですね。

というわけで、Webアプリケーションに使用するレスポンシブ対応のナビゲーションメニューを探している人は、ぜひチェックしてみてください。

HR Navigation Responsive Menu

Tippy.js軽量ながらも多彩なツールチップを実装できるJSライブラリ「Tippy.js」前のページ

カスタマイズ性が高くアクセシビリティ(WAI ARIA)に優れたアラート実装「SweetAlert2」次のページSweetAlert2

関連記事

  1. Tipr

    JavaScript

    軽量、フラット、シンプルなツールチップを実装できるjQueryプラグイン「Tipr」

    Tiprはフラットでシンプルなツールチップを実装することができるjQu…

  2. cascadingDivs
  3. Hover Carousel

    JavaScript

    超軽量なホバーカルーセルを実装できる「Hover Carousel」

    Hover Carouselは超軽量なホバーで動作するカルーセルを実装…

  4. Coin Slider

    JavaScript

    ユニークなエフェクトを実装できるjQueryイメージスライダー「Coin Slider」

    ユニークなエフェクトで画像がスライドしていくjQueryイメージスライ…

  5. JavaScript

    テキストに炎のようなエフェクトを追加してくれるjQueryプラグイン「jQuery Burn」

    テキストに炎のようなエフェクトを追加してくれるjQueryプラグイン「…

  6. jQuery Seat Charts

最近の記事

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

アーカイブ

PAGE TOP