解決したいこと
飲食店のホームページを作成しています。メニュー一覧のページを作成しているのですが、タップした情報だけを表示することがHTMLとCSSだけで出来るでしょうか?もし出来るのであれば、どのようにコードを書けば良いでしょうか?よろしくお願いします。
具体例
以下の画像を例にすると、「定食」を押したら定食だけのメニューが、「期間限定」を押したら期間限定だけのメニュー表示されるようにしたいです。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答2件
0
回答ありがとうございます!
コードまで丁寧に載せていただきとても助かります。理解して使用します!
投稿2021/09/20 01:01
総合スコア3
0
ベストアンサー
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}
投稿2021/09/19 07:30
総合スコア34075
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答ありがとうございます!
コードまで丁寧に載せていただきとても助かります。理解して使用します!
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。