５丁目通信（仮称）

10年以上前に他人が作成されたサイトのメンテナンス作業をやっています。

さて、そのサイトにはアコーディオンメニューがあるのですが、どうやって実現されているか理解できませんでした。labelタグとinputのラジオボタンがあるのですが、labelタグのメニュー項目を押すと、その下のdivで囲まれた下位のメニュー項目が表示されるようになっています。JavaScriptでコントロールされているようなこともありません。しかもJavaScript自体も存在していません。

そこで、Googleさんに「input radio accordion」で聞いてみました。そうしたら、ラジオボタンでアコーディオンメニューを実現するコードなんてあるのですね。

他にもいろいろ検索結果が出てくるので、この方法は定番テクニックなんですね。

アコーディオンメニューを実現していることを理解して、こちらがやりたいことを対応しました。

やりたいこととしては、アコーディオンメニューの下位のメニュー項目のページにアクセスしたときは、アコーディオンメニューを出たままにすることです。そうしないと、今のページがどこにあるのか迷子になってしまうからです。

シンプルに下位のページにアクセスしたときには、アコーディオンメニューの下位のメニュー項目を非表示になっていたのを表示にしただけす。このページに固有のIDを振って、CSSでまとめて強制表示にすればいいのですが、今回は簡単にページごとにCSSを設定しておきました。

以上、自分の考えの範疇だけでは実現できないことに驚いた話しでした。でも、わざわざラジオボタンを隠して、アコーディオンメニューのために設置しておくなんて気持ち悪いけど、これは定石な方法なのでしょうね。

【Amazon.co.jp 限定】1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)

SBクリエイティブ

¥500 （2024/04/24 09:29時点 | Amazon調べ）

Amazon

ポチップ

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ

著:谷 拓樹

¥1,881 （2024/04/24 09:29時点 | Amazon調べ）

Amazon

ポチップ

HTML&CSSポケットリファレンス　［改訂3版］

技術評論社

¥1,980 （2024/04/24 09:29時点 | Amazon調べ）

Amazon

ポチップ