hoverメニュー(マウスを重ねると開くメニュー)をcssだけで作る

  • 2018.08.12
  • css
hoverメニュー(マウスを重ねると開くメニュー)をcssだけで作る

今回はPC向けのメニューバーの作り方。
マウスポインタを上に載せた時(ホバー、 hover状態の時)に、メニューバーが開き、
マウスポイントを外すとメニューバーが閉じるようなメニュー。
hoverはPC独自の動きなので、スマホなどでは使えないうごきになってくる。
とはいえ、同じ動きをクリックした際に付けてモバイル端末でも使っていいかもしれない。

早速実装してみる。

See the Pen hover menu by blue (@aoiBlue) on CodePen.0


以下が例。

display:none;を使ってもいいのだが、動きを付けたいことも多いので、
heightをずらす実装にしている。

やることは以前の記事でもやったことを、click(checked)の代わりにhoverにしているだけ。
後は、サブメニューの中身を適宜aタグで囲ってリンクをさせてあげれば完成である。

ところで。

これだけだと記事が短くなってしまうのでコラムのようなものを。
このヘッダーだが、案外使われていなかったりする。
実際、自分がユーザーだと、まずヘッダーより先に真ん中の方のメインコンテンツが探しているものか見に行こうと思う。
リピーターになってくれた人は回遊するために使ってくれるのだが、
新規の人は最初にアクセスしたページで目的を果たして離脱したり、
ページ内の他のリンクをたどって目的に達しがちなのだろう。
また、恐らく新規の人はどこにどのコンテンツがあるのかヘッダーからだとわかりにくく感じているのだと思う。
(サイトによってタイトルや内容が異なることが多いので。)

ヘッダーとフッターは大抵の場合共通化すると思うのだが、
あまり力をいれた実装を入れてもユーザーには優しくないかもしれない。
新規・リピーター両方のために出来るだけシンプルかつ軽量にするのがよさそうだ。