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

関連記事

  1. Water Wave Effect jQuery
  2. t.js

    JavaScript

    タイプライターで文字を入力するようなテキストエフェクトのjQueryプラグイン「t.js」

    t.jsというjQueryプラグインを使えば、タイプライターで文字を入…

  3. funnyText.js
  4. Materialize Tags

    JavaScript

    マテリアルデザインのタグ管理を実装できる「Materialize Tags」

    Materialize Tagsは、マテリアルデザインのタグ管理を実装…

  5. no-image

    JavaScript

    レスポンシブに対応したモーダルウィンドウのようなアラート実装「jquery.alert」

    jquery.alertはレスポンシブに対応したモーダルウィンドウ風の…

  6. Skitter

    JavaScript

    豊富なアニメーションでカスタマイズ性に優れたスライドショーを実装できる「Skitter」

    Skitterは豊富なアニメーションでカスタマイズ性に優れたスライドシ…

最近の記事

  1. M360bt

アーカイブ

PAGE TOP