メニューのサンプル

CSS ・ HTML　

サンプルあり・メニュー・リスト表示・レイアウト

ウェブ制作において必ず作るメニューやナビゲーションなどのグローバルメニュー。

Memo:
グロバールメニューとは、ウェブサイト上でどのページにも共通で表示されるメニューのことです。

スタンダードなメニューのソースをあらかじめ準備しておいて、いつも同じものからカスタマイズしていくと効率よくできるかと思います。

そんなときに便利なシンプルなメニューのソースをご紹介。

HTMLのソース

<div id="menu_box">
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Sitemap</a></li>
</ul>
</div>

CSSのソース

#menu_box{
  width:750px;
  background: #FCEB9D;
  height:40px;
}

#menu_box ul.menu{
  margin:0;
  padding:0;
  list-style: none;
}
#menu_box ul.menu li{
  display:inline;
}
#menu_box ul.menu li a{
  display:block;
  float:left;
  margin:5px 0 0;
  padding:7px 0 0;
  text-align:center;
  width:150px;
  font-size:16px;
  height:23px;
  color:#756F61;
  font-weight:bold;
  text-decoration:none;
  background:#C2D8AB;
}



#menu_box ul.menu li a:hover{
  color:#fff;
  font-weight:bold;
  text-decoration:none;
  background:#EC8E9E;
}

できるだけシンプルでカスタマイズしやすいソースにしました。
backgroundに画像を配置しても良いですし、ボタンの大きさや文字の色も変更したりできます。

今回はソースにul、liを使いましたが、デザインによってはdivのみでメニューを作ったほうが良い場合もありますね。