次のようにコードをコピーします。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<頭>
<title>伸縮メニュー</title>
<スタイル>
<!--
体{
背景色:#ffdee0;
}
#ナビゲーション {
幅:200ピクセル;
フォントファミリー:Arial;
}
#ナビゲーション > ウル {
list-style-type:none;/* 箇条書きを表示しません*/
マージン:0px;
パディング:0px;
}
#ナビゲーション > ウル > リ {
border-bottom:1px Solid #ED9F9F;/* 下線を追加*/
}
#ナビゲーション > ul > li > a{
表示:ブロック;/* ブロック表示*/
パディング:5px 5px 5px 0.5em;
テキスト装飾:なし;
border-left:12px Solid #711515;/* 左側に太い赤い境界線*/
border-right:1px ソリッド #711515;/* 右影*/
}
#navigation > ul > li > a:link、#navigation > ul > li > a:visited{
背景色:#c11136;
色:#FFFFFF;
}
#navigation > ul > li > a:hover{ /* マウスが上を通過したとき */
background-color:#990020;/* 背景色を変更します*/
color:#ffff00;/* テキストの色を変更します*/
}
/* サブメニューの CSS スタイル*/
#ナビゲーションウルリウル{
リストスタイルタイプ:なし;
マージン:0px;
パディング:0px 0px 0px 0px;
}
#ナビゲーション ウルリウルリ{
ボーダートップ:1px ソリッド #ED9F9F;
}
#ナビゲーション ul li ul li a{
表示:ブロック;
パディング:3px 3px 3px 0.5em;
テキスト装飾:なし;
ボーダー左:28px ソリッド #a71f1f;
ボーダー右:1px ソリッド #711515;
}
#navigation ul li ul li a:link, #navigation ul li ul li a:visited{
背景色:#e85070;
色:#FFFFFF;
}
#navigation ul li ul li a:hover{
背景色:#c2425d;
色:#ffff00;
}
#navigation ul li ul.myHide{ /* サブメニューを非表示*/
ディスプレイ:なし;
}
#navigation ul li ul.myShow{ /* サブメニューを表示*/
表示:ブロック;
}
-->
</スタイル>
<スクリプト言語="javascript">
関数変更(){
//親要素 li から兄弟要素 ul を検索します
var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];
//CSSを交互に置き換えて表示と非表示を実現
if(oSecondDiv.className == "myHide")
oSecondDiv.className = "myShow";
それ以外
oSecondDiv.className = "myHide";
}
window.onload = function(){
var oUl = document.getElementById("listUL");
var aLi = oUl.childNodes;//子要素
変数 oA;
for(var i=0;i<aLi.length;i++){
//子要素が li で、この li にサブメニュー ul がある場合
if(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length){
oA = aLi[i].firstChild;//ハイパーリンクを見つける
oA.onclick = change;//クリック関数を動的に追加
}
}
}
</script>
</head>
<本文>
<div id="ナビゲーション">
<ul id="listUL">
<li><a href="#">ホーム</a></li>
<li><a href="#">ニュース</a>
<ul>
<li><a href="#">最新ニュース</a></li>
<li><a href="#">すべてのニュース</a></li>
</ul>
</li>
<li><a href="#">スポーツ</a>
<ul>
<li><a href="#">バスケットボール</a></li>
<li><a href="#">サッカー</a></li>
<li><a href="#">バレーボール</a></li>
</ul>
</li>
<li><a href="#">天気</a>
<ul>
<li><a href="#">今日の天気</a></li>
<li><a href="#">予測</a></li>
</ul>
</li>
<li><a href="#">連絡してください</a></li>
</ul>
</div>
</body>
</html>