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

    JavaScript

    テーブルのヘッダーを固定できるjQueryプラグイン「floatThead」

    floatTheadはテーブルのヘッダーを固定することができるjQue…

  2. graphite

    JavaScript

    シンプルな棒グラフを生成できる「graphite」

    graphiteはシンプルな棒グラフを生成できるJavaScriptラ…

  3. Listt

    JavaScript

    リストをiOSのようにアニメーションできるjQueryプラグイン「Listt」

    ListtはリストをiOSのセレクトボックスのようにアニメーションさせ…

  4. Owl Carousel

    JavaScript

    タッチ操作やレスポンシブにも対応したカルーセルを実装できるjQueryプラグイン「Owl Carou…

    素晴らしいカルーセルを実装できるjQueryプラグインがあったのでご紹…

  5. JavaScript

    とても簡単にクールなドロップダウンを実装できるjQueryプラグイン「DropKick」

    個人的に使いやすそうだったので備忘録です。DropKickというjQu…

  6. no-image

    JavaScript

    アクセシブルなビフォーアフター画像を実装できる「BeerSlider」

    BeerSliderはVanilla JSによるアクセシブルなビフォー…

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP