今回は、ちと興味をもった、以下の記事を自分なりに実装してみた過程とその顛末となります。
元ネタ：
tooltipmenu
id属性を付ければ、もっと単純にはなるんですが、CSSセレクタで出来ることの理解も主眼にしてるのもあるので
その観点で見て貰えればと思います。
Goal
結果出来たのが以下のメニュー。
HowToがメインなので見た目のゴージャス感がオリジナルより劣ってるのはご容赦ください。
See the Pen Vanilla HTML+CSS menu by anyworks (@anyworks) on CodePen.
Step by step
個人的に、jsfiddle派なので、以下は外部リンクで参照して貰う形になります。すみません。
まずは、骨組みを作るために、staticなメニューを作成します。
static menu
ここでのポイントは、、、特に無いですかね。fontawsomeを使ってアイコン表示してるとこくらいですか。
ちょこっとDynamicにします。
dynamic menu
ここでのポイントは、
-
span:not(:first-child)で、メニューアイコン以外を隠してるところ。このセレクタ地味に便利です。 - あとはバグが潜んでるところですかね。しかも、かなり致命的な。
クリック可能にします。要は、バグを直したversionです。
ここでのポイントは、
以下のセレクタはフォーカスがあたってるのが前提となってるところ（=フォーカスが外れると、非表示となる為クリック出来ない）
span:first-child:focus ~ span:not(:first-child)
ちなみに、このセレクタ自体の意味は、フォーカスが当たっている（クリックされた）要素を兄弟としてもつ、最初以外の要素すべて。です。span:not(:first-child):hover
フォーカス後に表示された要素がhoverされている場合、focus時と同様の定義を与えて、表示を持続させる訳です。こうすることで、フォーカス要素がクリック可能となる訳です。
最後に、アニメーションを追加します
ここでのポイントは、
-
transitionを各メニューに付けます。具体的にいえば、span:not(:first-child)に付与してます。変化させたい対象の初期状態です。 -
span:first-child:focus ~ span:nth-child(N)で個々の位置を指定。表示位置を差別化するために必須。変化させたい対象の最終状態です。 -
span:nth-child(N):hoverでhover要素の最終表示状態を維持します(前回同様、クリック不可となるバグを回避するため） -
span:not(:first-child):activeでhover後のclick時にも要素の最終表示状態を維持します。hoverに定義しても可ですが、その場合はクリック後も表示が残ってしまうのでactiveの方がEffectとしては自然となります。
総じて、隠されている要素をhover->clickする時は表示を維持して、クリック可能するのが肝な気がします。
最終版
見た目の微調整が面倒だったのでscssになってしまってますが、CSSはかなりシンプルにできたと思います。