PC・タブレット・スマホ、それぞれに対応したレスポンシブなメニューを「jQuery」と「CSS」で簡単に作成できます。シンプルなものですが、その作り方をメモしておきます。
サンプルを用意しましたのでまずは確認してみてください。
ウィンドウサイズを小さくしてみたり広げてみたりすると、２列になり、メニュータブにと変化するようにしてあります。
それでは、作り方を見ていきましょう。
1.HTMLを記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<nav id="menu-box"> <div id="toggle"><a href="#">MENU</a></div> <ul id="menu" class=""> <li><a href="#">Navi1</a></li> <li><a href="#">Navi2</a></li> <li><a href="#">Navi3</a></li> <li><a href="#">Navi4</a></li> <li><a href="#">Navi5</a></li> <li><a href="#">Navi6</a></li> <li><a href="#">Navi7</a></li> <li><a href="#">Navi8</a></li> </ul> </nav> |
ウィンドウサイズが769px以上の際は、<li>要素でナビゲーションを横並びにしています。サンプルではボタンを「8個」配置していますので、CSSの記述で「#menu li」要素の横幅を「12.5%」にしてあります。実際にサイト上でいくつのナビゲーションボタンを横に並べるかによって、「#menu li」の横幅を調整してください。
また、「#toggle」の部分はデフォルトでは「display:none;」で非表示にしておき、画面サイズが480px以下の場合のみ表示するように指定しています。
2.jQueryを読み込みJavaScriptを記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript"> $(function(){ $("#toggle").click(function(){ $("#menu").slideToggle(); return false; }); $(window).resize(function(){ var win = $(window).width(); var p = 480; if(win > p){ $("#menu").show(); } else { $("#menu").hide(); } }); }); </script> |
3.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 83 84 85 86 87 88 89 90 91 |
#menu { width: 100%; max-width: 960px; margin: 0 auto; padding: 0; } #menu li{ display: block; float: left; width: 12.5%; margin: 0; padding: 0; } #menu li a { display: block; padding: 20px 0 20px; background-color: #2a83a2; color: #FFF; text-align: center; text-decoration: none; border-right:1px solid #4baacb; } #menu li:last-child a{ border: none; } #menu li a:hover{ background: #4baacb; } #toggle { display: none; } /* 画面サイズが768px以下の場合に適用 */ @media only screen and (max-width: 768px) { #menu li { width: 25%; border-bottom: 1px solid #4baacb; } } /* 画面サイズが480px以下の場合に適用 */ @media only screen and (max-width: 480px) { #menu { display: none; } #menu li { width: 100%; } #toggle { display: block; position: relative; width: 100%; background: #2a83a2; } #toggle a{ display: block; position: relative; padding: 20px 0 20px; border-bottom: 1px solid #4baacb; color:#FFF; text-align: center; text-decoration: none; } #toggle:before { display: block; content: ""; position: absolute; top: 50%; left: 10px; width: 30px; height: 30px; margin-top: -15px; background: #FFF; } #toggle a:before, #toggle a:after { display: block; content: ""; position: absolute; top: 50%; left: 10px; width: 30px; height: 6px; background: #2a83a2; } #toggle a:before { margin-top:-9px; } #toggle a:after { margin-top: 3px; } } |
メディアクエリを使ってそれぞれの画面は合わせてメニューが変形するようになっています。
IE8以下は、基本的にメディアクエリに対応していないので、下記の一文を追記して対応させます。
|
1 2 3 |
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> |
実際にはどのように見えるかと言うと、
○横幅769px以上の場合は以下のように表示
ナビゲーションの最大幅を960pxに指定して、横並び8個なのでひとつあたり「12.5%」で指定
○横幅481px～768pxの場合は以下のように表示
ナビゲーションの最大幅を画面サイズ100%に指定して、横並び4個×2段なのでひとつあたり「25%」で指定
○横幅480px以下の場合は以下のように表示
スマホのポートレートモードの場合は、メニューを折りたたんで表示します。
追記(2015/10/14)
ここから追記になります。
サイトを利用してくださっている方より、ご指摘のありました「メニューボタンを押した際にブルダウンのメニューが開いたままになってしまう」という問題を解決致しました。
JavaScriptに以下を追記
/* 追記部分 */から下を先程のコードに追記してください。
|
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 |
$(function(){ $("#toggle").click(function(){ $("#menu").slideToggle(); return false; }); $(window).resize(function(){ var win = $(window).width(); var p = 480; if(win > p){ $("#menu").show(); } else { $("#menu").hide(); } }); }); /* 追記部分(メニューリンクをクリックでメニューを一旦閉じる) */ $(function() { var win = $(window).width(); var p = 480; if(win < p)$(function(){ $("#menu li a").click(function(){ $("#menu").hide(); }); }); }); |
確認してみてください。こちらに書き換えたもののデモサンプルがこちら↓
正しく動作しているか少し不安・・・