Web制作者が見落としがちな、ハンバーガーメニューをスマホに実装する時の注意すべきポイント
Post on:2019年3月19日
sponsors
スマホでWebサイトを見ると、Appleをはじめ、DisneyやWikipediaやThe New York Timesなど多くのサイトでハンバーガーメニューが採用されています。Web制作者が見落としがちなハンバーガーメニューをスマホに実装する時の注意すべきポイントを紹介します。
特に、メニューをposition:absolute;で配置している場合は注意が必要です。
The mistake developers make when coding a hamburger menu
by Jared Tong
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
ハンバーガーメニューをiOS Safariで機能させる
The New York Timesのデベロッパーはハンバーガーメニューの実装で何を間違っているのでしょうか。また、DisneyやWikipediaから何を見習うべきでしょうか？
私の知る限り、iOS Safariをサポートするハンバーガーメニューのオープン状態を実装する方法は1つしかありません。おそらく、あなたはiPhoneで機能させたいと思うでしょう。
ポイントは、ハンバーガーメニューがどのように置かれるかです。
ハンバーガーメニューの実装でよく見かける問題
ハンバーガーメニューにスクロールが必要ない場合は、、、何の問題もありません。あなたが今考えているCSSの実装で、おそらくうまくいくでしょう。アイコンをクリックした時に、サイドバーをビューポートに出し入れするだけです。
しかし、表示されるアイテムが多い場合、ユーザーは期待通りの操作ができなくなります。The New York Timesのハンバーガーメニューを見てみてください。
動画を見たくない人のために、言葉でも説明します。
- position:absolute;で配置されたメニューをスクロールするのは不快です。スクロールがスムーズに行われず、スクロールの最後に到達した際にバウンスもしません。
参考: iPhoneのスクロール操作
The New York Times, Pitchforkのハンバーガーメニューを試してください。 - ハンバーガーメニューを上にスクロールすると、iOS Safariは代わりにbodyをスクロールします。
Vikiのハンバーガーメニューを試してください。 - この問題を解決する方法は、position:fixed;と-webkit-overflow-scrolling: touch;を使用することです。これで、サイドバーの横に表示されているメインコンテンツの一部をスクロールするように、メニューの向こう側をタップすると、メニュー内をスクロールできなくなります。
Grabのハンバーガーメニューを試してください。
ハンバーガーメニューを実装する時は、iOSでメニューをどのようにスクロールするのか、メニューの後ろにあるbodyをどのようにスクロールするのかに注意が必要です。
そして、あなたはApple.comでもスクロールを壊すことができます。ハンバーガーメニューをスクロールさせる簡単な方法は、スマホを水平に使用することです。
ハンバーガーメニューの実装方法
メニューの最終的なオープン状態について覚えておく重要な点は、メニューを絶対配置にするのではなく、サイドバーが開いたときに配置されるのはメインコンテンツになることです。つまり、メニューを配置する代わりに、他のすべてを配置します。
実装コードを紹介します。
|
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 |
<html> <head></head> <body> <div class="sidebar">ハンバーガーメニューのリンク</div> <div class="main-content"><button class="hamburger-menu-icon" onClick="toggleSidebar()">🍔</button></div> </body> </html> /* コードを見やすくするためにCSS変数を使用 */ :root { --sidebar-width: 100px; --sidebar-bg-colour: blue; } .sidebar { display: none; position: relative; width: var(--sidebar-width); } @media (max-width: 767px) { html.sidebar-is-open .sidebar { display: block; /* サイドバーはデフォルトの位置にレンダリング フローに従って表示されます */ } html.sidebar-is-open .main-content { position: fixed; /* メインコンテンツをposition: fixed;で配置 これが実装の要です。 短所: bodyは一番上までスクロールし、ユーザーのスクロール位置を失います。 */ /* 元のフルスクリーンの幅からサイズ変更しないようにする */ bottom: 0; left: 0; right: 0; top: 0; width: 100%; overflow: hidden; } /* オプションの機能強化: iPhoneのオーバースクロールをサイドバーと同じ色にする */ html.sidebar-is-open body { background-color: var(--sidebar-bg-colour); } .sidebar { background-color: var(--sidebar-bg-colour); } } const documentElement = document.querySelector("html"); const contentElement = document.querySelector(".main-content"); const sidebarElement = document.querySelector(".sidebar"); const sidebarIsOpen = () => documentElement.classList.contains("sidebar-is-open"); const openSidebar = () => { /* どのように変更を引き起こすかはあなた次第です。 */ documentElement.classList.add("sidebar-is-open"); }; const closeSidebar = () => { documentElement.classList.remove("sidebar-is-open"); }; const toggleSidebar = () => { sidebarIsOpen() ? closeSidebar() : openSidebar(); }; |
終わりに
ここで紹介した実装方法は、WikipediaやDisneyで採用されています。iOSでハンバーガーメニューを試してみて、スクロールの素晴らしい経験を確認してください。
うまくいけば、あなたはこれからハンバーガーメニューの実装を直すことができます。
もし初心者ならば、私のブログで、ハンバーガーメニューとは何か、そしてハンバーガーメニューを最初から作る方法についての説明を見つけることができます。
sponsors
