ウィンドウサイズが小さい場合に、自動的にナビゲーションを変形させてくれるjQueryプラグイン「meanmenu.js」のご紹介です。
PCやタブレットで表示する際は、ナビゲーションを横並びに配置しておき、ウィンドウサイズがある一定のサイズを基準にアコーディオン形式のナビゲーションに変形させることができます。
▼サンプルとして多少カスタマイズしたサンプルをご用意しました。
【使い方】
1.meanmenu.jsをダウンロードします。
meanthemesよりデータ一式をダウンロードします。
2.jQuery本体とJavaScriptを読み込む
1 2 |
内に読み込む" ><script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="js/jquery.meanmenu.js"></script> |
※IE8 ではもともと Media Queries が効かないので「css3-mediaqueries.js 」を読み込んで対処します。
1 |
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> |
3.CSSを読み込む
1 |
<link rel="stylesheet" type="text/css" href="css/meanmenu.css" /> |
4.meanmenu();を実行する
<header>要素の中の<nav>要素に対して.meanmenu();を実行します。
1 2 3 4 5 |
<script> jQuery(document).ready(function () { jQuery('header nav').meanmenu(); }); </script> |
5.表示用CSSを記述
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
<style type="text/css"> /* Basic CSS */ body { margin: 0; padding: 0; font: 16px/1.5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; background:#333; } h1 { font-size: 28px; font-weight: 100; text-align: center; } header{ height:44px; margin-bottom:10px; } header nav { background: #24885a; } header nav ul { margin: 0; list-style-type: none; width:100%; } header nav ul li { float:left; width:25%; margin: 0; text-align: center; } header nav ul li a{ display: block; background:#dedede; margin:0; padding:10px 20px; border-right:1px solid #666; border-left: 1px solid #fff; box-sizing:border-box; text-decoration: none; } header nav ul li a:hover { background:#60d7a0; } header nav ul li ul { display: none; } a { color: #269663; } a:hover { color: #333; } a, a:hover { -o-transition: color 0.25s ease-in; -webkit-transition: color 0.25s ease-in; -moz-transition: color 0.25s ease-in; transition: color 0.25s ease-in; } article { width: 100%; margin:0px auto; background:#FFF; text-align:center; font-size:80%; } .txt2 { display: none; color:#f00; } /* ウィンドウサイズが480px以下になった場合 */ @media screen and (max-width: 480px) { .txt1{ display: none; } .txt2{ display: block; } } </style> |
6.HTMLを記述
サンプルとして下記のようなHTMLを記述しておきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<header> <nav> <ul class="clearfix"> <li><a href="#">ナビ1</a> <ul> <li><a href="#">ナビ1-1</a> <ul> <li><a href="#">ナビ1-1-1</a></li> <li><a href="#">ナビ1-1-2</a></li> <li><a href="#">ナビ1-1-3</a> <ul> <li><a href="#">ナビ1-1-1-1</a></li> <li><a href="#">ナビ1-1-1-2</a></li> <li><a href="#">ナビ1-1-1-3</a> <ul> <li><a href="#">ナビ1-1-1-1</a></li> <li><a href="#">ナビ1-1-1-2</a></li> <li><a href="#">ナビ1-1-1-3</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#">ナビ1-2</a></li> <li><a href="#">ナビ1-3</a></li> </ul> </li> <li><a href="#">ナビ2</a></li> <li><a href="#">ナビ3</a></li> <li><a href="#">ナビ4</a></li> </ul> </nav> </header> <article> <p class="txt1">ウィンドウサイズを480px以下にしてご確認ください。</p> <p class="txt2">メニュー表示が変わりましたか?</p> </article> |
使い方は簡単ですが、そのまま流用する場合ディスプレイサイズが大きいときに、メインとなるナビゲーションの下層ナビが表示されないので表示したい場合は修正が必要になります。