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

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

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

  2. CSS

    一手間でおしゃれに。CSSでマテリアルデザイン風のボタンを作る方法

    みなさんこんにちは、mayukouです。ランディングページやネットシ…

  3. Web Design

    スキルアップ!Webデザイナーになるための勉強をしたい人にオススメ書籍まとめ

    みなさんこんにちは、mayukouです。webの業界は、日々進歩して…

  4. jQuery

    画像も文字もスライド可能!Swiper.jsでコンテンツスライダーを簡単に!

    皆さんこんにちは、mayukouです。先日、スライダーに便利で簡単な…

  5. CSS

    グローバルメニューに最適♫メニュー幅を均一にしてくれるtable cellが便利!

    みなさんこんにちは、mayukouです。「コーポレートサイト作るけど…

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

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

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


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. jQuery

    画像も文字もスライド可能!Swiper.jsでコンテンツスライダーを簡単に!
  2. Mac

    自炊するときに、便利!MacアプリCaffeine
  3. Photoshop

    いい味が出る!リアルな水彩画風タッチに最適なPhotoshopのブラシ
  4. iPad Pro

    購入して半年♪iPad Proで描いたイラストをご紹介。(主にProcreate…
  5. moleskine

    グッズ

    モレスキン買いました。そして、周辺のステーショナリーを集めてみた。
PAGE TOP