LoginSignup
6

More than 5 years have passed since last update.

【CSS4】:focus-withinでクリックタイプのドロップダウンメニュー?

Last updated at Posted at 2017-02-27

:hoverを使ったドロップダウンメニューは既にCSSのみで実装可能。
子要素の:hoverは親要素まで伝播するので、メニューにカーソルが重なっている間は親要素の:hover状態が保持される。
でもこれって割と使いづらくね? ちょっとでもカーソル外れるとメニュー消えるし。
そもそも今の時代、スマホ端末で意味をなさない:hoverはちょっと……
クリックでオープンしてメニューの外をクリックしたら勝手に閉じるやつ、実装したいなあ……CSSのみで。

dropdown.html
<div tabindex="-1" class="dropdown">めにう
  <ul>
    <li><a href="/hoge">hoge</a></li>
    <li><a href="/fuga">fuga</a></li>
    <li><a href="/piyo">piyo</a></li>
  </ul>
</div>
focus.css
.dropdown > ul {
  display: none;
}
.dropdown:focus > ul {
  display: block;
}

:focusだとめにう内の項目をクリックした時点でフォーカスが外れてリンクが上手く機能しない……

というわけで、Selectors Level 4 ではこんな擬似クラスが

focus-within.css
.dropdown > ul {
  display: none;
}
.dropdown:focus-within > ul {
  display: block;
}

:focus-withinだと多分、いい感じにバブルアップしたフォーカスをキャッチしてくれるんじゃないかと!(希望)
これはjavascriptの focusin/focusout イベントに相当する擬似クラスという事かな。
https://drafts.csswg.org/selectors-4/#the-focus-within-pseudo

果たして現場で使えるようになる日はいつなのか。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6