ホームページ作成講座 STEP12　アコーディオンメニュー（たまちゃんHTMLのおうち）

アコーディオンメニューを作成します

■STEP12　　アコーディオンメニュー

アコーディオンメニュー（縦展開型メニュー）の作り方です。
リストの基本構造を保ちながら、アコーディオンメニューの完成させます。
他のサイトでは、ボックス単位の仕組みでやっていますが、ここではリストにこだわって作ってみます。

★CSSで作るアコーディオンメニューの基本

前回の ★縦並び展開型ドロップダウン２階層メニューまでは、この内容です。マウスが乗ったときに展開していました。CSSのみで実現しています。
これをクリックしたときに展開するように修正しましょう。修正前はこうです。

ソースコード（HTML)

ソースコード（CSS)

ul.pulldown_menu_5 {
list-style: none; /* 先頭記号を消す */
}
ul.pulldown_menu_5 li {
width: 100px; /* リスト項目の幅 */
}
ul.pulldown_menu_5 ul {
display: none; /* 通常は表示しない */
list-style: none; /* 2段目の先頭記号を消す */
padding-left: 0px; /* 2段目の左位置を1段目に揃える */
}
ul.pulldown_menu_5 li:hover > ul {
display: block; /* マウスが乗ったら表示する */
}
ul.pulldown_menu_5 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_5 ul a {
background: url(image/gradation_green2.jpg); /* ２段目以降の背景画像 */
}
ul.pulldown_menu_5 a:hover {/* マウスカーソルが乗っている状態 */
background: url(image/gradation_green_R.bmp); /* 通常の背景画像 */
color: blue; /* 文字色 */
}
ul.pulldown_menu_5 a:active {/* マウスがクリックされている状態 */
background: url(image/gradation_green_R.bmp); /* 通常の背景画像 */
color: red; /* 文字色 */
}

表示

STEP 1
STEP 2
- STEP 2-1
- STEP 2-2
STEP 3
- STEP 3-1
- STEP 3-2
- STEP 3-3
- STEP 3-4
STEP 4

このページのトップ

★CSSで作るアコーディオンメニュー（クリックで展開）

CSS-EBLOGさんの「CSSのみでアコーディオンメニューを実現するサンプル」を参照させてもらって、CSSのみでのクリックで展開するアコーディオンメニューに変更、作成しました。
...うぅ、素晴らしい！！CSSのみでも完璧！！...って思ったのですが...
条件によっては、ちょっと嫌な動作になります。
表示画面に対してHTMLの量が少ないときには問題がないのですが（正確にはメニュー以下の量）、そうでない時はメニューの位置が動いてしまいます。
これは、リンク先の位置が画面の一番上に表示されるような仕組みなのでしょう。これを防ぐ方法を考えたり調べたりしたのですが、結局わかりませんでした。どなたかわかる方がいらっしゃいましたら教えてください。

ソースコード（HTML)

ソースコード（CSS)

ul.pulldown_menu_6 {
list-style: none; /* 先頭記号を消す */
}
ul.pulldown_menu_6 li {
width: 100px; /* リスト項目の幅 */
}
ul.pulldown_menu_6 ul {
display: none; /* 通常は表示しない */
list-style: none; /* 2段目の先頭記号を消す */
padding-left: 0px; /* 2段目の左位置を1段目に揃える */
}
ul.pulldown_menu_6 li ul {
display: none; /* 通常は表示しない */
}
ul.pulldown_menu_6 li:target > ul {
display: block; /* クリックしたら表示する */
position: relative; /* 相対位置で指定 */
top: -26px;
margin-bottom: -26px;
}
ul.pulldown_menu_6 li ul li:first-child > a {/* ダミーの1段目 */
background: url(image/gradation_red.jpg); /* 通常の背景画像 */
}
ul.pulldown_menu_6 a {
color: white; /* 文字色 */
display: block; /* ブロックレベルに */
text-align: center; /* 文字を中央合わせに */
padding: 5px; /* 内部の余白 */
border: 1px #9999FF solid; /* 枠線 */
text-decoration: none; /* 下線を消す */
outline: none; /* 選択時の点線枠線を消す */
background: url(image/gradation_red.bmp); /* 通常の背景画像 */
height: 16px; /* 高さの調整 */
}
ul.pulldown_menu_6 ul a {
background: url(image/gradation_red2.jpg); /* ２段目以降の背景画像 */
}
ul.pulldown_menu_6 a:hover,
ul.pulldown_menu_6 li ul li:first-child > a:hover {/* マウスカーソルが乗っている状態 */
background: url(image/gradation_red_R.bmp); /* 通常の背景画像 */
color: blue; /* 文字色 */
}
ul.pulldown_menu_6 a:active {/* マウスがクリックされている状態 */
background: url(image/gradation_red_R.bmp); /* 通常の背景画像 */
color: red; /* 文字色 */
}

表示

STEP 1
- STEP1
- STEP 1-1
- STEP 1-2
- STEP 1-3
STEP 2
- STEP2
- STEP 2-1
- STEP 2-2
STEP 3
- STEP3
- STEP 3-1
- STEP 3-2
- STEP 3-3
- STEP 3-4
STEP 4
- STEP4
- STEP 4-1
- STEP 4-2
- STEP 4-3

このページのトップ

★Java scriptで作るアコーディオンメニュー

Java scriptで作るアコーディオンメニューはいろいろ方法があるのですが、いままでの流れで作っていきます。リスト形式もそのままです。
（リスト形式でのアコーディオンメニューは、他で見かけません。そういう意味ではオリジナルかも）
アンカーでジャンプさせる仕組みを使うと画面が動いてしまったので、ジャンプさせずにスタイルを変える仕組みにしました。
onclick属性でクラスを切り替えることで、スタイルを変更します。
展開したときに、すでに展開されている他の部分をそのままにしておく場合のJava scriptは、たった１行で済みます。
fjiブログさんの [Web作成] メニューの展開と折りたたみを参照しました。

ソースコード（HTML)

ソースコード（CSS)

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