【menu-y.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-y.css">
<script type="text/javascript" src="menu-y.js"></script>
<title>メニュー行</title>
</head>
<body onload="replaceEle()" bgcolor="#222233">
<script type="text/javascript" language="JavaScript1.3">
<!--
document.write( ina );
//-->
</script>
</body>
</html>
【menu-y.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'>ＨＰ作り基礎編</a>";
ina+=" <ul>";
ina+=" <li><a href='./../../kiso/kiso0.html'>ＨＰのしくみ</a></li>";
ina+=" <li><a href='./../../kiso/flow.html'>HP作成フロー</a></li>";
ina+=" <li><a href='./../../kiso/kiso2.html'>ＨＰを作ってみる</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'>ＨＰ作りの初歩</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'> 解 説 １</a></li>";
ina+=" <li><a href='./../../syoho/kihon2.html'> 解 説 ２</a></li>";
ina+=" <li><a href='./../../syoho/kihon3.html'> 解 説 ３</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'>サンプル１</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'>携帯電話用ＨＰ</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-y.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; }