<Javascript>サブメニューの作り方

 こんにちは。

前回はcssのtransitionが効かない時の対処法について書き、

例としてJavascriptを使ったサブメニューを出しましたが、

そもそもサブメニュー自体を紹介した方が良いのでは？

と思い投稿しています。

メニューの上にカーソルを乗せるとその下とか右からサブメニューがスライドして出てくるあれです。 

こちらを参照ください。

向かって右側のメニュー(と言うかただの項目ですが)にカーソルを合わせるとサブメニューとして3つの項目が現れると言う例です。

See the Pen submenu by shefuyuta (@shefuyuta) on CodePen.

色は適当につけたのでセンスの良い皆さんはもっと綺麗な組み合わせで作ってあげてください笑

アレンジももちろんできますが、上の例でいうところの

<ul class="menulist"></ul>の中にサブメニューを入れないと

サブメニューにカーソルを移した時(つまり"アルファベット"からカーソルをずらした時)に.activeクラスが消えてサブメニューが引っ込んでしまいます。

つまり、サブメニューもclass="menulist"に含まれていないといけません。

(当たり前だろ!と怒られてしまうかもしれませんが、当時私はこれに頭を抱えていたのですw)

submenu:hoverを工夫してもっとカーソル位置をもっとわかりやすくしても

良いかもしれませんね。

今回は以上です。

リンク