Webテンプレート/リスト・メニュー/フッタメニュー2

フッタ付近での使用を想定した横型のメニューです。

display: inline を指定して、li要素を横に並べています。
1番目のメニューは、li要素の左枠線のみを表示して、それを区切り線として使用しています。
2番目のメニューは、li要素に背景画像（縦線）を設定して、それを区切り線として使用しています。
3番目のメニューは、li要素に背景画像（横線）を設定して、それを区切り線として使用しています。
リンクテキストの間隔は、項目の左右のパディングで調整してください。

使用している画像

foot_menu2_line.gif

foot_menu2_line2.gif

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

コード

以下は、メニュー3つ分のコードとなります。必要な部分のみをコピーして使用してください。

CSSコード

/* --- 1番目のメニュー --- */
/* --- ナビゲーション --- */
.footerNav1 {
font-size: 80%;
}
/* --- メニューエリア --- */
.footerNav1 .nl {
margin: 20px 0; /* メニューのマージン（上下、左右） */
padding: 0;
list-style-type: none;
text-align: center; /* メニューのセンタリング */
}
/* --- メニュー項目 --- */
.footerNav1 .nl li {
padding: 0 3px 0 7px; /* 項目のパディング（上右下左） */
border-left: 1px #000000 solid; /* 項目の左枠線 */
display: inline;
}
.footerNav1 .nl li.first {
border-left: none;
}

/* --- 2番目のメニュー --- */
/* --- ナビゲーション --- */
.footerNav2 {
font-size: 80%;
}
/* --- メニューエリア --- */
.footerNav2 .nl {
margin: 20px 0; /* メニューのマージン（上下、左右） */
padding: 0;
list-style-type: none;
text-align: center; /* メニューのセンタリング */
}
/* --- メニュー項目 --- */
.footerNav2 .nl li {
padding: 0 4px 0 8px; /* 項目のパディング（上右下左） */
background: url(foot_menu2_line.gif) no-repeat left; /* 項目の背景 */
display: inline;
}
.footerNav2 .nl li.first {
background-image: none;
}

/* --- 3番目のメニュー --- */
/* --- ナビゲーション --- */
.footerNav3 {
font-size: 80%;
}
/* --- メニューエリア --- */
.footerNav3 .nl {
margin: 20px 0; /* メニューのマージン（上下、左右） */
padding: 0;
list-style-type: none;
text-align: center; /* メニューのセンタリング */
}
/* --- メニュー項目 --- */
.footerNav3 .nl li {
padding: 0 3px 0 12px; /* 項目のパディング（上右下左） */
background: url(foot_menu2_line2.gif) no-repeat left; /* 項目の背景 */
display: inline;
}
.footerNav3 .nl li.first {
background-image: none;
}

HTMLコード

<div class="footerNav1">

<ul class="nl">
<li class="first"><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>


<div class="footerNav2">

<ul class="nl">
<li class="first"><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>


<div class="footerNav3">

<ul class="nl">
<li class="first"><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>

備考

最初のli要素にクラス（first）を指定して、左側の区切り線を非表示にしています。
区切り線を項目間の中心に表示させるためには、項目の左右パディングを微調整する必要があります。項目の間隔を変更する際にはご注意ください。