1. Home
  2. Webテンプレート
  3. メニュー
  4. 2段メニュー1

2段メニュー1



2段型のメニューを作成するサンプルコードです。

1つのリストを2列で表示するタイプとなります。


表示例

ボックス内での使用を想定した2段型のメニューです。各項目は「左 → 右 → 左 → 右」の順序で並びます。
※ただし、テキストが折り返されるときれいに並ばない場合があります。

  • floatを指定して、li要素を横に並べています。
  • リンクテキスト左のマーカーは、li要素の背景に設定されています。
  • マーカーの大きさに合わせて、背景画像の表示位置や「リンクエリアの左マージン」を微調整する必要があります。
  • リンクテキスト下の間隔は、「項目の下パディング」で調整することができます。(マージンではなくパディングで指定しておいた方が無難です)
  • このサンプルでは「項目の幅」を50%に指定していますが、これを33%に変更すると3段型のメニューになります。
  • このサンプルでは、境界線を含めたボックスの幅は400pxになります。

使用している画像

square.gif square.gifsquare.gif 拡大)

folder.gif folder.gif

背景は透過されています。

画像へは直接リンクしないでください。ダウンロードしてから使用してください)

画像の制作について

コード

以下は、メニュー2つ分のコードとなります。必要な部分のみをコピーして使用してください。(clearfixをコピーし忘れないようにご注意ください

CSSコード


/* --- 1番目のメニュー --- */
/* --- ボックス --- */
div.section1 {
width: 398px; /* ボックスの幅 */
margin: 20px 0; /* ボックスのマージン(上下、左右) */
background-color: #ffffff; /* ボックスの背景色 */
border: 1px #c0c0c0 solid; /* ボックスの境界線 */
font-size: 80%; /* ボックスの文字サイズ */
}
/* --- メニューエリア --- */
div.section1 ul.menu {
width: 380px; /* メニューの幅 */
margin: 15px auto 10px; /* メニューのマージン(上、左右、下) */
padding: 0;
list-style-type: none;
}
/* --- メニュー項目 --- */
div.section1 ul.menu li {
width: 50%; /* 項目の幅 */
padding-bottom: 5px; /* 項目の下パディング */
background: url(square.gif) no-repeat 1px 0.4em; /* 項目の背景 */
float: left;
}
/* --- リンク --- */
div.section1 ul.menu li a {
margin-left: 12px; /* リンクエリアの左マージン */
text-decoration: none; /* テキストの下線(なし) */
}
/* --- ポイント時の設定 --- */
div.section1 ul.menu li a:hover {
text-decoration: underline; /* テキストの下線(あり) */
}


/* --- 2番目のメニュー --- */
/* --- ボックス --- */
div.section2 {
width: 398px; /* ボックスの幅 */
margin: 20px 0; /* ボックスのマージン(上下、左右) */
background-color: #ffffff; /* ボックスの背景色 */
border: 1px #c0c0c0 solid; /* ボックスの境界線 */
font-size: 80%; /* ボックスの文字サイズ */
}
/* --- メニューエリア --- */
div.section2 ul.menu {
width: 380px; /* メニューの幅 */
margin: 15px auto 10px; /* メニューのマージン(上、左右、下) */
padding: 0;
list-style-type: none;
}
/* --- メニュー項目 --- */
div.section2 ul.menu li {
width: 50%; /* 項目の幅 */
padding-bottom: 5px; /* 項目の下パディング */
background: url(folder.gif) no-repeat 1px 0; /* 項目の背景 */
float: left;
}
/* --- リンク --- */
div.section2 ul.menu li a {
margin-left: 22px; /* リンクエリアの左マージン */
text-decoration: none; /* テキストの下線(なし) */
}
/* --- ポイント時の設定 --- */
div.section2 ul.menu li a:hover {
text-decoration: underline; /* テキストの下線(あり) */
}


/* --- clearfix --- */
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearFix {
min-height: 1px;
}

HTMLコード


<div class="section1">

<ul class="menu clearFix">
<li><a href="#">メニュー項目1</a></li>
<li><a href="#">メニュー項目2</a></li>
<li><a href="#">メニュー項目3</a></li>
<li><a href="#">メニュー項目4</a></li>
<li><a href="#">メニュー項目5</a></li>
<li><a href="#">メニュー項目6</a></li>
<li><a href="#">メニュー項目7</a></li>
<li><a href="#">メニュー項目8</a></li>
</ul>

</div>


<div class="section2">

<ul class="menu clearFix">
<li><a href="#">メニュー項目1</a></li>
<li><a href="#">メニュー項目2</a></li>
<li><a href="#">メニュー項目3</a></li>
<li><a href="#">メニュー項目4</a></li>
<li><a href="#">メニュー項目5</a></li>
<li><a href="#">メニュー項目6</a></li>
<li><a href="#">メニュー項目7</a></li>
<li><a href="#">メニュー項目8</a></li>
</ul>

</div>

備考

  • floatの解除には「clearfix」という手法を使用しています。
  • ブラウザのフォントサイズによっては、マーカーとテキストのラインが多少ずれてしまう場合があります。

更新履歴

2010/01/26
マーカー画像の大きさを変更しました。また、これに伴ない、背景画像の表示位置の設定も変更しています。

メニュー

ページの先頭へ