解決したいこと

飲食店のホームページを作成しています。メニュー一覧のページを作成しているのですが、タップした情報だけを表示することがHTMLとCSSだけで出来るでしょうか？もし出来るのであれば、どのようにコードを書けば良いでしょうか？よろしくお願いします。

具体例

以下の画像を例にすると、「定食」を押したら定食だけのメニューが、「期間限定」を押したら期間限定だけのメニュー表示されるようにしたいです。

行動規範の内容に同意します

回答2件

回答ありがとうございます！
コードまで丁寧に載せていただきとても助かります。理解して使用します！

投稿2021/09/20 01:01

suzuryu.07

総合スコア3

ベストアンサー

HTMLとCSSだけでとなると、ラジオボタンを使った方法がありますね。

簡単なサンプルを例示しておきます。

html
1<input type="radio" id="all" name="menu" value="all">
2<input type="radio" id="gentei" name="menu" value="gentei">
3<input type="radio" id="donburi" name="menu" value="donburi">
4<input type="radio" id="teisyoku" name="menu" value="teisyoku">
5<div id="navi">
6  <label for="all">すべてのメニュー</label>
7  <label for="gentei">期間限定</label>
8  <label for="donburi">丼</label>
9  <label for="teisyoku">定食</label>
10</div>
11<div id="menu">
12  <div class="teisyoku">
13    ロースカツ定食
14  </div>
15  <div class="teisyoku">
16    ダブルロースカツ定食
17  </div>
18  <div class="teisyoku">
19    メンチカツ定食
20  </div>
21  <div class="teisyoku gentei">
22    カキフライ定食
23  </div>
24  <div class="donburi">
25    かつ丼
26  </div>
27  <div class="donburi">
28    牛丼
29  </div>
30  <div class="donburi gentei">
31    天丼
32  </div>
33</div>

css
1input[name="menu"]{
2  display: none;
3}
4#navi label {
5  margin: 20px;
6  cursor: pointer;
7}
8#menu > div {
9  display:none;
10}
11
12#all:checked ~ #navi label[for="all"],
13#gentei:checked ~ #navi label[for="gentei"],
14#donburi:checked ~ #navi label[for="donburi"],
15#teisyoku:checked ~ #navi label[for="teisyoku"] {
16  color: orangered;
17}
18#all:checked ~ #menu > div,
19#gentei:checked ~ #menu > .gentei,
20#donburi:checked ~ #menu > .donburi,
21#teisyoku:checked ~ #menu > .teisyoku {
22  display: block;
23}