こんにちは、ゆうが(@yuuuugablog)です。
今回は、メガメニューを作る方法を解説していきます。
メガメニューってなんですか?
悩んでる人
こういった方向けに説明すると、メガメニューとはドロップダウンメニューのスペースを拡大して、情報量を増やしたメニューのことです。
イメージがわかないと思うので、完成イメージをご覧ください。
完成イメージ
つまりメガメニューとは上記のようなもので、スペースが広いのが特徴です。
※マウスホバーをするとメニューが表示されます。
結構web制作には使われるので、今回はメガメニューを作る方法を解説していきます。コピペでできるので、初心者でもOKです。
それではさっそくいきましょう!
スポンサーリンク
メガメニューのHTMLコード
HTML
<nav>
<ul class="header__menu">
<li class="mega__menu">
<a href="#">MEGA</a>
<ul class="mega__menu-second">
<li><a href="#">CHILD MENU</a></li>
</ul>
</li>
<li class="mega__menu">
<a href="#">MEGA</a>
<ul class="mega__menu-second">
<li><a href="#">CHILD MENU</a></li>
</ul>
</li>
<li class="mega__menu">
<a href="#">MEGA</a>
<ul class="mega__menu-second">
<li><a href="#">CHILD MENU</a></li>
</ul>
</li>
<li class="mega__menu">
<a href="#">MEGA</a>
<ul class="mega__menu-second">
<li><a href="#">CHILD MENU</a></li>
</ul>
</li>
</ul>
</nav>
a
タグの文字(ここではMEGA)を変えることで、自分の好きな文字に置き換えられます。
スポンサーリンク
メガメニューのCSSコード
CSS
.header__menu {
position: relative;
width: 80%;
background: #000; /* メニューの背景色 */
text-align: center;
list-style: none;
padding: 0;
}
.header__menu li {
display: inline-block;
padding: 1em 5em;
}
.header__menu li a {
color: #fff; /* メニューの文字色 */
text-decoration: none;
}
.header__menu li a:hover {
color: #426dd8; /* ホバーした時の文字色 */
border-bottom: 2px solid #426dd8; /* 下線 なしにする場合は削除する*/
}
ul.mega__menu-second {
visibility: hidden;
opacity: 0;
}
.header__menu li:hover {
background: #570f76; /* メニューの背景色 */
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
li.mega__menu ul.mega__menu-second {
position: absolute;
top: 40px;
left: 0;
width: 100%;
background: #570f76; /* メガメニューの背景色 */
padding: 20px;
box-sizing: border-box;
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
}
li.mega__menu:hover ul.mega__menu-second {
top: 51px;
visibility: visible;
opacity: 1;
}
色の変更をする際には、background
の部分を「white」や「green」にすることで変更できます。
ゆうが
これでメガメニューの完成です!
スポンサーリンク
BoostNoteの保存しておくと、爆速で作業できる
今回はCSSでできる、メガメニューを作る方法を解説しました。
冒頭でもいったように、メガメニューは多くのサイトで使われているのでweb制作には必ず使います。
その際に使えるアプリが「BoostNote」です。このアプリはコードの保存ができるので、web制作の際に爆速で作業することができます。
詳しくはこちら【完全無料】BoostNoteの特徴や使い方を解説を読んでみてください。

今回は以上です!
記事が参考になれば幸いです。