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

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

先ずはメガメニューというものはどのようなものかと云いますと、『クリックまたはマウスオーバーで開くドロップダウンメニューの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”>

// ①マウスをボタンに乗せた際のイベントを設定
$(‘#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イメージ１”><br>タイプ1</td>
<td>
<ul class=”mgmenu1-1″>
<li class=”gmenu-explanatory”>
<div class=”clearfix”>
<p class=”gmenu-title1″><a href=”html1.html”>タイプ１文言１</a></p>
<div class=”explanatory-img”>
<img src=”images/64-64-1.png” width=”64″ height=”64″ alt=”タイプ１文言１イメージ” class=”image-vw”>
</div>
<div class=”explanatory-text”>
<p class=”gmenu-explanatory-text”>文言１文言１文言１文言１文言１文言１</p>
</div>
</div>
</li>
<li class=”details-pack”>
<ul class=”clearfix”>
<li class=”cell-one”><a href=”html1-1.html#ptn1″>タイプ１文言１パターン１</a>
<ul>
<li class=”cell-p01-01″><a href=”html1.html#ptn1-1″>タイプ１文言１パターン１詳細１</a></li>
</ul>
</li>
<li class=”cell-one”>
<ul>
<li class=”cell-p01-02″> </li>
</ul>
</li>
<li class=”cell-one”>
<ul>
<li class=”cell-p01-03″> </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”>タイプ１文言２</a></p>
<div class=”explanatory-img”>
<img src=”images/64-64-2.png” width=”64″ height=”64″ alt=”タイプ１文言２イメージ” class=”image-vw”>
</div>
<div class=”explanatory-text”>
<p class=”gmenu-explanatory-text”>文言２文言２文言２文言２文言２文言２文言２文言２文言２文言２文言２文言２文言２</p>
</div>
</div>
</li>
<li class=”details-pack”>
<ul class=”clearfix”>
<li class=”cell-one”><a href=”html1-2.html#ptn1″>タイプ１文言２パターン１</a>
<ul>
<li class=”cell-p01-04″><a href=”html1-2.html#ptn1-1″>タイプ１文言２パターン１詳細１</a></li>
</ul>
</li>
<li class=”cell-one”><a href=”html1-2.html#ptn2″>タイプ１文言２パターン２</a>
<ul>
<li class=”cell-p01-05″><a href=”html1-2.html#ptn2-1″>タイプ１文言２パターン２詳細１</a></li>
<li class=”cell-p01-06″><a href=”html1-2.html#ptn2-2″>タイプ１文言２パターン２詳細２</a></li>
</ul>
</li>
<li class=”cell-one”><a href=”html1-2.html#ptn3″>タイプ１文言２パターン３</a>
<ul>
<li class=”cell-p01-07″><a href=”html1-2.html#ptn3-1″>タイプ１文言２パターン３詳細１</a></li>
<li class=”cell-p01-08″><a href=”html1-2.html#ptn3-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”>タイプ１文言３</a></p>
<div class=”explanatory-img”>
<img src=”images/64-64-4.png” width=”64″ height=”64″ alt=”タイプ１文言３イメージ” class=”image-vw”>
</div>
<div class=”explanatory-text”>
<p class=”gmenu-explanatory-text”>文言３文言３文言３文言３文言３文言３文言３文言３文言３文言３文言３文言３文言３文言３文言３文言３文言３文言３</p>
</div>
</div>
</li>
<li class=”details-pack”>
<ul class=”clearfix”>
<li class=”cell-one”><a href=”html1-3.html#ptn1″>タイプ１文言３パターン１</a>
<ul>
<li class=”cell-p01-09″><a href=”html1-3.html#ptn1-1″>タイプ１文言３パターン１詳細１</a></li>
<li class=”cell-p01-10″><a href=”html1-3.html#ptn1-2″>タイプ１文言３パターン１詳細２</a></li>
<li class=”cell-p01-11″><a href=”html1-3.html#ptn1-3″>タイプ１文言３パターン１詳細３</a></li>
</ul>
</li>
<li class=”cell-one”><a href=”html1-3.html#ptn2″>タイプ１文言３パターン２</a>
<ul>
<li class=”cell-p01-12″><a href=”html1-3.html#ptn2-1″>タイプ１文言３パターン２詳細１</a></li>
<li class=”cell-p01-13″><a href=”html1-3.html#ptn2-2″>タイプ１文言３パターン２詳細２</a></li>
</ul>
</li>
<li class=”cell-one”><a href=”html1-3.html#ptn3″>タイプ１文言３パターン３</a>
<ul>
<li class=”cell-p01-14″><a href=”html1-3.html#ptn3-1″>タイプ１文言３パターン３詳細１</a></li>
<li class=”cell-p01-15″><a href=”html1-3.html#ptn3-2″>タイプ１文言３パターン３詳細２</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</li>

</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!

カテゴリー: ブログ

タグ: メガメニュー