携帯サイトのデザインをしています。ホームページには、「a」、「b」、「c」、...、「h」というメニュー項目があります。最初の3つのメニュー項目のみを表示し、クリックすると展開してすべての項目を表示する「すべての項目を表示」ボタンを作成します。また、ボタンをクリックすると、「項目を少なく表示」になるはずです。
HTML5 と CSS3のみを使用し、JavaScript を使用せずにこれを行いたいと考えています。 また、この機能をWeb サイトで再利用できるようにしたいと考えています。
どうすればいいですか？
- 前もって感謝します！
最新のモバイル ブラウザーはすべて JavaScript をサポートしていますが、エンド ユーザー (少なくとも Android の場合、iOS については不明) には、JavaScript を無効にするための構成設定が提供されています。
開発者としての最善の策は、「フェイル セーフ」戦略を使用することです。メニューを完全に展開した状態で HTML を送信し、JavaScript を使用して、ロード時に (または DOM の準備ができたら) すぐにメニューを折りたたみます。そうすれば、JavaScript が無効になっているモバイル ユーザーがいる場合、メニュー全体が表示されます。ほとんどのユーザーは JavaScript を有効にする必要があります。その場合、説明した展開/折りたたみ機能を利用できます。
JavaScriptなしでこれを実装することを期待するのは非現実的であり、回避策を見つけることができれば、JavaScriptを使用するほど安定しているとは思いません。メニュー項目を非表示にするという点では、CSSプロパティを設定し、display: none;これらのメニュー項目を対象とするボタンを配置して、表示プロパティを切り替えることができます。