レスポンシブなナビゲーションの作り方は膨大な数ほどありますが、良いものを作ろうとすると少し大変です。
レスポンシブメニューはモバイルにも対応し、タッチ操作が行われるデバイスのことも考えなければなりません。
この記事ではモバイルにも対応したレスポンシブメニューの作り方をご紹介します。
まずは基本をおさえよう
レスポンシブメニューをデザインする際には、ユーザーがどのようにモバイル端末を使用するのかを知っておく必要があります。
優れたナビゲーションは次のルールを守って作成されています。
- ・メニューのトグルがわかりやすい
- ・全てのボタンやリンクがタッチしやすい大きさになっている
- ・タップした際にフィードバックがある
- ・サブメニューにもアクセスできる
- ・エフェクトがシンプルである
- ・様々なブラウザに対応している
ここからは順を追って、レスポンシブメニューのデザイン法を紹介していきます。今回はオフキャンバスのモバイルメニューを作ってみましょう。
オフキャンバスメニューを作る
この形式のメニューが登場してしばらくたちますが、Googleのマテリアルデザインライブラリによって広く使われるようになりました。
オフキャンバスのメニューやナビゲーションはGoogleが推奨しており、多様なデバイスとレイアウトで動作します。
この例では簡単なリストを使ってみましょう。
| <ul id="nav"> | |
| <li class="toggle"> | |
| <div class="bar1"></div><div class="bar2"></div><div class="bar3"></div> | |
| </li> | |
| <li><a href="">HOME</a></li> | |
| <li><a href="">PORTFOLIO</a></li> | |
| <li><a href="">BLOG</a></li> | |
| <li><a href="">CONTACT</a></li> | |
| </ul> |
オフキャンバスメニューがスライド動作するためには、全てをdiv内に入れなければなりません。divには少なくとも相対的な位置を記述する必要があります。
| .container { | |
| position: relative; | |
| transition: all 0.3s; | |
| } |
1.メニュートグル
今回のメニューはスマホの横画面には収まらないため、縦に配置し直します。
より使いやすくするため、メニューを表示するトグルも設けたいところです。ハンバーガーメニューはPC向けデザインでは衰退しましたが、モバイル向けデザインではまだまだ使われており、役立ちます。
| #nav .toggle { | |
| display: none; | |
| position: absolute; | |
| left: -55px; | |
| top: 0; | |
| cursor: pointer; | |
| background: rgba(0, 0, 0, 0.6); | |
| padding: 15px 15px 10px; | |
| } | |
| #nav .toggle .bar1, | |
| #nav .toggle .bar2, | |
| #nav .toggle .bar3 { | |
| width: 25px; | |
| height: 2px; | |
| background: #FFF; | |
| margin-bottom: 8px; | |
| transition: all 0.6s; | |
| } |
2.メニュー
今回重要なのはインラインブロックのプロパティで、各リストアイテムを隣同士に並べられます。
| #nav { | |
| text-align: center; | |
| margin: 0; | |
| padding: 15px 0; | |
| width: 100%; | |
| } | |
| #nav li { | |
| display: inline-block; | |
| } |
3.メディアクエリとクリックイベント
この@mediaクエリはビューポートが768pxかそれ以下の場合にのみ適用されます。このサイズはスマホやタブレットでよく使われています。
| @media (max-width: 768px) { | |
| .toggle { | |
| display: block; | |
| } | |
| #nav { | |
| width: 230px; | |
| height: 100%; | |
| position: absolute; | |
| top: 0; | |
| right: -230px; | |
| } | |
| #nav li{ | |
| display: block; | |
| } | |
| #nav li a:hover, #nav li a:focus { | |
| border-color: transparent; | |
| background: rgba(0, 0, 0, 0.5); | |
| color: #5cd; | |
| } | |
| } |
モバイルではホバーが動かないため、リンクがタップされた際には:focusを使用しています。PC向けに使うとブラウザウィンドウのサイズを変えてしまうかもしれませんので注意してください。
クリックアクションを使用するため、今回はシンプルなjQueryスニペットを利用します。
| $(document).ready(function(){ | |
| $('.toggle').click(function(){ | |
| $('#nav').toggleClass('open'); | |
| $('.container').toggleClass('menu-open'); | |
| }); | |
| }); |
4.振舞い
今回はCSS3の変形機能でメニューを動かしてみましょう。
| .container.menu-open { | |
| transform: translate(-230px, 0); | |
| } |
メニューが開いた際にバーガーをXに変えるには.openクラスを使います。
| #nav.open .bars .bar1 { | |
| transform: rotate(45deg) translate(8px, 7px); | |
| } | |
| #nav.open .bars .bar2 { | |
| opacity: 0; | |
| } | |
| #nav.open .bars .bar3 { | |
| transform: rotate(-45deg) translate(7px, -6px); | |
| } |
これで完成です。横型だったメニューを縦型にし、モバイルでも使いやすいメニューにすることができました。
モバイル端末向けページの基本をおさえて作れば、大きな問題は発生しないでしょう。
基本を知ることで様々なパターンやプロジェクトに応用することができます。
Googleのマテリアルデザインガイドラインも役立ちますので、参考にしてみてくださいね。
※本稿は「Four Elements of Truly Mobile-Friendly Responsive Menus」を翻訳・再編集したものです。
おすすめ新着記事
おすすめタグ