メガメニューの表示方法をCSSで簡単に行う【アニメーション】

プログラミング

どうも、えんつかです。

プログラミング学習の過程で慶應義塾大学病院のサイト模写を行っています。

初めてメガメニューに出会い、CSSでの作成方法を学んだので記事にしました。

またその過程でCSSでできるアニメーションにも色々あると知れたので、ご紹介します。

メガメニューの表示方法をCSSで簡単に行う【アニメーション】

本記事を読むことで得られること

  • メガメニューの作成方法
  • CSSでできる色々なアニメーション方法

メガメニューはこんなものです。

結論:以下のコードです。

HTML(写真を参考にしています)

CSS(ポイントだけ貼り付けます)

ポイントは以下の通りです。

  • hoverが外れても表示し続ける。
  • hoverした際の表示速度を変える。
  • overflowで非表示にする。

hoverが外れても表示し続ける

まず、10行目のCSSでメニューが表示されるようにします。

a:hoverの後に + .megamenuと入れることでhoverしている間に、megamenuの動作を指定することができます。

その後、17行目のCSSでメガメニューをhoverしている間表示し続けるよう指定することができます。

hoverした際の表示速度を変える

17行目のCSSで表示速度と非表示速度を変えることができます。

表示速度は、hoverしている際のtransitionで指定。

ちなみに、hoverが外れた際に閉じる速度は、元のクラス(megamenu)にtransitionで指定すればOKです。

overflow:hiddenで非表示にする

overflow:hiddenを指定することで、非表示状態とする。

完成です!

ちなみに、メガメニューを作成する過程で、CSSだけで色々なアニメーションを作成できることを知りました。

おすすめリンク貼り付けます。自作wordpressに組み込んでみたいと思います(^^♪

【リッチなサイトへ】おしゃれなCSSアニメーションサンプル10選

以上です。

jQueryでなくても、CSSで色々動きつけられそうです。

お試しにやってみたいと思います(^^)/