レスポンシブ対応に必須!シンプルな折りたたみ式メニューを作ってみた

 スマホからインターネットを利用する人が増えてきたことで、Google もモバイル向けページの評価に基づいて検索順位を決定する「モバイルファースト」に重点を置くようになってきました。画面サイズによってブレイクポイントを設定して CSS の設定を切り替えるわけですが、ブログやウェブサイトで定番のグローバルナビゲーションのレスポンシブ対応はちょっと難しかったりします。

 今回はモバイル向けページ用のトグル式ドロップダウンメニューの作り方とソースコードサンプルの紹介をしたいと思います。できるだけシンプルなデザインを心掛けてみました。

仕様

PC 向けページのグローバルナビゲーションは要素を横に並べるタイプのよくあるものです。最大サイズは1020ピクセルで、マージンを 0 auto にすることでページの中央に表示されるようにしています。

レスポンシブ対応についてですが、本来であればスマホ・タブレット・PC のそれぞれについてデザインを切り替えるのが一般的であると思います。ただ、個人でメニューがズラズラ並ぶような大規模サイトを作成するかな、と思ったのでスマホ・タブレットのグローバルナビゲーションについては共通とし、ブレイクポイントを768ピクセルのひとつとしました。少し手抜きかもしれない。

HTML

一般的な PC 向けページとの違いは ul タグの前に div タグが挿入されていることです。

jQuery

スマホやタブレットの画面サイズは一定なので、我々のように CSS の動作確認のためにブラウザの大きさを頻繁に変える人でなければ、クリックイベントだけ実装すれば問題ないように思えます。

ところが、スマホやタブレットを縦や横に傾けた場合にリサイズイベントがないと、グローバルナビゲーションが消えてしまうようなので、リサイズイベントを忘れないように注意してください。

ファイル名を test.js として保存しました。

ファイルの読み込み

ファイル構成は次のようになっています。

demo.html の冒頭でファイルを読み込みます。

レスポンシブ対応では meta タグによってビューポートを設定します。私はよくこれを忘れて「動かない!」と慌てたりしますが、レスポンシブ対応がうまく動作しないときはこれを忘れていないか、まずチェックしてください。

今回、スマホのメニューとして定番のハンバーガーマークを表示しますが、Web アイコンフォントである「Font Awesome」に用意されていたのでこれを使用しました。CSS で実現する方法もあるようですが、できるだけ手抜きの方向で。

Font Awesome については前に記事にしましたので、こちらもよろしくお願いします。

CSS

768ピクセルのメディアクエリより前の部分が、PC 向けページでいつも見かけるグローバルナビゲーションです。id の toggle を非表示にしていますが、これはモバイル用メニューのためのものだからです。

メディアクエリ以降はモバイル用グローバルナビゲーションの設定です。今度は id が menu の ul タグを非表示にします。代わりにモバイル用メニューのために id が toggle の div タグを表示。

最後にメニュー項目の li タグをモバイル向けに指定し直せば完成です。

動作確認

Google Chrome の開発ツールで動作確認を行ってみます。「Toggle device toolbar」ボタンを押すと、スマホやタブレットなどでどのように表示されているのかがわかります。マウスのドラッグ&ドロップでモバイル画面の大きさを自由に変更することができます。

コンテンツ部分に文字などを挿入すると、それっぽく見えるのでお試しあれ。

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP