jQuery

軽量のスクリプトで簡単に!レスポンシブメニューを実装できるResponsive Nav


みなさんこんにちは、mayukouです!

今回は、うちのブログで結構人気の高いトピック、
レスポンシブのメニューの新しい方法をご紹介します!縮小するとハンバーガーアイコンに替わるスクリプトです。
方法もシンプルですよ〜

では、行ってみましょう!

スポンサードリンク

194-responsive

Responsive Navの特徴

・JSファイルが1KBほどで軽量
・JSファイルは一つだけでその他のライブラリは読み込まなくていい
・CSS3のトランジションやホバー、マークアップを採用
・IE6から対応している

などなどあります。

デモ ダウンロード

19-resp
PCビュー

20-resp
スマホビュー

ブラウザを収縮させるとメニューがハンバーガアイコンに変わります!

Responsive Navの導入

それでは、導入方法です!

スクリプトをダウンロードする

公式サイトから、responsive-nav.js-master.zipというファイルをダウンロードできます。

解凍したら、responsive-nav.cssとresponsive-nav.jsを使います。
任意のフォルダ(jsフォルダなど)を作成し入れておきましょう。

21-resp

ヘッダーに

HTMLに

メニューとなるリストタグを囲むタグ(divやnavなど)にclass=”nav-colappse”を設定します。

body閉じタグの直前に(プラグインの読み込み)

カスタマイズ

英語にて書かれてあります。

主に使用する部分

animate:CSS3を使ったトランジションアニメーションを使うかどうかの設定
transition:トランジションのスピード
label:ハンバーガーアイコンの横に入れる言葉の設定。ここでは”Menu”
Insert:トグルをナビゲーションの前もしくは後に設置するかの設定 before or after
navClass:”nav-collapse” navタグのクラス指定

最後に

いかがでしたか?レスポンシブメニューの方法をご紹介しました。シンプルなので仕事でも使っています。
皆さんもぜひ使ってみてくださいね〜

投稿者プロフィール

mayukou
mayukou
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. Web Design

    モバイルフレンドリーなwebデザインするときにおすすめなツールまとめ

    みなさんこんにちは、mayukouです。今回は、スマホサイトやレス…

  2. jQuery

    JQueryで要素を消すスクリプト!ECサイトの注意書きにもオススメ!

    みなさんこんにちは、mayukouです。ECサイトには、配送に関す…

  3. photoshopでカンプ作成

    Photoshop

    photoshop CCでデザインカンプを作成。メリットとデメリット

    みなさんこんにちは、mayukouです。最近、webデザインのカンプ…

  4. Web Design

    ブログ作りの参考に♬ジャンル別オススメwordpressテーマを考察してみました

    皆さんは、wordpressのブログを持っていますか?ブログを持ってい…

  5. Web Design

    意外と知らなかった…google map をホームページに貼付ける方法

    みなさま、こんにちは。mayukouです。今回は、仕事で必要に…

  6. Illustrator

    面倒じゃない!簡単なIllustratorでシームレスなパターンの作り方

    みなさんこんにちは、mayukouです。デザインを作る上で、背景がシ…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

CAPTCHA


メルマガを購読する

Web Design Cafeの メルマガを購読する

更新情報や、お知らせ、お得情報をゆる〜く配信(月1程度)。


最近の記事

instagramもやっています

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. グッズ

    軽くて良いかも!DELFONICSの2015年の手帳買いました!
  2. Web Design

    書評「だからそのデザインはダメなんだ」で適切なUIデザインを考える
  3. jQuery

    スマホに使える!3階層のアコーディオンメニューを作りました!
  4. レポート

    kindle Paperwhite買いました。iPad miniとの違いやメリッ…
  5. Photoshop

    必見!Photoshopでスタンプ風のかすれた表現をする方法まとめ
PAGE TOP