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

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

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

  2. Illustrator

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

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

  3. Web Design

    WordPressブログを同じサーバーに複数作る方法

    これ、実は知らなかったのですが、とっても簡単でした。そんなことも知…

  4. illustration

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

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

  5. Web Design

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

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

  6. CSSフレームワーク

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

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

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

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

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


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. Mac

    起きてしまった!MacOSのMarvericksの不具合
  2. レポート

    CSS nite Fukuoka vol.5行ってきました。Illustrato…
  3. マーケティング

    コンテンツマーケティングにおける有益な記事とは?ブログ運営3年目の私の最適解
  4. Illustrator

    Mac OS sierra にアップデートした時のIllustratorCS6の…
  5. クリスマス

    メリークリスマス☆ハイアットのケーキや、ケンタッキーのチキンなど家で過ごしたクリ…
PAGE TOP