最近流行りのメガメニューの製作例

暫く期間が空いてしまいました、すみません。
今回のテーマは最近よく見かけるメガ(ドロップダウン)メニューの製作例です。

先ずはメガメニューというものはどのようなものかと云いますと、『クリックまたはマウスオーバーで開くドロップダウンメニューの1種です。
通常のドロップダウンメニューよりも広いスペースを使い、階層化したページをグループごとに表示したり、写真やアイコンを使ったたりしたユーザビリティの高いメニューが作れるのが特徴です。』

簡易的なメガメニュー例を作りましたのでご覧ください。

http://test9.t-shane.com/

トップページ(中身はほぼメガメニューのみです)と該当CSSを以下に書いていきます(長くなってしまいすみません)

<!doctype html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title>メガメニュー</title>
<meta name=”viewport” content=”width=device-width,user-scalable=yes,maximum-scale=1″>
<meta name=”robots” content=”noarchive, nofollow, noindex”>
<link rel=”stylesheet” href=”css/initialize.css”>
<link rel=”stylesheet” href=”css/base.css”>

<script src=”js/jquery-1.8.1.min.js”></script>

<script>
$(function() {

// ①マウスをボタンに乗せた際のイベントを設定
$(‘#menu li’).hover(function() {
// ②乗せたボタンに連動したメガメニューをスライドで表示させる
$(this).find(‘.menu_contents’).stop().slideDown();
// ③マウスをボタンから離した際のイベントを設定
}, function() {
// ④マウスを離したらメガメニューをスライドで非表示にする
$(this).find(‘.menu_contents’).stop().slideUp();
});
});
</script>

</head>
<body>

<!– WRAPPER –>
<div id=”wrapper”>
<!– HEADER –>
<header id=”pageHeader” class=”clearfix”>
<!– navigation –>
<nav id=”gmenu”>
<div class=”over-menu”>
<ul class=”menu” id=”menu”>
<!– メニューボタン
ここにマウスを乗せると下のコンテンツが表示される –>
<li class=”menu_list”>
<a href=”index.html” class=”first-level”>HOME</a>
</li>
<li class=”menu_list”>
<a href=”html1.html” class=”first-level”>タイプ1</a>
<!– メガメニュー
一旦非表示にし、マウスを乗せたボタンに連動したコンテンツのみ表示 –>
<div class=”menu_contents”>
<table class=”mgtable”>
<tbody>
<tr>
<td><img src=”images/170-120-01.png” width=”170″ height=”120″ class=”gmenu-img” alt=”タイプ1イメージ1”><br>タイプ1</td>
<td>
<ul class=”mgmenu1-1″>
<li class=”gmenu-explanatory”>
<div class=”clearfix”>
<p class=”gmenu-title1″><a href=”html1.html”>タイプ1文言1</a></p>
<div class=”explanatory-img”>
<img src=”images/64-64-1.png” width=”64″ height=”64″ alt=”タイプ1文言1イメージ” class=”image-vw”>
</div>
<div class=”explanatory-text”>
<p class=”gmenu-explanatory-text”>文言1文言1文言1文言1文言1文言1</p>
</div>
</div>
</li>
<li class=”details-pack”>
<ul class=”clearfix”>
<li class=”cell-one”><a href=”html1-1.html#ptn1″>タイプ1文言1パターン1</a>
<ul>
<li class=”cell-p01-01″><a href=”html1.html#ptn1-1″>タイプ1文言1パターン1詳細1</a></li>
</ul>
</li>
<li class=”cell-one”>
<ul>
<li class=”cell-p01-02″>&nbsp;</li>
</ul>
</li>
<li class=”cell-one”>
<ul>
<li class=”cell-p01-03″>&nbsp;</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class=”mgmenu1-2″>
<li class=”gmenu-explanatory”>
<div class=”clearfix”>
<p class=”gmenu-title1″><a href=”html1-2.html”>タイプ1文言2</a></p>
<div class=”explanatory-img”>
<img src=”images/64-64-2.png” width=”64″ height=”64″ alt=”タイプ1文言2イメージ” class=”image-vw”>
</div>
<div class=”explanatory-text”>
<p class=”gmenu-explanatory-text”>文言2文言2文言2文言2文言2文言2文言2文言2文言2文言2文言2文言2文言2</p>
</div>
</div>
</li>
<li class=”details-pack”>
<ul class=”clearfix”>
<li class=”cell-one”><a href=”html1-2.html#ptn1″>タイプ1文言2パターン1</a>
<ul>
<li class=”cell-p01-04″><a href=”html1-2.html#ptn1-1″>タイプ1文言2パターン1詳細1</a></li>
</ul>
</li>
<li class=”cell-one”><a href=”html1-2.html#ptn2″>タイプ1文言2パターン2</a>
<ul>
<li class=”cell-p01-05″><a href=”html1-2.html#ptn2-1″>タイプ1文言2パターン2詳細1</a></li>
<li class=”cell-p01-06″><a href=”html1-2.html#ptn2-2″>タイプ1文言2パターン2詳細2</a></li>
</ul>
</li>
<li class=”cell-one”><a href=”html1-2.html#ptn3″>タイプ1文言2パターン3</a>
<ul>
<li class=”cell-p01-07″><a href=”html1-2.html#ptn3-1″>タイプ1文言2パターン3詳細1</a></li>
<li class=”cell-p01-08″><a href=”html1-2.html#ptn3-2″>タイプ1文言2パターン3詳細2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class=”mgmenu1-3″>
<li class=”gmenu-explanatory”>
<div class=”clearfix”>
<p class=”gmenu-title1″><a href=”html1-3.html”>タイプ1文言3</a></p>
<div class=”explanatory-img”>
<img src=”images/64-64-4.png” width=”64″ height=”64″ alt=”タイプ1文言3イメージ” class=”image-vw”>
</div>
<div class=”explanatory-text”>
<p class=”gmenu-explanatory-text”>文言3文言3文言3文言3文言3文言3文言3文言3文言3文言3文言3文言3文言3文言3文言3文言3文言3文言3</p>
</div>
</div>
</li>
<li class=”details-pack”>
<ul class=”clearfix”>
<li class=”cell-one”><a href=”html1-3.html#ptn1″>タイプ1文言3パターン1</a>
<ul>
<li class=”cell-p01-09″><a href=”html1-3.html#ptn1-1″>タイプ1文言3パターン1詳細1</a></li>
<li class=”cell-p01-10″><a href=”html1-3.html#ptn1-2″>タイプ1文言3パターン1詳細2</a></li>
<li class=”cell-p01-11″><a href=”html1-3.html#ptn1-3″>タイプ1文言3パターン1詳細3</a></li>
</ul>
</li>
<li class=”cell-one”><a href=”html1-3.html#ptn2″>タイプ1文言3パターン2</a>
<ul>
<li class=”cell-p01-12″><a href=”html1-3.html#ptn2-1″>タイプ1文言3パターン2詳細1</a></li>
<li class=”cell-p01-13″><a href=”html1-3.html#ptn2-2″>タイプ1文言3パターン2詳細2</a></li>
</ul>
</li>
<li class=”cell-one”><a href=”html1-3.html#ptn3″>タイプ1文言3パターン3</a>
<ul>
<li class=”cell-p01-14″><a href=”html1-3.html#ptn3-1″>タイプ1文言3パターン3詳細1</a></li>
<li class=”cell-p01-15″><a href=”html1-3.html#ptn3-2″>タイプ1文言3パターン3詳細2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</li>

<li class=”menu_list”>
<a href=”html2-1.html” class=”first-level”>タイプ2-1</a>
<!– メガメニュー
一旦非表示にし、マウスを乗せたボタンに連動したコンテンツのみ表示 –>
<div class=”menu_contents”>
<table class=”mgtable”>
<tbody>
<tr>
<td><img src=”images/170-120-02.png” width=”170″ height=”120″ class=”gmenu-img” alt=”タイプ2-1″><br>タイプ2-1</td>
<td>
<ul class=”mgmenu2-1″>
<li class=”cell-p02-01″><a href=”html2-1.html#box1″>タイプ2-1-box1</a></li>
<li class=”cell-p02-02″><a href=”html2-1.html#box2″>タイプ2-1-box2</a></li>
<li class=”cell-p02-03″><a href=”html2-1.html#box3″>タイプ2-1-box3</a></li>
</ul>
<ul class=”mgmenu2-2″>
<li class=”cell-p02-04″><a href=”html2-1.html#box4″>タイプ2-1-box4</a></li>
<li class=”cell-p02-05″><a href=”html2-1.html#box5″>タイプ2-1-box5</a></li>
<li class=”cell-p02-06″><a href=”html2-1.html#box6″>タイプ2-1-box6</a></li>
</ul>
<ul class=”mgmenu2-3″>
<li class=”cell-p02-07″><a href=”html2-1.html#box7″>タイプ2-1-box7</a></li>
<li class=”cell-p02-08″><a href=”html2-1.html#box8″>タイプ2-1-box8</a></li>
<li class=”cell-p02-09″><a href=”html2-1.html#box9″>タイプ2-1-box9</a></li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</li>

<li class=”menu_list”>
<a href=”html2-2.html” class=”first-level”>タイプ2-2</a>
<!– メガメニュー
一旦非表示にし、マウスを乗せたボタンに連動したコンテンツのみ表示 –>
<div class=”menu_contents”>
<table class=”mgtable”>
<tbody>
<tr>
<td><img src=”images/170-120-03.png” width=”170″ height=”120″ class=”gmenu-img” alt=”タイプ2-2イメージ”><br>タイプ2-2</td>
<td>
<ul class=”mgmenu2-4″>
<li class=”cell-p02-10″><a href=”html2-2.html#box1″>タイプ2-box1</a></li>
<li class=”cell-p02-11″><a href=”html2-2.html#box2″>タイプ2-box2</a></li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</li>

<li class=”menu_list”>
<a href=”html2-3.html” class=”first-level”>タイプ2-3</a>
<!– メガメニュー
一旦非表示にし、マウスを乗せたボタンに連動したコンテンツのみ表示 –>
<div class=”menu_contents”>
<table class=”mgtable”>
<tbody>
<tr>
<td><img src=”images/170-120-04.png” width=”170″ height=”120″ class=”gmenu-img” alt=”タイプ2-3″><br>タイプ2-3</td>
<td>
<ul class=”mgmenu2-5″>
<li class=”cell-p02-12″><a href=”html2-3.html#box1″>タイプ2-3-box1</a></li>
<li class=”cell-p02-13″><a href=”html2-3.html#box2″>タイプ2-3-box2</a></li>
<li class=”cell-p02-14″><a href=”html2-3.html#box3″>タイプ2-3-box3</a></li>
</ul>
<ul class=”mgmenu2-6″>
<li class=”cell-p02-15″><a href=”html2-3.html#box4″>タイプ2-3-box4</a></li>
<li class=”cell-p02-16″><a href=”html2-3.html#box5″>タイプ2-3-box5</a></li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</li>
</ul>
</div>
</nav> <!– /navigation –>
<div class=”main-img”>
<img src=”images/index-main.jpg” width=”1920″ height=”724″ class=”img100″>
</div>
</header>
<!– /HEADER –>
</div><!– /WRAPPER –>

</body>
</html>

続いてCSSです。(長くなりますので、修飾や、一般的な記述部分は省いてメガメニュー関連のものを記載します)

@charset “utf-8”;

/*—————————————————–
Header
——————————————————*/
/* ナビゲーション */
/* ①メニューボタンのスタイル */
header#pageHeader nav#gmenu ul {
list-style: none;
}
header#pageHeader nav#gmenu .over-menu {
display: flex;
position: relative;
width: 100%;
height: 46px;
margin: 0;
padding: 3px 0 3px;
background-color: #0c2;
z-index: 30;
}
header#pageHeader nav#gmenu .menu {
display: flex;
position: relative;
list-style-type: none;
margin: 0 auto;
padding: 0;
width: 100%;
max-width: 1200px;
}
nav#gmenu .menu .menu_list > a {
width: 240px;
display: block;
padding: 14px 2px 6px;
transition: .3s;
background: #0c2;
color: #eee;
text-decoration: none;
font-size: 90%;
margin: 0;
border: 1px solid #fff;
text-align: center;
}
/* ②メガメニューのスタイル */
nav#gmenu .menu_contents {
background: #ffffff;
border: 1px solid #ccc;
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
margin-top: 11px;
z-index: 30;
}
nav#gmenu .menu_contents li {
width: 100%;
}
nav#gmenu .menu_contents li a {
color: #fff;
display: block;
}
nav#gmenu .menu_contents li a.black {
color: #000;
text-decoration: none;
}
nav#gmenu .menu_contents li a.none-block {
display: inline;
}
nav#gmenu .mgtable {
width: 100%;
border-collapse: collapse;
}
nav#gmenu .mgtable tr td {
vertical-align: top;
padding-bottom: 10px;
border: 1px #ccc solid;
}
nav#gmenu .mgtable tr td:first-child {
width: 20%;
max-width: 200px;
background-size: cover;
background-color: #363;
font-size: 18px;
text-align: center;
color: #fff;
padding-top: 15px;
}
nav#gmenu li.gmenu-explanatory {
width: 280px;
}
nav#gmenu p.gmenu-title1 a {
font-size: 16px;
font-weight: bold;
color: #fff;
background-color: #22b;
padding: 6px;
margin-bottom: 4px;
}
nav#gmenu .explanatory-img {
width: 60px;
height: 60px;
margin: 5px;
float: left;
}
nav#gmenu .explanatory-img img {
max-width: 100%;
}
nav#gmenu .explanatory-text {
float: left;
width: 185px;
margin: -65px 5px 5px 80px;
}
nav#gmenu .explanatory-text p.gmenu-explanatory-text {
font-size: 15px;
color: #000;
text-align: justify;
line-height: 1.6;
}
.mgmenu ,
.mgmenu1-1 ,
.mgmenu1-2 ,
.mgmenu1-3 ,
.mgmenu2-1 ,
.mgmenu2-2 ,
.mgmenu2-3 ,
.mgmenu2-4 ,
.mgmenu2-5 ,
.mgmenu2-6 ,
.mgmenu2-7 ,
.mgmenu2-8 {
display: flex;
justify-content: space-around;
list-style-type: none;
margin: 0px;
padding: 5px;
}
.mgmenu li ,
.mgmenu1-1 li.gmenu-explanatory ,
.mgmenu1-1 li.details-pack ,
.mgmenu1-2 li.gmenu-explanatory ,
.mgmenu1-2 li.details-pack ,
.mgmenu1-3 li.gmenu-explanatory ,
.mgmenu1-3 li.details-pack ,
.mgmenu2-1 li ,
.mgmenu2-2 li ,
.mgmenu2-3 li ,
.mgmenu2-4 li ,
.mgmenu2-5 li ,
.mgmenu2-6 li {
margin: 5px;
padding: 8px 5px 8px 8px;
border: 1px solid #ccc;
}
.mgmenu1-1 li.details-pack ,
.mgmenu1-2 li.details-pack ,
.mgmenu1-3 li.details-pack {
padding: 6px;
}
.menu_contents table.mgtable ul.mgmenu1-1 li.cell-one ,
.menu_contents table.mgtable ul.mgmenu1-2 li.cell-one ,
.menu_contents table.mgtable ul.mgmenu1-3 li.cell-one {
padding: 0px;
margin: 1% 2% 1% 0;
width: 23%;
max-width: 193px;
font-size: 12px;
float: left;
line-height: 1.6;
}
.cell-p01-01 ,
/*.cell-p01-02 ,
.cell-p01-03 ,*/
.cell-p01-04 ,
.cell-p01-05 ,
.cell-p01-06 ,
.cell-p01-07 ,
.cell-p01-08 ,
.cell-p01-09 ,
.cell-p01-10 ,
.cell-p01-11 ,
.cell-p01-12 ,
.cell-p01-13 ,
.cell-p01-14 ,
.cell-p01-15 {
background-color: #449;
border: 1px #ccc solid;
}
.cell-p02-01 ,
.cell-p02-02 ,
.cell-p02-03 ,
.cell-p02-04 ,
.cell-p02-05 ,
.cell-p02-06 ,
.cell-p02-07 ,
.cell-p02-08 ,
.cell-p02-09 ,
.cell-p02-10 ,
.cell-p02-11 ,
.cell-p02-12 ,
.cell-p02-13 ,
.cell-p02-14 ,
.cell-p02-15 ,
.cell-p02-16 {
background-color:#33d528;
}
.cell-p01-01:hover ,
/*.cell-p01-02:hover ,
.cell-p01-03:hover ,*/
.cell-p01-04:hover ,
.cell-p01-05:hover ,
.cell-p01-06:hover ,
.cell-p01-07:hover ,
.cell-p01-08:hover ,
.cell-p01-09:hover ,
.cell-p01-10:hover ,
.cell-p01-11:hover ,
.cell-p01-12:hover ,
.cell-p01-13:hover ,
.cell-p01-14:hover ,
.cell-p01-15:hover ,
.cell-p02-01:hover ,
.cell-p02-02:hover ,
.cell-p02-03:hover ,
.cell-p02-04:hover ,
.cell-p02-05:hover ,
.cell-p02-06:hover ,
.cell-p02-07:hover ,
.cell-p02-08:hover ,
.cell-p02-09:hover ,
.cell-p02-10:hover ,
.cell-p02-11:hover ,
.cell-p02-12:hover ,
.cell-p02-13:hover ,
.cell-p02-14:hover ,
.cell-p02-15:hover ,
.cell-p02-16:hover {
background-color:#75a4fc;
}
.menu_contents table.mgtable ul.mgmenu1-1 li.details-pack li.cell-one li ,
.menu_contents table.mgtable ul.mgmenu1-2 li.details-pack li.cell-one li ,
.menu_contents table.mgtable ul.mgmenu1-3 li.details-pack li.cell-one li {
font-size: 15px;
border: 1px #ccc solid;
padding: 5px 6px;
margin-bottom: 5px;
}
.menu_contents table.mgtable ul.mgmenu1-1 li.details-pack li.cell-one li.cell-p01-02 ,
.menu_contents table.mgtable ul.mgmenu1-1 li.details-pack li.cell-one li.cell-p01-03 {
border: 0px #fff;
}
img.gmenu-img {
margin-bottom: 6px;
}
img.img100 {
width: 100%;
height: auto;
}

こんな感じで組みました。正直クラス名のつけ方にセンスが無いのは自覚していますが、参考になりましたでしょうか?

Follow me!