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

シンプルメニュー2



横並びのメニューを作成するサンプルコードです。

区切り線を入れたタイプとなります。


表示例

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

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

使用している画像

menu_line.gif menu_line.gifmenu_line.gif 拡大)

menu_line2.gif menu_line2.gifmenu_line2.gif 拡大)

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

画像の制作について

コード

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

CSSコード


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

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

/* --- 3番目のメニュー --- */
/* --- ナビゲーション --- */
div.footerNav3 {
font-size: 80%;
}
/* --- メニューエリア --- */
div.footerNav3 ul.nl {
margin: 20px 0; /* メニューのマージン(上下、左右) */
padding: 0;
list-style-type: none;
text-align: center; /* メニューのセンタリング */
}
/* --- メニュー項目 --- */
div.footerNav3 ul.nl li {
padding: 0 3px 0 12px; /* 項目のパディング(上右下左) */
background: url(menu_line2.gif) no-repeat left; /* 項目の背景 */
display: inline;
}
div.footerNav3 ul.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)を指定して、左側の区切り線を非表示にしています。
  • 区切り線を項目間の中心に表示させるためには、項目の左右パディングを微調整する必要があります。項目の間隔を変更する際にはご注意ください。

メニュー

ページの先頭へ