cssでメニュー

Question

###前提・実現したいこと
cssでドロップメニューを作成していて、「閉じる」項目を追加して、pcでクリックまたはスマホでタッチするとメニューを閉じられるようにしたいです。
ご教示頂けると幸いです＞＜

※参考サイト
http://weboook.blog22.fc2.com/blog-entry-408.html

Answer 1

input要素のtype属性の値をcheckboxにしてチェックボックスを作成してください。
あとはCSSの擬似クラス:checkedでチェックボックスがチェックされている時に特定のルールセットを適用させることができます。

例えば次のHTMLとCSSではチェックボックスをチェックした時にlabel要素のテキストカラーを赤にすることができます。
つまり、要素の状態を切り替えることができます。

<input id="switch" type="checkbox">
<label id="switch-label" for="switch">label text</label>

#switch:checked + #switch-label {
  color: red;
}

これをうまく利用すると「メニューを閉じた状態(初期状態)」と「メニューを開いた状態(チェック状態)」をクリックまたはタッチで作り出すことができます。
あとはご自分でルールセットを定義していけば求めているドロップメニューを作成できるはずなので、ぜひ頑張って作ってみてください。

---

追記
回答にあるCSSのセレクタ#switch:checked + #switch-labelが何を意味しているのかを理解してみましょう。

#switch**:checked**

:checked擬似クラスはラジオボタンとチェックボックスおよびオプションボタンがオンになっている状態を表します。
ここでは「#switchというIDを与えたチェックボックスがチェックされている状態」を意味します。

###+
これは隣接兄弟セレクタといい、直後(隣)にある要素を指定するセレクタです。
ここでは#switchの直後に存在する要素である#switch-labelを指定しています。
つまり「#switchというIDを与えたチェックボックスの状態が:checked(オン)になった時に、直後に存在する要素#switch-labelのテキストカラーを赤にする」というルールセットを定義している事が分かります。

なお、この様なセレクタは複数を組み合わせて利用することも出来ます。
例えば#a:hover + #b + #cとすると「#aにマウスカーソルが当たった時、その直後にある#bのそのまた直後にある#cに宣言したブロックの内容を適用する」という意味のセレクタになります。

###これらを踏まえた上でイメージしやすいHTMLにしてみましょう。

<!-- 切り替えのスイッチとなるチェックボックス -->
<input id="switch" type="checkbox">
<!-- for属性を使えばラベルからチェックボックスをチェックできる -->
<label id="switch-label" for="switch">menu</label>

<!-- 状態を切り替えたい要素(メニュー) -->
<ul class="list">
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

ここでチェックボックス#switchをチェックした時にリスト.listを非表示にするには、どのようなルールセットを定義すると良いでしょうか？
大分イメージしやすくなっているのではないでしょうか。

#switch(チェックボックス)の状態がオンの時、その直後にある#switch-label(ラベル)のそのまた直後にある.list(メニュー)を指定するセレクタを書いてみてください。

最後にCSSのセレクタをまとめたページがあったのでリンクしておきます。
CSS3のセレクタ全42種 まとめておさらい使い方リファレンス - EXP - クリエイティブな事をはじめた(い)全ての人達へ

---

具体的なコードを追記しておきます。

<!--
  チェックボックスはリストの外側に置いても良いですが、隣接させた方がセレクタの誤りを防止できて、隣接兄弟セレクタひとつで済むので楽です。
  <a href="#">menu</a>となっていた箇所をラベルに変更しています。
-->
<ul>
　<li><label for="switch">menu</label><input id="switch" type="checkbox">
　　<ul>
　　　<li><a href="#">list</a></li>
　　　<li><a href="#">list</a></li>
　　　<li><a href="#">list</a></li>
　　　<li><label for="switch">閉じる</label></li>
　　</ul>
　</li>
</ul>

#switch {
  display: none;
}

#switch:checked + ul {
  visibility: hidden;
}

Comments

[caad]

ご教示大変ありがとうございます！！！
無知で申し訳無いです。。
色々と奮起して試してみてはいるのですが、なかなかうまくいきません。。
「メニューを閉じた状態(初期状態)」にするにはどのようなルールセットを定義したらよいのでしょうか、、？
下記のようだとイメージとは離れてしまいまして。。
#switch:checked + #switch-label {
visibility: hidden;
}
アドバイス頂けると大変ありがたいです＞＜

[flat]

回答に追記しました。
分からない事があればまたコメントして下さればお答えします。

[caad]

分かりやすいご回答ありがとうございます！
セレクタについてもとても勉強になりました！
#switch(チェックボックス)の状態がオンの時、その直後にある#switch-label(ラベル)のそのまた直後にある.list(メニュー)を非表示にするセレクタを書いてみましたので誤りがありましたらご指摘をお願い致します。

#switch:checked + #switch-label + .list{
visibility: hidden;
}
#switch{
display: none;
}

また、下記の場合のHTMLに対してだと、どのような指定をしたらよろしいのでしょうか？
<ul>
　<li><a href="#">menu</a>
　　<ul>
　　　<li><a href="#">list</a></li>
　　　<li><a href="#">list</a></li>
　　　<li><a href="#">list</a></li>
　　　<li><a href="#">閉じる</a></li>
　　</ul>
　</li>
</ul>

度々で恐れ入ります。ご教示お願い致します。

[flat]

セレクタはそれでOKです。
理解が進んだようで何よりです。

> また、下記の場合のHTMLに対してだと、どのような指定をしたらよろしいのでしょうか？

label 要素をクリックすることで、for 属性に指定したIDを持つチェックボックスを操作できるという点を利用しましょう。

「menu」をクリックしたときと、「閉じる」をクリックしたときの両方でチェックボックスを操作できるようにすると問題は解決するはずです。
ポイントは「チェックボックスを追加する位置」「ラベルを追加する位置」「セレクタの指定」です。

追記
質問をするときのひとつのアドバイスなのですが、自身で試してみたHTMLやCSSなどのコードは最初から提示された方が良いです。
これはコードが書きかけで完成していなかったり、内容に誤りがあったとしても構いません。

コードなどの詳細があった方が回答者も正確で具体的な回答をしやすいですし、その内容に誤りがあれば大抵は訂正してくれます。

また、そうする事で「やってほしいことだけを記載した丸投げの質問」という指摘を受けて質問の評価が下がり、質問が一覧に表示されず回答を得にくくなるという事も減るでしょう。

コードは質問する側と回答する側の双方にとって重要な情報となるので、また質問をされるときにコードが手元にあるのでしたら、ぜひ質問に含めてみてください。:)

[flat]

具体的な回答がないのも不親切かもしれないと思いましたので回答の方にコードを追記しておきました。
よろしければ参考にしてください。