【HTML5】 メガドロップダウンメニュー
HTML5でのメガドロップダウンメニューを紹介します。
近年では商品数の多いECサイトで利用されることが多くなってきました。
簡単に作成できるので、サイトに実装してみては。
【index.html】
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>メガドロップダウンメニュー</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <header> <img src="images/logo.png" width="225" height="45" alt=""> </header> <!--メガドロップダウンメニュー--> <nav> <ul> <li class="color-blue"> <a href="#">Tableware</a> <ul class="subs col4"> <li><span>和食器</span> <ul> <li><a href="test.html">ご飯茶碗</a></li> <li><a href="test.html">汁椀</a></li> <li><a href="test.html">お皿・鉢</a></li> <li><a href="test.html">湯呑み</a></li> <li><a href="test.html">急須</a></li> </ul> </li> <li><span>洋食器</span> <ul> <li><a href="test.html">お皿・プレート</a></li> <li><a href="test.html">カップ＆ソーサー</a></li> <li><a href="test.html">マグカップ</a></li> <li><a href="test.html">ティーポット</a></li> </ul> </li> <li><span>ガラス食器</span> <ul> <li><a href="test.html">グラス・タンブラー</a></li> <li><a href="test.html">ワイングラス</a></li> <li><a href="test.html">日本酒・焼酎グラス</a></li> <li><a href="test.html">お皿・鉢</a></li> <li><a href="test.html">プレート</a></li> </ul> </li> <li><span>カトラリー</span> <ul> <li><a href="test.html">カトラリーセット</a></li> <li><a href="test.html">ナイフ・フォーク</a></li> <li><a href="test.html">スプーン</a></li> </ul> </li> </ul> </li> <li class="color-green"> <a href="#">Cooking</a> <ul class="subs col3"> <li><span>鍋・フライパン</span> <ul> <li><a href="test.html">両手鍋</a></li> <li><a href="test.html">片手鍋</a></li> <li><a href="test.html">圧力鍋</a></li> <li><a href="test.html">フライパン</a></li> <li><a href="test.html">中華鍋</a></li> </ul> </li> <li><span>調理器具</span> <ul> <li><a href="test.html">包丁・ナイフ</a></li> <li><a href="test.html">まな板</a></li> <li><a href="test.html">ボール</a></li> <li><a href="test.html">キッチン用品</a></li> </ul> </li> <li><span>小物・収納</span> <ul> <li><a href="test.html">調味料入れ</a></li> <li><a href="test.html">フードキーパー</a></li> <li><a href="test.html">容器・缶</a></li> <li><a href="test.html">ワインラック</a></li> </ul> </li> </ul> </li> <li class="color-red"> <a href="#">Table linen</a> <ul class="subs col1"> <li><a href="test.html">テーブルクロス</a></li> <li><a href="test.html">テーブルセンター</a></li> <li><a href="test.html">ランチョンマット</a></li> <li><a href="test.html">ナプキン</a></li> <li><a href="test.html">キッチン＆アクセサリー</a></li> </ul> </li> <li> <a href="#">Catalog</a> <ul class="subs col1"> <li><a href="test.html">Tableware カタログ</a></li> <li><a href="test.html">Cooking カタログ</a></li> <li><a href="test.html">Table linen カタログ</a></li> </ul> </li> <li> <a href="test.html">Outlet</a> </li> <li> <a href="test.html">Gift</a> </li> </ul> </nav> </div> </body> </html>
【style.css】
@charset "utf-8";
/* ------- base ------- */
body, div, ul, li {
margin:0;
padding:0;
}
body {
background-color: #DFE0D1;
font-size: 62.5%;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
color: #292623;
}
a {
text-decoration: none;
color: #292623;
}
/* ------- container ------- */
#container {
width: 900px;
margin: 0 auto;
}
/* ------- header ------- */
header {
height: 70px;
}
header img {
margin-top: 25px;
}
/* ------- nav ------- */
nav {
width: 900px;
background: #FFFFFF;
}
nav li {
list-style-type: none;
}
nav > li {
position: relative;
float: left;
width: 150px;
}
nav > li > a {
display: block;
padding: 23px 0 23px 0;
background: #FFFFFF;
border-right: 1px solid #C2C5A9;
font-family: Helvetica, Verdana, Arial, sans-serif;
font-size: 1.8em;
line-height: 1;
text-align: center;
}
nav > li:hover > a {
background: #4F4944;
color: #FFFFFF;
font-weight: bold;
}
nav .subs {
visibility: hidden;
position: absolute;
width: 760px;
top: 100%;
left: 0;
padding: 15px;
background: url("images/arrow.png") no-repeat 66px 0 #797168;
}
nav > li:hover .subs {
visibility: visible;
}
nav .subs > li {
float: left;
width: 190px;
}
nav .subs li span {
font-size: 2.0em;
color: #FFFFFF;
}
nav .subs li {
padding-top: 5px;
}
nav .subs li a {
display: block;
border-left: 6px solid #4F4944;
padding: 13px 0 13px 0;
font-size: 1.4em;
line-height: 1;
text-indent: 12px;
color: #FFFFFF;
}
nav .subs li a:hover {
border-left: 12px solid #BCB8B4;
background: #FFFFFF;
color: #797168;
font-weight: bold;
}
/* ------- サブメニューの幅の指定 ------- */
nav .col4 {
width: 760px;
}
nav .col3 {
width: 570px;
}
nav .col1 {
width: 190px;
}
/* ------- 色の指定 ------- */
nav > li.color-blue:hover > a {
background: #0F81BD;
}
nav > li.color-green:hover > a {
background: #0A9AA7;
}
nav > li.color-red:hover > a {
background: #BE386D;
}
nav .color-blue .subs {
background: url("images/arrow_blue.png") no-repeat 66px 0 #419ED6;
}
nav .color-green .subs {
background: url("images/arrow_green.png") no-repeat 66px 0 #28B8BB;
}
nav .color-red .subs {
background: url("images/arrow_red.png") no-repeat 66px 0 #E1608D;
}
nav .color-blue .subs li a {
border-left: 6px solid #0F81BD;
}
nav .color-green .subs li a {
border-left: 6px solid #0A9AA7;
}
nav .color-red .subs li a {
border-left: 6px solid #BE386D;
}
nav .color-blue .subs li a:hover {
border-left: 12px solid #A0CFEB;
color: #419ED6;
}
nav .color-green .subs li a:hover {
border-left: 12px solid #94DCDD;
color: #28B8BB;
}
nav .color-red .subs li a:hover {
border-left: 12px solid #F0B0C6;
color: #E1608D;
}
