たまちゃんHTMLのおうち たまちゃんHTMLのおうち

ホームページ作成講座   STEP11 ドロップダウンメニュー


メニュー

ドロップダウンメニューを作成します

■STEP11  ドロップダウンメニュー

ドロップダウンメニュー(プルダウンメニュー)の作り方です。

★ドロップダウンメニューの基本

ドロップダウンメニューも、リスト(箇条書き)を基本とします。
<ul>〜</ul>タグと<li>〜</li>タグを使います。 ★リストの基本を参照してください。

ソースコード(HTML)

<ul>
<li><a href= "stepuphtml1.html"> STEP 1</a>
<ul>
<li><a href= "stepuphtml1.html"> STEP 1-1</a></li>
<li><a href= "stepuphtml1.html"> STEP 1-2</a></li>
<li><a href= "stepuphtml1.html"> STEP 1-3</a></li>
</ul>
</li>
<li><a href= "stepuphtml2.html"> STEP 2</a>
<ul>
<li><a href= "stepuphtml2.html"> STEP 2-1</a></li>
<li><a href= "stepuphtml2.html"> STEP 2-2</a></li>
</ul>
</li>
<li><a href= "stepuphtml3.html"> STEP 3</a>
<ul>
<li><a href= "stepuphtml3.html"> STEP 3-1</a></li>
<li><a href= "stepuphtml3.html"> STEP 3-2</a></li>
<li><a href= "stepuphtml3.html"> STEP 3-3</a></li>
<li><a href= "stepuphtml3.html"> STEP 3-4</a></li>
</ul>
</li>
<li><a href= "stepuphtml4.html"> STEP 4</a>
<ul>
<li><a href= "stepuphtml4.html"> STEP 4-1</a></li>
<li><a href= "stepuphtml4.html"> STEP 4-2</a></li>
<li><a href= "stepuphtml4.html"> STEP 4-3</a></li>
</ul>
</li>
</ul>


表示

このページのトップ

★ドロップダウン機能のない2階層メニュー

「STEP10 メニュー」で説明した、

これらの修正を含め、2階層メニューにとりあえず全く同じCSSコードを使うと、

表示
こうなってしまいました。

このページのトップ

これに対して、
  • 2段目の先頭記号を消す
  • 2段目の左位置を1段目に揃える
  • 2段目以降はタブに丸みをつけない
  • 2段目以降の画像を変える
  • 高さの調整
のスタイルを加えると、こうなります。

ソースコード(HTML)

<ul class= "pulldown_menu_1">

以下同じ、 ★ドロップダウンメニューの基本を参照してください。

ソースコード(CSS)

ul.pulldown_menu_1 {
list-style: none; /* 先頭記号を消す */
}
ul.pulldown_menu_1 li {
float: left; /* リスト項目を横方向に並べる */
width: 100px; /* リスト項目の幅 */
}
ul.pulldown_menu_1 ul {
list-style: none; /* 2段目の先頭記号を消す */
padding-left: 0px; /* 2段目の左位置を1段目に揃える */
}
ul.pulldown_menu_1 a {
color: white; /* 文字色 */
display: block; /* ブロックレベルに */
text-align: center; /* 文字を中央合わせに */
padding: 5px; /* 内部の余白 */
border: 1px #9999FF solid; /* 枠線 */
text-decoration: none; /* 下線を消す */
outline: none; /* 選択時の点線枠線を消す */
border-radius: 8px 8px 0px 0px; /* タブに丸みをつける */
background: url(image/gradation_green.bmp); /* 通常の背景画像 */
height: 16px; /* 高さの調整 */
}
ul.pulldown_menu_1 ul a {
border-radius: 0px; /* 2段目以降はタブに丸みをつけない */
background: url(image/gradation_green2.jpg); /* 2段目以降の背景画像 */
}
ul.pulldown_menu_1 a:hover {/* マウスカーソルが乗っている状態 */
background: url(image/gradation_green_R.bmp); /* 通常とは違う背景画像 */
color: blue; /* 文字色 */
}
ul.pulldown_menu_1 a:active {/* マウスがクリックされている状態 */
background: url(image/gradation_green_R.bmp); /* 通常とは違う背景画像 */
color: red; /* 文字色 */
}


表示

このページのトップ

★ドロップダウン2階層メニュー

これに対して、
  • 通常時、2段目を表示しない
  • マウスが乗った時、2段目を表示する
のスタイルを加えると、ドロップダウンリストになります。

ソースコード(HTML)

<ul class= "pulldown_menu_1 pulldown_menu_2">

以下同じ、 ★ドロップダウンメニューの基本を参照してください。

ソースコード(CSS)

ul.pulldown_menu_2 ul {
display: none; /* 通常は表示しない */
}
ul.pulldown_menu_2 li:hover > ul {
display: block; /* マウスが乗ったら表示する */
}


ここで、li:hover > ul の”>”は、子を指します。子孫ではなく直下の子だけということです。
リストが2段までならなくても同じです。

表示

細かな調整とかは必要になりますが、ドロップダウンメニュー(プルダウンメニュー)の基本はこんなところです。

このページのトップ

★縦並びドロップダウン2階層メニュー

縦並びに変えるには、基本的に
  • floatによる回り込みをやめる
  • 2段目のリスト項目の位置の調整
をするだけです。あとタブの丸みは必要ないのでborder-radiusもやめます。

ソースコード(HTML)

<ul class= "pulldown_menu_3 pulldown_menu_2">

以下同じ、 ★ドロップダウンメニューの基本を参照してください。

ソースコード(CSS)

ul.pulldown_menu_3 {
list-style: none; /* 先頭記号を消す */
}
ul.pulldown_menu_3 li {
position: relative; /* 2段目の位置を指定するため */
width: 100px; /* リスト項目の幅 */
}
ul.pulldown_menu_3 ul {
position: absolute; /* 2段目の位置を絶対位置で指定 */
left: 100px; /* 1段目の幅の分を右へ */
top: 0px; /* 1段目の上下方向は同じ位置 */
list-style: none; /* 2段目の先頭記号を消す */
padding-left: 0px; /* 2段目の左位置を1段目に揃える */
}
ul.pulldown_menu_3 a {
color: white; /* 文字色 */
display: block; /* ブロックレベルに */
text-align: center; /* 文字を中央合わせに */
padding: 5px; /* 内部の余白 */
border: 1px #9999FF solid; /* 枠線 */
text-decoration: none; /* 下線を消す */
outline: none; /* 選択時の点線枠線を消す */
background: url(image/gradation_green.bmp); /* 通常の背景画像 */
height: 16px; /* 高さの調整 */
}
ul.pulldown_menu_3 ul a {
background: url(image/gradation_green2.jpg); /* 2段目以降の背景画像 */
}
ul.pulldown_menu_3 a:hover {/* マウスカーソルが乗っている状態 */
background: url(image/gradation_green_R.bmp); /* 通常とは違う背景画像 */
color: blue; /* 文字色 */
}
ul.pulldown_menu_3 a:active {/* マウスがクリックされている状態 */
background: url(image/gradation_green_R.bmp); /* 通常とは違う背景画像 */
color: red; /* 文字色 */
}


表示

このページのトップ

★縦並び展開型ドロップダウン2階層メニュー

2段目のリスト項目を右側にしないで、1段目の項目の下に展開するようにするには、 上記、★ドロップダウン2階層メニューの に対して、
  • 2段目のリスト項目の左位置を1段目と同じにする
だけです。(1段目の右に2段目のリスト項目を置くために追加したスタイルを削除する) これで、いわゆる「アコーディオン型」の展開型ドロップダウンメニューになるわけですが、 このタイプでは、マウスを置くだけで展開してしまうのは少し使いづらい感じですね。
クリックしたときに展開するようにしたいのですが、CSSだけでは無理のようです。
次のSTEPで、JavaScriptを使った「アコーディオン型」の展開型ドロップダウンメニューの作り方を説明します。
作成しました。
>>>■STEP12 アコーディオンメニュー

ソースコード(HTML)

<ul class= "pulldown_menu_4 pulldown_menu_2">

以下同じ、 ★ドロップダウンメニューの基本を参照してください。

ソースコード(CSS)

ul.pulldown_menu_4 {
list-style: none; /* 先頭記号を消す */
}
ul.pulldown_menu_4 li {
width: 100px; /* リスト項目の幅 */
}
ul.pulldown_menu_4 ul {
list-style: none; /* 2段目の先頭記号を消す */
padding-left: 0px; /* 2段目の左位置を1段目に揃える */
}
ul.pulldown_menu_4 a {
color: white; /* 文字色 */
display: block; /* ブロックレベルに */
text-align: center; /* 文字を中央合わせに */
padding: 5px; /* 内部の余白 */
border: 1px #9999FF solid; /* 枠線 */
text-decoration: none; /* 下線を消す */
outline: none; /* 選択時の点線枠線を消す */
background: url(image/gradation_green.bmp); /* 通常の背景画像 */
height: 16px; /* 高さの調整 */
}
ul.pulldown_menu_4 ul a {
background: url(image/gradation_green2.jpg); /* 2段目以降の背景画像 */
}
ul.pulldown_menu_4 a:hover {/* マウスカーソルが乗っている状態 */
background: url(image/gradation_green_R.bmp); /* 通常とは違う背景画像 */
color: blue; /* 文字色 */
}
ul.pulldown_menu_4 a:active {/* マウスがクリックされている状態 */
background: url(image/gradation_green_R.bmp); /* 通常とは違う背景画像 */
color: red; /* 文字色 */
}


表示
次のSTEPで、JavaScriptを(少し)使った「アコーディオン型」の展開型ドロップダウンメニューの作り方です。

▼STEP12へ

このページのトップ