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

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

関連記事

  1. Photoshop

    Photoshop の水彩画ブラシで描いた植物イラストのご紹介

    みなさんこんにちは、mayukou です。肌寒いような暖かくなった…

  2. jQuery

    カードレイアウトにもオススメ!Masonryプラグインの使い方

    みなさんこんにちは、mayukouです。今回は、今流行りのカードレイ…

  3. Web Design

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

    みなさんこんにちは、mayukouです。最近では、webデザイナーと…

  4. Web Design

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

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

  5. CSSフレームワーク

    押さえておきたい!代表的なCSSフレームワークまとめ

    みなさんCSSフレームワークをご存知ですか?最近CSSフレームワー…

  6. illustration

    photoshopでモコモコの線を描くには?

    こんにちは。mayukouです。今回は、photoshopでモ…

コメント

  • コメント (0)

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

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

CAPTCHA


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. Tutorial

    ワイヤーフレームがプロ仕様に!素敵なグラフィックスタイル「WireMagic」
  2. Tutorial

    自分らしさがアップ!WordPressのサイドバーにInstagramウィジェッ…
  3. Illustrator

    空を可愛く!Illustratorで虹を簡単に描ける方法&ダウンロードできる素材…
  4. 書評

    超クール!webマーケティングが学べる「沈黙のwebマーケティング」を読みました…
  5. illustration

    発見!スキャンで取り込んだイラストをIllustratorで使えるベクターにする…
PAGE TOP