どうも、えんつかです。
プログラミング学習の過程で慶應義塾大学病院のサイト模写を行っています。
初めてメガメニューに出会い、CSSでの作成方法を学んだので記事にしました。
またその過程でCSSでできるアニメーションにも色々あると知れたので、ご紹介します。
メガメニューの表示方法をCSSで簡単に行う【アニメーション】
本記事を読むことで得られること
- メガメニューの作成方法
- CSSでできる色々なアニメーション方法
メガメニューはこんなものです。

結論:以下のコードです。
HTML(写真を参考にしています)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<li> <a href="#" class="hover"> <div class="header-nav-list-text"> 来院・入院の方 </div> </a> <div class="megaDrop" style="position:absolute; width:980px;"> <div class="megaColumn"> <dl class="col" style="display:table-cell;"> <dt class="cross">病院へ行く</dt> <dd> <ul class="linkListBa"> <li>初めて受験する方</li> <li>通院中・再来の方</li> <li>入院・面会の方</li> <li>人間ドックを受診する方</li> </ul> </dd> </dl> <dl class="col" style="display:table-cell;"> <dt class="check">調べる</dt> <dd> <ul class="linkListBa"> <li>初めて受験する方</li> <li>通院中・再来の方</li> <li>入院・面会の方</li> <li>人間ドックを受診する方</li> </ul> </dd> </dl> <dl class="col" style="display:table-cell;"> <dt class="phone">問い合わせる</dt> <dd> <ul class="linkListBa"> <li>初めて受験する方</li> <li>通院中・再来の方</li> <li>入院・面会の方</li> <li>人間ドックを受診する方</li> </ul> </dd> </dl> </div> <div class="megaColumn-footer"> <p class="linkBa"><a>来院・入院の方のトップ</a></p> <p clas="close"><a><img src="image/bottom/btn_close_01.png"></a></p> </div> </div> </li> |
CSS(ポイントだけ貼り付けます)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.megaDrop{ height: 0; left:0; top:100%; z-index:1; overflow:hidden; width:100%; } .header-nav-list > ul > li > a:hover + .megaDrop{ display: block; height:260px; Z-index:20; transition: 0.3s; } .megaDrop:hover{ display: block; height:260px; Z-index:20; } |
ポイントは以下の通りです。
- 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で色々動きつけられそうです。
お試しにやってみたいと思います(^^)/