扇形のツールチップメニューの作成

今回は、ちと興味をもった、以下の記事を自分なりに実装してみた過程とその顛末となります。

元ネタ：
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です。

clickable dynamic menu

ここでのポイントは、

1. 以下のセレクタはフォーカスがあたってるのが前提となってるところ（=フォーカスが外れると、非表示となる為クリック出来ない）
   span:first-child:focus ~ span:not(:first-child)
   ちなみに、このセレクタ自体の意味は、フォーカスが当たっている（クリックされた）要素を兄弟としてもつ、最初以外の要素すべて。です。

2. span:not(:first-child):hover
   フォーカス後に表示された要素がhoverされている場合、focus時と同様の定義を与えて、表示を持続させる訳です。こうすることで、フォーカス要素がクリック可能となる訳です。

最後に、アニメーションを追加します

dynamic menu with effect

ここでのポイントは、

1. 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する時は表示を維持して、クリック可能するのが肝な気がします。

最終版

final version

見た目の微調整が面倒だったのでscssになってしまってますが、CSSはかなりシンプルにできたと思います。