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

ホームページ作成講座   STEP12 アコーディオンメニュー


メニュー

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

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

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

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

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

ソースコード(HTML)

<ul class= "pulldown_menu_5">
<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>


ソースコード(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); /* 2段目以降の背景画像 */
}
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; /* 文字色 */
}


表示

このページのトップ

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

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

ソースコード(HTML)

<ul class= "pulldown_menu_6" id="M_6">
<li id="STEP1"><a href= "#STEP1"> STEP 1</a>
<ul>
<li><a href= "#M_6"> STEP 1</a></li>
<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 id="STEP2"><a href= "#STEP2"> STEP 2</a>
<ul>
<li><a href= "#M_6"> STEP 2</a></li>
<li><a href= "stepuphtml2.html"> STEP 2-1</a></li>
<li><a href= "stepuphtml2.html"> STEP 2-2</a></li>
</ul>
</li>
<li id="STEP3"><a href= "#STEP3"> STEP 3</a>
<ul>
<li><a href= "#M_6"> STEP 3</a></li>
<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 id="STEP4"><a href= "#STEP4"> STEP 4</a>
<ul>
<li><a href= "#M_6"> STEP 4</a></li>
<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>


ソースコード(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); /* 2段目以降の背景画像 */
}
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; /* 文字色 */
}


表示

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

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

ソースコード(HTML)

<script type="text/javascript"><!--
// 展開した際に他の展開部分を自動で閉じる
function doToggleClassName(obj, onClassName, offClassName){
obj.className = (obj.className != onClassName) ? onClassName : offClassName;
var elements = document.getElementsByTagName(obj.tagName);
for (var i = 0; i < elements.length; i++) {
if ((elements[i] != obj) && (elements[i].className == onClassName))
elements[i].className = offClassName;
}
}

// 自動的に閉じない場合は、こちら ...のみでOK(関数名を変えています)
function doToggleClassName2(obj, onClassName, offClassName){obj.className = (obj.className != onClassName) ? onClassName : offClassName;}
--></script>

<ul class= "pulldown_menu_7">
<li onclick= "doToggleClassName(this,'menu_on','menu_off')"> <a> 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 onclick= "doToggleClassName(this,'menu_on','menu_off')"> <a> 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 onclick= "doToggleClassName(this,'menu_on','menu_off')"> <a> 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 onclick= "doToggleClassName(this,'menu_on','menu_off')"> <a> 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>


ソースコード(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); /* 2段目以降の背景画像 */
}
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; /* 文字色 */
}


表示

このページのトップ

★シンプルなコードのアコーディオンメニュー1

展開を自動的に閉じない場合は、Java scriptが1行なのでタグ内に埋め込んでしまうことによりもっとシンプルになります。
CSSのソースコードはそのままです。

ソースコード(HTML)

<ul class= "pulldown_menu_7">
<li onclick= "this.className = (this.className != 'menu_on') ? 'menu_on' : 'menu_off';">
<a> 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 onclick= "this.className = (this.className != 'menu_on') ? 'menu_on' : 'menu_off';">
<a> 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 onclick= "this.className = (this.className != 'menu_on') ? 'menu_on' : 'menu_off';">
<a> 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 onclick= "this.className = (this.className != 'menu_on') ? 'menu_on' : 'menu_off';">
<a> 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

こちらは、IDを使った方法で直下のリストの表示/非表示を見て、表示/非表示の切り替えを行います。
CSSのソースファイルは同じです。
カスタマイズするならFC2ブログがおすすめを参照しました。

ソースコード(HTML)

<ul class= "pulldown_menu_7">
<li onclick= "obj=document.getElementById('id1').style; obj.display=(obj.display=='none')?'block':'none';">
<a> STEP 1</a>
<ul id= "id1" style= "display:none;">
<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 onclick= "obj=document.getElementById('id2').style; obj.display=(obj.display=='none')?'block':'none';">
<a> STEP 2</a>
<ul id= "id2" style= "display:none;">
<li><a href= "stepuphtml2.html"> STEP 2-1</a></li>
<li><a href= "stepuphtml2.html"> STEP 2-2</a></li>
</ul>
</li>
<li onclick= "obj=document.getElementById('id3').style; obj.display=(obj.display=='none')?'block':'none';">
<a> STEP 3</a>
<ul id= "id3" style= "display:none;">
<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 onclick= "obj=document.getElementById('id4').style; obj.display=(obj.display=='none')?'block':'none';">
<a> STEP 4</a>
<ul id= "id4" style= "display:none;">
<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>


表示
次のSTEPは、レスポンシブデザインの作り方です。

▼STEP13へ

このページのトップ