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

ホーム
jQuery, Web Design
軽量のスクリプトで簡単に！レスポンシブメニューを実装できるResponsive Nav

jQuery

2015.10.23

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

Pocket

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

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

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

スポンサードリンク

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

ヘッダーに

<!--  <head> の中に入れる --><link rel="stylesheet"href="responsive-nav.css">
<script src="responsive-nav.js"></script>

1 2	<!-- <head> の中に入れる --><link rel="stylesheet"href="responsive-nav.css"> <script src="responsive-nav.js"></script>

HTMLに

<nav class="nav-collapse">
<ul><li><ahref="#">Home</a></li>
<li><ahref="#">About</a></li><li>
<a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

<li><ahref="#">About</a></li><li>

<a href="#">Projects</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

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

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

<!-- Put this right before the </body> closing tag -->
<script>var nav = responsiveNav(".nav-collapse");</script>

1 2	<!-- Put this right before the </body> closing tag --> <script>var nav = responsiveNav(".nav-collapse");</script>

カスタマイズ

var nav = responsiveNav(".nav-collapse",{// Selector
  animate:true,// Boolean: Use CSS3 transitions, true or false
  transition:284,// Integer: Speed of the transition, in milliseconds
  label:"Menu",// String: Label for the navigation toggle
  insert:"before",// String: Insert the toggle before or after the navigation
  customToggle:"",// Selector: Specify the ID of a custom toggle
  closeOnNavClick:false,// Boolean: Close the navigation when one of the links are clicked
  openPos:"relative",// String: Position of the opened nav, relative or static
  navClass:"nav-collapse",// String: Default CSS class. If changed, you need to edit the CSS too!
  navActiveClass:"js-nav-active",// String: Class that is added to  element when nav is active
  jsClass:"js",// String: 'JS enabled' class which is added to  element
  init:function(){},// Function: Init callback
  open:function(){},// Function: Open callback
  close:function(){}// Function: Close callback});

var nav = responsiveNav(".nav-collapse",{// Selector

animate:true,// Boolean: Use CSS3 transitions, true or false

transition:284,// Integer: Speed of the transition, in milliseconds

label:"Menu",// String: Label for the navigation toggle

insert:"before",// String: Insert the toggle before or after the navigation

customToggle:"",// Selector: Specify the ID of a custom toggle

closeOnNavClick:false,// Boolean: Close the navigation when one of the links are clicked

openPos:"relative",// String: Position of the opened nav, relative or static

navClass:"nav-collapse",// String: Default CSS class. If changed, you need to edit the CSS too!

navActiveClass:"js-nav-active",// String: Class that is added to element when nav is active

jsClass:"js",// String: 'JS enabled' class which is added to element

init:function(){},// Function: Init callback

open:function(){},// Function: Open callback

close:function(){}// Function: Close callback});

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

主に使用する部分

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

最後に

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

投稿者プロフィール

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

プロフィール

mayukou

こんにちは！mayukouと申します。福岡市でハーブティー専門店のデザイナーをしています。デザイナー10年目。海外で活動できる一流デザイナーを目指しています。洋楽好き（特にR&B）。Mac&iPhoneユーザー。AB型です。自分の学んだこと、役に立つことを発信していきたいと思います。よろしくおねがいします。