今回は上の画像のようなプルダウンメニュー付きの、グローバルメニューの作成を紹介します。
CSSだけ使用して作成していますので、画像を用意する必要はありません。
完成品はこちらで見れます
まずはコードの紹介
htmlソースコード
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8" /> <title>テンプレート</title> <link rel="stylesheet" href="style.css" /> </head> <body> <section> <header> <nav> <ul id="menu"> <li><a href="#">MENU1</a> <ul> <li><a href="#">sub-menu1</a></li> <li><a href="#">sub-menu2</a></li> <li><a href="#">sub-menu3</a></li> </ul> </li> <li><a href="#">MENU2</a> <ul> <li><a href="#">sub-menu1</a></li> <li><a href="#">sub-menu2</a></li> <li><a href="#">sub-menu3</a></li> <li><a href="#">sub-menu4</a></li> </ul> </li> <li><a href="#">MENU3</a> <ul> <li><a href="#">sub-menu1</a></li> <li><a href="#">sub-menu2</a></li> <li><a href="#">sub-menu3</a></li> </ul> </li> <li><a href="#">MENU4</a> <ul> <li><a href="#">sub-menu1</a></li> <li><a href="#">sub-menu2</a></li> <li><a href="#">sub-menu3</a></li> <li><a href="#">sub-menu4</a></li> </ul> </li> <li><a href="#">MENU5</a> <ul> <li><a href="#">sub-menu1</a></li> <li><a href="#">sub-menu2</a></li> <li><a href="#">sub-menu3</a></li> <li><a href="#">sub-menu4</a></li> </ul> </li> <li><a href="#">MENU6</a> <ul> <li><a href="#">sub-menu1</a></li> <li><a href="#">sub-menu2</a></li> <li><a href="#">sub-menu3</a></li> </ul> </li> </ul> </nav> </header> </section> <article> </article> <aside> </aside> <footer> </footer> </body> </html>
スタイルシート
#menu{ list-style-type: none; width: 870px; height: 40px; margin: 100px auto; padding: 0; background: #000000; border-bottom: 3px solid #808080; border-radius: 10px 10px 0px 0px; } #menu li{ position: relative; width: 16.66%; float: left; margin: 0; padding: 0; text-align: center; } #menu li a{ display: block; margin: 0; padding: 12px 0 12px; color: #ffffff; font-size: 17px; font-weight: bold; text-decoration: none; } #menu li:hover > a{ background: #696969; color: #ffffff; } #menu > li:hover > a{ border-radius: 10px 10px 0px 0px; } #menu li ul{ list-style: none; position: absolute; top: 100%; left: 0; margin: 0; padding: 0; border-radius: 10px 10px 0px 0px; } #menu li ul li{ overflow: hidden; width: 100%; height: 0; color: #fff; } #menu li ul li a{ padding: 13px 15px; background: #000000; text-align: left; font-size: 15px; font-weight: normal; } #menu li:hover ul li{ overflow: hidden; height: 34px; border-bottom: 1px solid #ffffff; } #menu li:hover ul li:last-child a{ border-radius: 0px 0px 20px 20px; }
コードの解説
#menu{ list-style-type: none; width: 870px; height: 40px; margin: 100px auto; padding: 0; background: #000000; border-bottom: 3px solid #808080; border-radius: 10px 10px 0px 0px; }
list-style-type: none;
「・」をなくします
width: 870px;
ナビの幅を870pxに指定
height: 40px;
ナビの高さを40pxに指定
margin: 100px auto;
TOPから100px間隔をあける為に指定、実際に使う環境に合わせて指定し直してださい。autoを入れることで中央に調整されナビが配置されます。
border-bottom: 3px solid #808080;
ナビの下部分に3px分の色の違うスペースを作る為に使用#の後はカラーコードです。
html色見本サイト
border-radius: 10px 10px 0px 0px;
ナビ上部を丸める為に指定しています。
メニュー親要素の設定
#menu li{ position: relative; width: 16.66%; float: left; margin: 0; padding: 0; text-align: center; } #menu li a{ display: block; margin: 0; padding: 12px 0 12px; color: #ffffff; font-size: 17px; font-weight: bold; text-decoration: none; } #menu li:hover > a{ background: #696969; color: #ffffff; } #menu > li:hover > a{ border-radius: 10px 10px 0px 0px; }
position: relative;
親要素を基準として配置する為、relativeを指定します。
width: 16.66%;
メニューを6個にしてあるので均等にする為16.6%で指定しています。
float: left;
メニューを横並びにする為に必要です。
text-align: center;
文字を中心に配置する為に指定。
text-decoration: none;
アンダーラインを消しています。
font-weight: bold;
フォントを太字に指定。
background: #696969;
カーソルが載っている時の、色を指定しています。([li:hover > a]この部分でカーソルが載っている場合と指定。)
メニュー子要素の設定
#menu li ul{ list-style: none; position: absolute; top: 100%; left: 0; margin: 0; padding: 0; border-radius: 10px 10px 0px 0px; } #menu li ul li{ overflow: hidden; width: 100%; height: 0; color: #fff; } #menu li ul li a{ padding: 13px 15px; background: #000000; text-align: left; font-size: 15px; font-weight: normal; } #menu li:hover ul li{ overflow: hidden; height: 34px; border-bottom: 1px solid #ffffff; } #menu li:hover ul li:last-child a{ border-radius: 0px 0px 20px 20px; }
position: absolute; top: 100%;
「#menu li」を基準に表示位置を指定。「top: 100%;」で親メニューの真下に表示するように指定しています。
menu li:hover ul li:last-child a
最後の子要素のみ角を丸めるように指定しています。
CSSの参考書を探す
最後に
参考になったなぁ~って思えたら、シェアをお願いします。
モチベーション向上につながります!!