Stephanie EcklesのCSS-Only Accessible Dropdown Navigation Menuから学びました。しかし、ドロップダウン ナビゲーション メニューのレスポンシブ デザインは、アイテムが 3 つ未満のメニューでのみ機能し、アイテムが 4 つを超えるメニューでは機能しません。
そのメニューを維持したいのですが、携帯電話で 4 つ以上のアイテムを含むメニューにアクセスして使用できるようにするための解決策がわかりません。
一部の記事では、ハンバーガー アイコンの付いたサイド ナビゲーション メニューにアクセスできず、使用できないと述べていました。
私のサイトでは、携帯電話で、4 項目を超えるメニューが画面制限を超えていました。
示されたこれらのメニューが携帯電話でアクセス可能で使用可能かどうかはわかりません。
- https://portfolio-eddi3.herokuapp.com/ (理想的なようですが、テーマと言語のアイコンを保持する必要があります。アクセス可能で使用可能であることを確認したい)。
- https://accessibility.mste.illinois.edu/demos/keyboard-accessible-hamburger-menu (携帯電話では、テーマと言語のアイコンを保持する必要があり、このメニューだけでなく、別の代替メニュー デモもあります。彼らは Codepen で共有していますが、この別のケースでは、すべてのアイテムをデスクトップに表示する必要があります)。
同じメニューを保持し、これらのメニューの 1 つを携帯電話用に再利用するにはどうすればよいでしょうか?