Qitailang's HP > webtech

floatを使った横並びメニュー

2014/08/17

floatを使った横並びメニュー。面倒なところはfloatの解除とセンタリングテクニック。

2016/01/10 追記

clearFixをnew micro clearFixに変更( .cf は .clearFixのまま）

左寄せ、可変幅メニュー項目、clearFixでフロート解除

sample1

<div id="menu">
<ul class="clearFix">
<li><a href="#">ホームページ作成</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">スタイルシート</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">掲示板</a></li>
</ul>
</div>

#menu {
  margin:0px;
}

#menu ul {
  margin:0px;
  list-style-type: none;
  background: #004080 url(hor2_menu2_off.gif) repeat-x top;
  padding-left:0px;
}

#menu ul li {
  float: left;
  border-right: 1px #004080 solid; 
  margin:  0px;
  text-align:center;
  /*width:150px;メニュー幅固定ならココを指定*/
}

#menu ul li:first-child {
  border-left: 1px #004080 solid;
}

#menu ul li:hover {
  background: #004080 url(hor2_menu2_on.gif) repeat-x top; 
}

#menu ul li a {
  margin:  0 0.5em;
  display: block;
  color: #ffffff;
  position: relative; /* IE6用 */
  padding: 5px 5px;
  text-decoration:none;
}

/* --- clearfix フロートのクリアテクニック(new micro clearFix IE6+  --- */
.clearFix:before,.clearFix:after { 
  content: ""; 
  display: table; 
}
.clearFix:after { 
  clear: both;
}
.clearFix { 
  zoom: 1;
}

中央寄せ、可変幅メニュー項目、フロート解除は親要素にoverflow:hidden;を追加する

sample2

<div id="menu">
  <ul>
    <li><a href="#">ホームページ作成</a></li>
    <li><a href="#">HTML</a></li>
    <li><a href="#">スタイルシート</a></li>
    <li><a href="#">JavaScript</a></li>
    <li><a href="#">掲示板</a></li>
  </ul>
</div>

#menu {
  overflow: hidden; /*floatのクリアテクニック*/
}
#menu ul {
  position: relative;
  left: 50%;
  float: left;
  margin: 0;
  padding: 0;
  list-style: none;  
}

#menu li {
  display: block;
  position: relative;
  left: -50%;  /*right:50%;でもよい*/
  float: left;
  /*width: 120px;メニュー幅固定ならココを指定*/
  margin: 0;
  height: 31px;
  padding-left:20px;
  line-height:31px;
  text-align:center;
  color:#333;
  background:url(gazo.jpg) no-repeat left top;
}
#menu li a {
  display: block;  /*クリック有効域をテキストでなくblockに*/
  margin-right:-1px;/*項目間の境界が太くならないように*/
  padding-right:20px;
  background:url(gazo.jpg) no-repeat right top;/*画像右端を表示*/
  color:#333;
  text-decoration: none;
}
#menu li a:hover {
  text-decoration: underline;
}

参照サイト
http://yume.hacca.jp/koiki/css/listyoko.htm
http://www.tagindex.com/template/menu/hor2_menu2.html

Ida Qitailang