スマホからインターネットを利用する人が増えてきたことで、Google もモバイル向けページの評価に基づいて検索順位を決定する「モバイルファースト」に重点を置くようになってきました。画面サイズによってブレイクポイントを設定して CSS の設定を切り替えるわけですが、ブログやウェブサイトで定番のグローバルナビゲーションのレスポンシブ対応はちょっと難しかったりします。
今回はモバイル向けページ用のトグル式ドロップダウンメニューの作り方とソースコードサンプルの紹介をしたいと思います。できるだけシンプルなデザインを心掛けてみました。
仕様
PC 向けページのグローバルナビゲーションは要素を横に並べるタイプのよくあるものです。最大サイズは1020ピクセルで、マージンを 0 auto にすることでページの中央に表示されるようにしています。
レスポンシブ対応についてですが、本来であればスマホ・タブレット・PC のそれぞれについてデザインを切り替えるのが一般的であると思います。ただ、個人でメニューがズラズラ並ぶような大規模サイトを作成するかな、と思ったのでスマホ・タブレットのグローバルナビゲーションについては共通とし、ブレイクポイントを768ピクセルのひとつとしました。少し手抜きかもしれない。
HTML
一般的な PC 向けページとの違いは ul タグの前に div タグが挿入されていることです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div id="test"> <div id="toggle"> <a href="#">Menu</a> </div> <ul id="menu"> <li><a href="#">フォー</a></li> <li><a href="#">フーティウ</a></li> <li><a href="#">コムファン</a></li> <li><a href="#">チャオロン</a></li> <li><a href="#">バインセオ</a></li> <li><a href="#">バインベオ</a></li> <li><a href="#">バインバオ</a></li> <li><a href="#">バインフラン</a></li> </ul> </div> |
jQuery
スマホやタブレットの画面サイズは一定なので、我々のように CSS の動作確認のためにブラウザの大きさを頻繁に変える人でなければ、クリックイベントだけ実装すれば問題ないように思えます。
ところが、スマホやタブレットを縦や横に傾けた場合にリサイズイベントがないと、グローバルナビゲーションが消えてしまうようなので、リサイズイベントを忘れないように注意してください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | $(function(){ $("#toggle").click(function(){ $("#menu").slideToggle(); return false; }); $(window).resize(function(){ var win = $(window).width(); var p = 768; if(win > p){ $("#menu").show(); } else { $("#menu").hide(); } }); }); |
ファイル名を test.js として保存しました。
ファイルの読み込み
ファイル構成は次のようになっています。
demo.html の冒頭でファイルを読み込みます。
レスポンシブ対応では meta タグによってビューポートを設定します。私はよくこれを忘れて「動かない！」と慌てたりしますが、レスポンシブ対応がうまく動作しないときはこれを忘れていないか、まずチェックしてください。
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>デモ</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css"> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript" src="js/test.js"></script> </head> |
今回、スマホのメニューとして定番のハンバーガーマークを表示しますが、Web アイコンフォントである「Font Awesome」に用意されていたのでこれを使用しました。CSS で実現する方法もあるようですが、できるだけ手抜きの方向で。
Font Awesome については前に記事にしましたので、こちらもよろしくお願いします。
アイコンフォントのFont Awesomeを使ってみた | Naokix.net
CSS
768ピクセルのメディアクエリより前の部分が、PC 向けページでいつも見かけるグローバルナビゲーションです。id の toggle を非表示にしていますが、これはモバイル用メニューのためのものだからです。
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 | #menu { width: 100%; max-width: 1020px; margin: 0 auto; padding: 0; letter-spacing: -1em; } #menu li { display: inline-block; width: 12.5%; height: 25px; line-height: 25px; text-align: center; letter-spacing: 0; } #menu li a { display: block; color: #fff; text-decoration: none; background: #444; } #menu li a:hover { background: #999; } #toggle { display: none; } @media only screen and (max-width: 768px) { #menu { display: none; } #toggle { display: block; line-height: 30px; text-align: center; } #toggle a { display: block; color: #fff; font-size: 18px; letter-spacing: 1.5px; text-decoration: none; background: #444; } #toggle a::before { font-family: 'FontAwesome'; content: '\f0c9'; margin-right: 5px; } #menu li { width: 100%; height: 40px; line-height: 40px; text-align: left; border-bottom: 1px solid #ccc; } #menu li a { color: #444; padding-left: 20px; background: #fff; } } |
メディアクエリ以降はモバイル用グローバルナビゲーションの設定です。今度は id が menu の ul タグを非表示にします。代わりにモバイル用メニューのために id が toggle の div タグを表示。
最後にメニュー項目の li タグをモバイル向けに指定し直せば完成です。
動作確認
Google Chrome の開発ツールで動作確認を行ってみます。「Toggle device toolbar」ボタンを押すと、スマホやタブレットなどでどのように表示されているのかがわかります。マウスのドラッグ＆ドロップでモバイル画面の大きさを自由に変更することができます。
コンテンツ部分に文字などを挿入すると、それっぽく見えるのでお試しあれ。
Comment