ヘッダ付近での使用を想定した横型のメニューです。
hor_menu4_back1.gif
hor_menu4_back2.gif
hor_menu4_back3.gif
hor_menu4_back4.gif
hor_menu4_back5.gif
hor_menu4_back6.gif
hor_menu4_back7.gif
※画像へは直接リンクしないでください。(ダウンロードしてから使用してください)
以下は、メニュー7つ分のコードとなります。必要な部分のみをコピーして使用してください。(clearfixをコピーし忘れないようにご注意ください)
/* --- メニュー1 開始 --- */ .nav1 { width: 100%; /* ナビゲーションの幅 */ background: #000000 url(hor_menu4_back1.gif) repeat-x top; /* ナビゲーションの背景 */ border-top: 1px #333333 solid; /* 上枠線 */ border-bottom: 1px #666666 solid; /* 下枠線 */ margin: 40px 0; font-size: 80%; } .nav1 .nl { width: 600px; /* メニューの幅 */ margin: 0 auto; /* センターに配置 */ padding: 0; background: #000000 url(hor_menu4_back1.gif) repeat-x top; /* メニューの背景 */ border-left: 1px #333333 solid; /* メニューの左枠線 */ border-right: 1px #666666 solid; /* メニューの右枠線 */ list-style-type: none; text-align: center; } .nav1 .nl li { width: 20%; /* 項目の幅 */ float: left; } .nav1 .nl li a { display: block; position: relative; /* IE6用 */ padding: 9px 2px; /* リンクエリアのパディング(上下、左右) */ border-left: 1px #666666 solid; /* リンクエリアの左枠線 */ border-right: 1px #333333 solid; /* リンクエリアの右枠線 */ text-decoration: none; /* テキストの下線(なし) */ font-weight: bold; /* 太字 */ } .nav1 .nl li a:link { color: #ffffff; } .nav1 .nl li a:visited { color: #ffffff; } .nav1 .nl li a:hover { color: #ff8000; } .nav1 .nl li a:active { color: #ff8000; } /* --- メニュー1 終了 --- */ /* --- メニュー2 開始 --- */ .nav2 { width: 100%; /* ナビゲーションの幅 */ background: #008000 url(hor_menu4_back2.gif) repeat-x top; /* ナビゲーションの背景 */ border-top: 1px #004600 solid; /* 上枠線 */ border-bottom: 1px #008000 solid; /* 下枠線 */ margin: 40px 0; font-size: 80%; } .nav2 .nl { width: 600px; /* メニューの幅 */ margin: 0 auto; /* センターに配置 */ padding: 0; background: #008000 url(hor_menu4_back2.gif) repeat-x top; /* メニューの背景 */ border-left: 1px #004600 solid; /* メニューの左枠線 */ border-right: 1px #008000 solid; /* メニューの右枠線 */ list-style-type: none; text-align: center; } .nav2 .nl li { width: 20%; /* 項目の幅 */ float: left; } .nav2 .nl li a { display: block; position: relative; /* IE6用 */ padding: 9px 2px; /* リンクエリアのパディング(上下、左右) */ border-left: 1px #008000 solid; /* リンクエリアの左枠線 */ border-right: 1px #004600 solid; /* リンクエリアの右枠線 */ text-decoration: none; /* テキストの下線(なし) */ font-weight: bold; /* 太字 */ } .nav2 .nl li a:link { color: #ffffff; } .nav2 .nl li a:visited { color: #ffffff; } .nav2 .nl li a:hover { color: #ffff00; } .nav2 .nl li a:active { color: #ffff00; } /* --- メニュー2 終了 --- */ /* --- メニュー3 開始 --- */ .nav3 { width: 100%; /* ナビゲーションの幅 */ background: #0000c0 url(hor_menu4_back3.gif) repeat-x top; /* ナビゲーションの背景 */ border-top: 1px #000080 solid; /* 上枠線 */ border-bottom: 1px #8080ff solid; /* 下枠線 */ margin: 40px 0; font-size: 80%; } .nav3 .nl { width: 600px; /* メニューの幅 */ margin: 0 auto; /* センターに配置 */ padding: 0; background: #0000c0 url(hor_menu4_back3.gif) repeat-x top; /* メニューの背景 */ border-left: 1px #000080 solid; /* メニューの左枠線 */ border-right: 1px #8080ff solid; /* メニューの右枠線 */ list-style-type: none; text-align: center; } .nav3 .nl li { width: 20%; /* 項目の幅 */ float: left; } .nav3 .nl li a { display: block; position: relative; /* IE6用 */ padding: 9px 2px; /* リンクエリアのパディング(上下、左右) */ border-left: 1px #8080ff solid; /* リンクエリアの左枠線 */ border-right: 1px #000080 solid; /* リンクエリアの右枠線 */ text-decoration: none; /* テキストの下線(なし) */ font-weight: bold; /* 太字 */ } .nav3 .nl li a:link { color: #ffffff; } .nav3 .nl li a:visited { color: #ffffff; } .nav3 .nl li a:hover { color: #ffff00; } .nav3 .nl li a:active { color: #ffff00; } /* --- メニュー3 終了 --- */ /* --- メニュー4 開始 --- */ .nav4 { width: 100%; /* ナビゲーションの幅 */ background: #06a2ec url(hor_menu4_back4.gif) repeat-x top; /* ナビゲーションの背景 */ border-top: 1px #046a9b solid; /* 上枠線 */ border-bottom: 1px #87d6fc solid; /* 下枠線 */ margin: 40px 0; font-size: 80%; } .nav4 .nl { width: 600px; /* メニューの幅 */ margin: 0 auto; /* センターに配置 */ padding: 0; background: #06a2ec url(hor_menu4_back4.gif) repeat-x top; /* メニューの背景 */ border-left: 1px #046a9b solid; /* メニューの左枠線 */ border-right: 1px #87d6fc solid; /* メニューの右枠線 */ list-style-type: none; text-align: center; } .nav4 .nl li { width: 20%; /* 項目の幅 */ float: left; } .nav4 .nl li a { display: block; position: relative; /* IE6用 */ padding: 9px 2px; /* リンクエリアのパディング(上下、左右) */ border-left: 1px #87d6fc solid; /* リンクエリアの左枠線 */ border-right: 1px #046a9b solid; /* リンクエリアの右枠線 */ text-decoration: none; /* テキストの下線(なし) */ font-weight: bold; /* 太字 */ } .nav4 .nl li a:link { color: #000000; } .nav4 .nl li a:visited { color: #000000; } .nav4 .nl li a:hover { color: #ffffff; } .nav4 .nl li a:active { color: #ffffff; } /* --- メニュー4 終了 --- */ /* --- メニュー5 開始 --- */ .nav5 { width: 100%; /* ナビゲーションの幅 */ background: #ffc040 url(hor_menu4_back5.gif) repeat-x top; /* ナビゲーションの背景 */ border-top: 1px #c68600 solid; /* 上枠線 */ border-bottom: 1px #ffd680 solid; /* 下枠線 */ margin: 40px 0; font-size: 80%; } .nav5 .nl { width: 600px; /* メニューの幅 */ margin: 0 auto; /* センターに配置 */ padding: 0; background: #ffc040 url(hor_menu4_back5.gif) repeat-x top; /* メニューの背景 */ border-left: 1px #c68600 solid; /* メニューの左枠線 */ border-right: 1px #ffd680 solid; /* メニューの右枠線 */ list-style-type: none; text-align: center; } .nav5 .nl li { width: 20%; /* 項目の幅 */ float: left; } .nav5 .nl li a { display: block; position: relative; /* IE6用 */ padding: 9px 2px; /* リンクエリアのパディング(上下、左右) */ border-left: 1px #ffd680 solid; /* リンクエリアの左枠線 */ border-right: 1px #c68600 solid; /* リンクエリアの右枠線 */ text-decoration: none; /* テキストの下線(なし) */ font-weight: bold; /* 太字 */ } .nav5 .nl li a:link { color: #000000; } .nav5 .nl li a:visited { color: #000000; } .nav5 .nl li a:hover { color: #ffffff; } .nav5 .nl li a:active { color: #ffffff; } /* --- メニュー5 終了 --- */ /* --- メニュー6 開始 --- */ .nav6 { width: 100%; /* ナビゲーションの幅 */ background: #ea26a0 url(hor_menu4_back6.gif) repeat-x top; /* ナビゲーションの背景 */ border-top: 1px #b51177 solid; /* 上枠線 */ border-bottom: 1px #f385ca solid; /* 下枠線 */ margin: 40px 0; font-size: 80%; } .nav6 .nl { width: 600px; /* メニューの幅 */ margin: 0 auto; /* センターに配置 */ padding: 0; background: #ea26a0 url(hor_menu4_back6.gif) repeat-x top; /* メニューの背景 */ border-left: 1px #b51177 solid; /* メニューの左枠線 */ border-right: 1px #f385ca solid; /* メニューの右枠線 */ list-style-type: none; text-align: center; } .nav6 .nl li { width: 20%; /* 項目の幅 */ float: left; } .nav6 .nl li a { display: block; position: relative; /* IE6用 */ padding: 9px 2px; /* リンクエリアのパディング(上下、左右) */ border-left: 1px #f385ca solid; /* リンクエリアの左枠線 */ border-right: 1px #b51177 solid; /* リンクエリアの右枠線 */ text-decoration: none; /* テキストの下線(なし) */ font-weight: bold; /* 太字 */ } .nav6 .nl li a:link { color: #ffffff; } .nav6 .nl li a:visited { color: #ffffff; } .nav6 .nl li a:hover { color: #ffff00; } .nav6 .nl li a:active { color: #ffff00; } /* --- メニュー6 終了 --- */ /* --- メニュー7 開始 --- */ .nav7 { width: 100%; /* ナビゲーションの幅 */ background: #f00000 url(hor_menu4_back7.gif) repeat-x top; /* ナビゲーションの背景 */ border-top: 1px #c00000 solid; /* 上枠線 */ border-bottom: 1px #ff8080 solid; /* 下枠線 */ margin: 40px 0; font-size: 80%; } .nav7 .nl { width: 600px; /* メニューの幅 */ margin: 0 auto; /* センターに配置 */ padding: 0; background: #f00000 url(hor_menu4_back7.gif) repeat-x top; /* メニューの背景 */ border-left: 1px #c00000 solid; /* メニューの左枠線 */ border-right: 1px #ff8080 solid; /* メニューの右枠線 */ list-style-type: none; text-align: center; } .nav7 .nl li { width: 20%; /* 項目の幅 */ float: left; } .nav7 .nl li a { display: block; position: relative; /* IE6用 */ padding: 9px 2px; /* リンクエリアのパディング(上下、左右) */ border-left: 1px #ff8080 solid; /* リンクエリアの左枠線 */ border-right: 1px #c00000 solid; /* リンクエリアの右枠線 */ text-decoration: none; /* テキストの下線(なし) */ font-weight: bold; /* 太字 */ } .nav7 .nl li a:link { color: #ffffff; } .nav7 .nl li a:visited { color: #ffffff; } .nav7 .nl li a:hover { color: #ffff00; } .nav7 .nl li a:active { color: #ffff00; } /* --- メニュー7 終了 --- */ /* --- clearfix --- */ .clearFix:after { content: "."; display: block; height: 0; clear: left; visibility: hidden; } .clearFix { min-height: 1px; }
<div class="nav1"> <ul class="nl clearFix"> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー1</a></li> </ul> </div> <div class="nav2"> <ul class="nl clearFix"> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー2</a></li> </ul> </div> <div class="nav3"> <ul class="nl clearFix"> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー3</a></li> </ul> </div> <div class="nav4"> <ul class="nl clearFix"> <li><a href="#">メニュー4</a></li> <li><a href="#">メニュー4</a></li> <li><a href="#">メニュー4</a></li> <li><a href="#">メニュー4</a></li> <li><a href="#">メニュー4</a></li> </ul> </div> <div class="nav5"> <ul class="nl clearFix"> <li><a href="#">メニュー5</a></li> <li><a href="#">メニュー5</a></li> <li><a href="#">メニュー5</a></li> <li><a href="#">メニュー5</a></li> <li><a href="#">メニュー5</a></li> </ul> </div> <div class="nav6"> <ul class="nl clearFix"> <li><a href="#">メニュー6</a></li> <li><a href="#">メニュー6</a></li> <li><a href="#">メニュー6</a></li> <li><a href="#">メニュー6</a></li> <li><a href="#">メニュー6</a></li> </ul> </div> <div class="nav7"> <ul class="nl clearFix"> <li><a href="#">メニュー7</a></li> <li><a href="#">メニュー7</a></li> <li><a href="#">メニュー7</a></li> <li><a href="#">メニュー7</a></li> <li><a href="#">メニュー7</a></li> </ul> </div>