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. no-image

    JavaScript

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

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

  2. PrognRoll

    JavaScript

    スクロールによるプログレスバーを表示できるjQueryプラグイン「PrognRoll」

    PrognRollはスクロールによるプログレスバーを表示することができ…

  3. JavaScript

    水面にゆらゆらと波打つ動きを与えてくれるjQueryプラグイン「lake.js」

    面白そうなプラグインだったので使ってみました。画像を指定するとその画像…

  4. Force.js

    JavaScript

    要素を手軽にアニメーション化できる「Force.js」

    Force.jsはページ上の要素を手軽にアニメーション化させることがで…

  5. Siema

    JavaScript

    軽量でシンプルで依存性のないカルーセルを実装できる「Siema」

    Siemaは軽量でシンプル、そしてjQueryなどの依存性のないカルー…

  6. JavaScript

    jQuery MobileでWebサイトをスマートフォン対応にする時に見ておきたい記事のまとめ

    今更ながらようやくjQuery Mobileを使い始めたんですが、基本…

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP