Web制作者が見落としがちな、ハンバーガーメニューをスマホに実装する時の注意すべきポイント

スマホで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でもスクロールを壊すことができます。ハンバーガーメニューをスクロールさせる簡単な方法は、スマホを水平に使用することです。

ハンバーガーメニューの実装方法

メニューの最終的なオープン状態について覚えておく重要な点は、メニューを絶対配置にするのではなく、サイドバーが開いたときに配置されるのはメインコンテンツになることです。つまり、メニューを配置する代わりに、他のすべてを配置します。

実装コードを紹介します。

終わりに

ここで紹介した実装方法は、WikipediaDisneyで採用されています。iOSでハンバーガーメニューを試してみて、スクロールの素晴らしい経験を確認してください。

うまくいけば、あなたはこれからハンバーガーメニューの実装を直すことができます。

もし初心者ならば、私のブログで、ハンバーガーメニューとは何か、そしてハンバーガーメニューを最初から作る方法についての説明を見つけることができます。

サイトのキャプチャ

How to Code a Hamburger Menu (CSS, JavaScript, React)

sponsors

top of page

©2019 coliss