2012.11.18
css

メニューのサンプル

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

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のみでメニューを作ったほうが良い場合もありますね。

関連する記事

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP