HOME 　>>> 　HTML整理ノート 　>>> DHTML --　 基本編　　応用編

属性を利用した階層メニュー

[お気に入り]メニューを展開／折り込みできます。

お気に入り

　

　

　ワンポイント

・親項目のタグ内に、その下位要素のID名を設定値とする属性を設定（このページではchild属性)。getAttribute("child")で、child属性に設定されているID名を取得できる。

・親項目をクリックすれば、その下位要素のID名を取得し、そのID要素のdisplayプロパティを操作する。

Sample Source......................................................................>>>

<style TYPE="text/css"><!--
　　h3#top_menu {width:120px;background-color:#8c8f8f;color:white;font:bold 12pt;margin-bottom:2px;
　　　　　padding:2px 10px;border-bottom:3px solid gray;border-right: 2px solid #d3d3d3;cursor:hand;}
　　h4.menu {width:120px;background-color:#c0c0c0;margin-left:30px;margin-top:2px;margin-bottom:2px;
　　　　　font:12pt;padding:2px 20px;border-bottom:3px solid gray;border-right: 2px solid #d3d3d3;
　　　　　cursor:hand;}
　　h5 {width:120px;background-color:#c0c0c0;margin-left:50px;margin-top:1px;margin-bottom:1px;
　　　　　color:blue;font:normal 12px 'ＭＳ 明朝';padding:2px 20px;border-bottom:3px solid gray;
　　　　　border-right: 2px solid #d3d3d3;;cursor:hand;}
　　p.con {margin-left:80px;line-height:150%;color: green;}
--></style>

<script Language="JavaScript"><!--
　　function Outline(){
　　　　var child = document.all[event.srcElement.getAttribute("child",false)];
　　　　if(null != child){
　　　　　　child.style.display = child.style.display == "none" ? "block" : "none";
　　　　}
　　}
// --></script>
</head>

<body onclick="Outline();">
<h3 id="top_menu" child="top">お気に入り</h3>
<div id="top" style="display:none">
　　<h4 class="menu" child="media">メディア</h4>
　　<div id="media" style="display:none">
　　　<h5 child="m1">新聞</h5>
　　　<div id="m1" style="display:none">
　　　　　<p class="con">
　　　　　　　<a href="http://www.asahi.com/">▼　朝日新聞</a><br>
　　　　　　　<a href="http://mainichi.jp/">▼　毎日新聞</a><br>
　　　　　　　<a href="http://www.nikkei.com/">▼　NIKKEI.NET</a>
　　　　　</p>
　　　</div>
　　　<h5 child="m2">テレビ</h5>
　　　<div id="m2" style="display:none">
　　　　　<p class="con">
　　　　　　　<a href="http://www.sun-tv.co.jp/">▼　サンTV</a><br>
　　　　　　　<a href="http://www.kbs-kyoto.co.jp/">▼　KBS京都</a><br>
　　　　　　　<a href="http://www.tv-osaka.co.jp/">▼　テレビ大阪</a></p>
　　　</div>
　　　<h5 child="m3">動画</h5>
　　　<div id="m3" style="display:none">
　　　　　<p class="con">
　　　　　　　　<a href="http://www.nicovideo.jp/">▼ ニヤニヤ動画</a><br>
　　　　　　　　<a href="http://gyao.yahoo.co.jp/">▼ GyaO![ギャオ]</a><br>
　　　　　　　　<a href="http://a2tiosky.web.fc2.com/">▼ 無料の動画共有サイト一覧</a></p>
　　　</div>
　　</div>

end(最終更新:12/11/18)