酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です!

TinyNav.js レスポンシブデザインに最適なナビゲーションjQuery Plugin

レスポンシブなデザインのサイトを作っていて、スマホ用のナビゲーションで悩んだりしませんか?そんな時の選択肢の一つとしてオススメなのが、この『TinyNav.js』です。シンプルなので導入がとても簡単ですが、個人的にサイトを使っていてすごく使いやすいなと感じることができる良いツールです。


TinyNav.jsって何?

TinyNav.js』はHTMLタグのol/ulで構成されたメニューをスマホで見た時に、Formのセレクトのようなメニューに変更してくれるjQuery Pluginです。

説明わかりにくいですよね(汗)、ということで画像を貼ってみました。こちらはHTMLタグのol/ulで構成されたメニューです。

TinyNav.js

この画面を狭めてスマホサイズの横幅にすると、TinyNav.jsが下のようなメニューに変更してくれます。

TinyNav.js

類似のjQuery Pluginは他にもいくつかありますが、DEMOサイトを触った限りではこちらが一番扱い易かったのと、導入手順がシンプルだったのでこれに決めました。

導入手順

HTML/javascript/cssは『公式サイト』にあるので、ここではHAML/Coffeescript/sassでの導入手順を書いていきます。

(1) TinyNav.jsをダウンロード

GitHubからTinyNav.jsをダウンロード

(2) jsの読み込み設定

1
2
%script{src => "http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"}
%script{:src => "tinynav.min.js"}

(3) ナビゲーションのHTMLを作成

1
2
3
4
5
6
7
%ul#nav
  %li.selected
    %a{:href => "/"} Home
  %li
    %a{:href => "/about/"} About
  %li
    %a{:href => "/contact/"} Contact

(4) スタイルシートの設定

1
2
3
4
5
6
7
8
9
10
/* デスクトップ用の設定
.tinynav
  display: none

/* モバイル用の設定
@media screen and (max-width: 600px)
  .tinynav
    display: block
  #nav
    display: none

(5) Coffeescript(js)の設定

1
2
$ ->
  $("#nav").tinyNav()

(6) 任意でオプションを設定

1
2
3
4
$("#nav").tinyNav
  active: "selected" # "active"クラスの設定
  header: "Navigation" # String: Specify text for "header" and show header instead of the active item
  label: "" # String: Sets the <label> text for the <select> (if not set, no label will be added)

これで、メニューをレスポンシブに出来ます。デザイン的な見栄えは少し微妙かもしれませんが、実際に使ってみると使いやすさの面ではオススメです!

Special Thanks

25 jQuery Plugins to help with Responsive Layouts - Speckyboy Design Magazine

30 jQuery Responsive Layout Plugins | jQuery4u

38 Useful and Effective jQuery Plugins for Responsive Web Design | Design Inspiration

おすすめの書籍