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で機能させる ハンバーガーメニューの実装でよく見かける問題 ハンバーガーメニューの実装方法 終わりに ハンバーガーメニューをiOS S

[coliss]

ハンバーガーメニューをスマホに実装する時の注意すべきポイント

[pokotanu]

Web制作のノウハウをのせるくせに全くスマホ対応しなかったあのコリスがいつの間にかスマホ対応してることに今気づいた

[cartman0]

もうcssで専用のプロパティ作って欲しいわ

[Falky]

要するにオーバーレイは実装困難だからサイドドロワーにしろって話ね。わかる。//これだけ採用されているUIを正しく実装することが困難なのは、ブラウザや標準化する人間がおかしいんじゃねえのって気がしてしまう

[quality1]

ハンバーガーメニュー押す人どのくらいいるんだろう。ボタンの意味を理解してる人もほとんどいない気が

[mumei-0]

“この問題を解決する方法は、position:fixed;と-webkit-overflow-scrolling: touch;を使用することです。”

[rd_sendo]

HTML,CSS

[ogawa0071]

オーバーレイするなら下のレイヤーを一旦DOMから削除するのが一番楽かと。 display: none; でも同じかな？

[misarine3]

どうも最近、ここ一年くらいからコリスさんの翻訳が読みづらく感じるようになった

[hashigohinan]

左下に来てくれたらもっと押す

[nisisinjuku]

右につけるな。面倒だ。とかかな？

[nowandzen]

ピクルスとゴマを忘れないこと

[primedesignworks]

こういうことでなく？ https://qiita.com/wings1685/items/548b4fa56dce26fa4c81

[yoshi-nkyma]

“Disney”