【menu-x.html】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="menu-x.css"> <script type="text/javascript" src="menu-x.js"></script> <title>メニュー行</title> </head> <body onload="replaceEle()" bgcolor="#222233"> <script type="text/javascript" language="JavaScript1.3"> <!-- document.write( ina ); //--> </script> </body> </html> 【menu-x.js】 ina =" "; ina+="<table border=0 align=center cellpadding=0 cellspacing=0><tr><td>"; ina+=" <dl id='menu'>"; ina+=" <dt>"; ina+=" <a href='./../../index.html'>くらげのトップ</a>"; ina+=" <ul class='view'>"; ina+=" <li><a href='http://www2n.biglobe.ne.jp/~kurage/map-w.html'>サイトマップ</a></li>"; ina+=" <li><a href='./../../hp_g.html'>ホームページ作り</a></li>"; ina+=" </ul>"; ina+=" </dt>"; ina+=" <dt>"; ina+=" <a href='./../../kiso/kiso0.html'>HP作り基礎編</a>"; ina+=" <ul>"; ina+=" <li><a href='./../../kiso/kiso0.html'>HPのしくみ</a></li>"; ina+=" <li><a href='./../../kiso/flow.html'>HP作成フロー</a></li>"; ina+=" <li><a href='./../../kiso/kiso2.html'>HPを作ってみる</a></li>"; ina+=" <li><a href='./../../kiso/trans.html'>HPを公開する</a></li>"; ina+=" <li>"; ina+=" <a href='./../../kiso/kiso4.html'>実用サンプル >></a>"; ina+=" <ul>"; ina+=" <li><a href='./../../kiso/kiso2.html#jitu'>実用サンプル解説</a></li>"; ina+=" </ul>"; ina+=" </li>"; ina+=" <li><a href='./../../kiso/btag.html'>最少基本タグ</a></li>"; ina+=" </ul>"; ina+=" </dt>"; ina+=" <dt>"; ina+=" <a href='./../../syoho/syoho1.html'>HP作りの初歩</a>"; ina+=" <ul>"; ina+=" <li><a href='./../../syoho/syoho3.html'>画像を貼付ける</a></li>"; ina+=" <li><a href='./../../syoho/syoho5.html'>LINKを貼る</a></li>"; ina+=" <li><a href='./../../syoho/syoho4.html'><table>タグを使う</a></li>"; ina+=" <li><a href='./../../kiso/btag.html'>基本的なタグ</a></li>"; ina+=" <li>"; ina+=" <a href='./../../syoho/page/index.html'>最少タグでHP >></a>"; ina+=" <ul>"; ina+=" <li><a href='./../../syoho/kihon1.html'> 解 説 1</a></li>"; ina+=" <li><a href='./../../syoho/kihon2.html'> 解 説 2</a></li>"; ina+=" <li><a href='./../../syoho/kihon3.html'> 解 説 3</a></li>"; ina+=" </ul>"; ina+=" </li>"; ina+=" <li><a href='./../../syoho/syoho6.html'>ソースTXTを表示</a></li>"; ina+=" </ul>"; ina+=" </dt>"; ina+=" <dt>"; ina+=" <a href='./../../tegaru/us_sft.html'>手軽に作る</a>"; ina+=" <ul>"; ina+=" <li><a href='./../../tegaru/compos.html'>Composerを使う</a></li>"; ina+=" <li>"; ina+=" <a href='./../../tegaru/us_wd.html'>ワードで作る >></a>"; ina+=" <ul>"; ina+=" <li><a href='./../../tegaru/us_wd1.html'>サンプル1</a></li>"; ina+=" <li><a href='./../../tegaru/dotN.html'>フォルダ名対策</a></li>"; ina+=" </ul>"; ina+=" </li>"; ina+=" <li><a href='./../../tegaru/dotN.html'>フォルダ名対策</a></li>"; ina+=" </ul>"; ina+=" </dt>"; ina+=" <dt>"; ina+=" <a href='./../../susumu/xml.html'>HTMLを超える</a>"; ina+=" <ul>"; ina+=" <li><a href='./../../style/style1.html'>CSSの基礎 >></a>"; ina+=" <ul>"; ina+=" <li><a href='./../../style/style2.html'>CSSの記述</a></li>"; ina+=" <li><a href='./../../style/style02.html'>CSS適用例 >></a>"; ina+=" <ul>"; ina+=" <li><a href='./../../style/style01.html'>CSS 適用前</a></li>"; ina+=" </ul></li>"; ina+=" </ul></li>"; ina+=" <li>"; ina+=" <a href='./../../susumu/xml.html#JavaS'>JavaScript >></a>"; ina+=" <ul>"; ina+=" <li><a href='./../../susumu/jst.html'>JavaScript</a></li>"; ina+=" </ul></li>"; ina+=" <li>"; ina+=" <a href='./../../susumu/xml.html#CGI'>CGIを使う >></a>"; ina+=" <ul>"; ina+=" <li><a href='./../../susumu/cgiset.html'>CGIを設置する</a></li>"; ina+=" <li><a href='./../../susumu/cgiRun.html'>CGIをテスト</a></li>"; ina+=" </ul></li>"; ina+=" <li>"; ina+=" <a href='./../../flash/flash.html'>flashアニメ >></a>"; ina+=" <ul>"; ina+=" <li><a href='./../../flash/para/para.html'>パラパラアニメ</a></li>"; ina+=" <li><a href='./../../flash/evnt/evnt.html'>イベントアニメ</a></li>"; ina+=" <li><a href='./../../flash/scrpt/scrpt.html'>スクリプトアニメ</a></li>"; ina+=" <li><a href='./../../flash/X_act/X_act.html'>複合動作アニメ</a></li>"; ina+=" </ul></li>"; ina+=" <li>"; ina+=" <a href='./../../tech/tech.html'>作成テクニック >></a>"; ina+=" <ul>"; ina+=" <li><a href='./../../tech/edit.html'>エディタを変更</a></li>"; ina+=" <li><a href='./../../tech/menu.html'>メニュー作成</a></li>"; ina+=" </ul></li>"; ina+=" <li><a href='./../../keitai.html'>携帯電話用HP</a></li>"; ina+=" </ul>"; ina+=" </dt>"; ina+=" <dt>"; ina+=" <a href='./../../HP_lnk.html'>参考サイト他</a>"; ina+=" </dt>"; ina+=" </dl>"; ina+="</td></tr></table>"; function replaceEle(){ if(document.getElementById){ var obj = document.getElementById("menu"); obj.innerHTML = obj.innerHTML.replace(/<dt>/gi, '<dt onmouseover="popupMenu(this);" onmouseout="hiddenMenu(this);">'); obj.innerHTML = obj.innerHTML.replace(/<li>/gi, '<li onmouseover="popupMenu(this);" onmouseout="hiddenMenu(this);">'); } } function popupMenu( obj ){ var menu = obj.getElementsByTagName("ul").item(0); if(menu){ menu.style.display = "block"; } if(obj.tagName.match(/li/i)){ obj.style.backgroundColor = "#581"; } } function hiddenMenu( obj ){ var menu = obj.getElementsByTagName("ul").item(0); if(menu){ menu.style.display = "none"; } if(obj.tagName.match(/li/i)){ obj.style.backgroundColor = "#7a3"; } } 【menu-x.css】 #menu { font-size:9pt; } #menu a { text-decoration: none; line-height:200%; } #menu ul,li,dl,dt,dd{ margin: 0; padding: 0; line-height:180%;} #menu ul{ list-style: none; } #menu{ display:inline; float:left; } #menu dt{ background-color:#7a3 ; border-right: solid 1px #070; float:left; text-align:center; position:relative; width:90px; height:23px; } #menu dt:hover { background-color:#581; } #menu dt a{ color:#fff; padding-top: 3px;} #menu dt ul{ display:none; position:absolute; top:23px; left: 0; z-index: 0; } #menu dt ul li{ background:#7a3; position:relative; width:90px; height:21px;} #menu dt ul li ul{ display:none; position:absolute; top:0px; left:90px; z-index: 0; }