掲示板/総合質問板/過去ログ/一覧/ ツリーメニュー？のつくりかた。

0 名前： 123 ： 2007/02/03（土） 20:13 ID:I8R8G.1E sub-oz: ディスプレイ画面の「スタートメニュー」のように、オンマウスで違うメニューがぞろぞろと現れるようにしたいんです。
下にか、横にかは未定なんですけれど。

過去のスレッドで検索単語のヒントなどがあったので試したのですが、質問が消えてたり、サイトが開けなかったりで…。

「まだそこまでも辿り着いてないっ！＞＜。」という質問は、見れるんですけれど、どこにいれればいいのかはわからなくて。

すみませんが、教えていただけませんか。

1 名前： カヅサツ ◆ThCi95HEzw ： 2007/02/03（土） 20:13 ［URL］ ID:O5hEMlpW sub-r2: 「ツールメニュー」でググる(サイト内検索ではなく)と、ウンザリするほど出てきます。

2 名前： 123 ： 2007/02/03（土） 20:13 ID:I8R8G.1E sub-oz: <div><a href="～" onmouseover="show('menu1');" onmouseout="hide('menu1');">プロフィール</a><span id="menu1" style="visibility: hidden;">へGO！</span></div>
<div><a href="～" onmouseover="show('menu2');" onmouseout="hide('menu2');">イラスト</a> <span id="menu2" style="visibility: hidden;">へGO！</span></div>
<div><a href="～" onmouseover="show('menu3');" onmouseout="hide('menu3');">日記</a> <span id="menu3" style="visibility: hidden;">へGO！</span></div>
<div><a href="～" onmouseover="show('menu4');" onmouseout="hide('menu4');">リンク</a> <span id="menu4" style="visibility: hidden;">へGO！</span></div>

というのを、某サイトからコピペさせて頂き、無事に動きました。

ですが、
ここでの「へGO!｣の下、つまり、横に複数だすようにするには、どこを変えたらいいのか、教えて下さい。
よろしくお願いします。

3 名前： カヅサツ ◆ThCi95HEzw ： 2007/02/03（土） 20:13 ［URL］ ID:O5hEMlpW sub-r2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title>test</title>
</head>
<body>
<div><a href="～" onmouseover="show('menu1');" onmouseout="hide('menu1');">プロフィール</a><span id="menu1" style="visibility: hidden;">へGO！</span></div>
<div><a href="～" onmouseover="show('menu2');" onmouseout="hide('menu2');">イラスト</a> <span id="menu2" style="visibility: hidden;">へGO！</span></div>
<div><a href="～" onmouseover="show('menu3');" onmouseout="hide('menu3');">日記</a> <span id="menu3" style="visibility: hidden;">へGO！</span></div>
<div><a href="～" onmouseover="show('menu4');" onmouseout="hide('menu4');">リンク</a> <span id="menu4" style="visibility: hidden;">へGO！</span></div>
</body>
</html>

上記をそのままコピペしたところ、何も動かないみたいです。

> ここでの「へGO!｣の下、つまり、横に複数だすようにするには、

「へGO!｣の下に、『何を』複数出したいのでしょうか？

4 名前： 123 ： 2007/02/03（土） 20:13 ID:I8R8G.1E sub-oz: カヅサツさん、返信ありがとうございます。

プロフィールとかの文字はリンクしなくていいんですが、その文字にオンマウスで、メニューがでるようしたいです。
それで、そのメニューは
「へGO!」
「にGO!」
というように下に出て、「へGO!」をクリックすると、そこに貼ったリンクページへ飛べれば、とイメージしています。

前回のサイトの別ページからからコピペして今実際に作成しているのがこちらです。
<HEAD>
<TITLE>サンプル</TITLE>

<script language="JavaScript">function show(eid) {
document.getElementById(eid).style.visibility = 'visible';
}
function hide(eid) {
document.getElementById(eid).style.visibility = 'hidden';
}</script>

<style>div#menubar {
background-color: green;
width: 100%;
}
div#menubar img {
vertical-align: top;
border: 0px;
}
/* ▼共通の装飾 */
div.hiddenmenus ul {
list-style: none;
margin: 0px;
padding: 0px;
font-size: 90%;
width: 10em;
}
div.hiddenmenus li {
border-width: 0px 1px 1px 1px;
border-style: solid;
border-color: green;
padding: 0.1em 0.3em;
}

/* ▼個別の装飾（背景色） */
div#subMenu01 ul {
background-color: #ccffff; /* 水色 */
}
div#subMenu02 ul {
background-color: #ffcccc; /* 淡い赤色 */
}
div#subMenu01 {
position:absolute; top: 110px; left: 75px;
}
div#subMenu02 {
position:absolute; top: 110px; left: 150px;
}/* ▼個別の装飾 */
div#subMenu01 { visibility: hidden; }
div#subMenu02 { visibility: hidden; }
</style>
</HEAD>

<BODY>
<div id="menubar">
<A HREF="#" onmouseover="OpenMenu('subMenu01');
CloseMenu('subMenu02');">
<IMG SRC="mprod.gif" ALT="様式" WIDTH=75 HEIGHT=20 ALIGN=bottom>
</A>
<A HREF="#" onmouseover="closeMenu('subMenu01');
openMenu('subMenu02');">
<IMG SRC="mprod.gif" ALT="教育" WIDTH=75 HEIGHT=20 ALIGN=bottom>
</A>

<div class="hiddenmenus"> <div id="subMenu01"></P>
<UL>
<LI><A HREF="/1/1-1.xls">掲示</A></LI>

<LI><A HREF="/1/1-2.doc">点検表</A></LI>

<LI><A HREF="/1/1-3.doc">手順書</A></LI>
</UL>

<P></div>  <div id="subMenu02"></P>

<UL>
<LI><A HREF="/2/2-1.doc">記録簿</A></LI>

<LI><A HREF="/2/2-2.doc">入場者</A></LI>

<LI><A HREF="/2/2-3.doc">申告書</A></LI>

<LI><A HREF="/2/2-4.doc">誓約書</A></LI>
</UL>

<P></div></div>

</P>
</BODY>
</HTML>

名前等変わっていて、ややこしいんですが、作っている物を見て頂いたほうがよいかと、思いまして…。
こっちにしたら、ドロップダウンメニューが出なくなりました。
よろしくお願いします。

5 名前： カヅサツ ◆ThCi95HEzw ： 2007/02/03（土） 20:13 ［URL］ ID:O5hEMlpW sub-r2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title></title>
<style type="text/css">
#menubar{
	background-color: green;
	height: 40px;
}
#menubar ul{
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
#menubar ul li{
	background-color: #FCC;
	width: 75px;
	float: left;
}
#menubar ul li ul li{
	background-color: transparent;
	width: auto;
	float: none;
}
#menubar li img{
	vertical-align: bottom;
	width: 75px;
	height: 20px;
}
</style>
</head>
<script type="text/javascript">
//サブメニュー表示切替
function ChangeSubMenu(obj){
	var submenuUl = obj.getElementsByTagName('ul')[0];
	if(submenuUl){
		if(submenuUl.style.display != "block"){
			submenuUl.style.display = "block";
		}
		else{
			submenuUl.style.display = "none";
		}
	}
}
function SetSubMenu(obj){
	//サブメニューを全部非表示に
	var submenuUl = document.getElementById(obj).getElementsByTagName('ul')[0].getElementsByTagName('ul');
	for (i = 0; i < submenuUl.length; i++) {
		submenuUl[i].style.display = "none";
	}
	//メニューをポイントする/はずすとサブメニュー表示切替
	var submenuImg = document.getElementById(obj).getElementsByTagName('li');
	for (i = 0; i < submenuImg.length; i++) {
		submenuImg[i].onmouseover = function(){
			ChangeSubMenu(this)
		}
		submenuImg[i].onmouseout = function(){
			ChangeSubMenu(this)
		}
	}
}
window.onload = function(){
	SetSubMenu('menubar');
}
</script>
<body>
<div id="menubar">
<ul>
	<li><img src="mprod.gif" alt="様式" title="">
		<ul>
			<li><a href="/1/1-1.xls">掲示</a></li>
			<li><a href="/1/1-2.doc">点検表</a></li>
			<li><a href="/1/1-3.doc">手順書</a></li>
		</ul>
	</li>
	<li><img src="mprod.gif" alt="教育" title="">
		<ul>
			<li><a href="/2/2-1.doc">記録簿</a></li>
			<li><a href="/2/2-2.doc">入場者</a></li>
			<li><a href="/2/2-3.doc">申告書</a></li>
			<li><a href="/2/2-4.doc">誓約書</a></li>
		</ul>
	</li>
</ul>
</ul>
</body>
</html>

6 名前： 123 ： 2007/02/03（土） 20:13 ID:I8R8G.1E sub-oz: カヅサツさん、ありがとうございますっ。

早速試したところ、オンマウスでバーがでてきましたっ！

ですが、バーをクリックしようと、ポイントから離れる（下にずらす）とメニューバーも消えてしまって選択できません。
環境のせいでしょうか…？

7 名前：匿名： 2007/02/03（土） 20:13 ID:/sMf8B64 sub-kJ: >>6
setTimeout でメニュー消去処理を遅延させる。この必要があるため、ホバータイプのツリーメニューはそれなりに難しい。

ちょっと不恰好だが簡単な方法としては：

・他のメニュー項目が出現した時点で、前回のメニューを消すようにする。
・ページクリックなどの具体的なアクションでメニューを消すようにする。

http://inspire.server101.com/js/mb/

8 名前： カヅサツ ◆ThCi95HEzw ： 2007/02/03（土） 20:13 ［URL］ ID:lY9L7AMa sub-gm

Mozilla Firefox 2.0 で動いたので安心していました。Netspace 7でも確認しました。
ただ、やはり環境次第で何が起こるか判らないので、私なら別途ページにもサブメニューを作り(あるいはサイトマップを用意)、画像をそこへのリンクにするという手段も併せます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title></title>
<style type="text/css">
#menubar{
	background-color: green;
	height: 40px;
}
#menubar ul{
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
#menubar ul li{
	background-color: #FCC;
	width: 75px;
	float: left;
}
#menubar ul li ul li{
	background-color: transparent;
	width: auto;
	float: none;
}
#menubar li img{
	vertical-align: bottom;
	width: 75px;
	height: 20px;
}
</style>
</head>
<script type="text/javascript">
//サブメニュー表示切替
function ChangeSubMenu(obj,open){
	var submenuUl = obj.getElementsByTagName('ul')[0];
	if(submenuUl){
		if(open){
			submenuUl.style.display = "block";
		}
		else{
			submenuUl.style.display = "none";
		}
	}
}
function SetSubMenu(obj){
	//サブメニューを全部非表示に
	var submenuUl = document.getElementById(obj).getElementsByTagName('ul')[0].getElementsByTagName('ul');
	for (i = 0; i < submenuUl.length; i++) {
		submenuUl[i].style.display = "none";
	}
	//メニューをポイントする/はずすとサブメニュー表示切替
	var submenuImg = document.getElementById(obj).getElementsByTagName('li');
	for (i = 0; i < submenuImg.length; i++) {
		submenuImg[i].onmouseover = function(){
			ChangeSubMenu(this,true);
		}
		submenuImg[i].onmouseout = function(){
			ChangeSubMenu(this,false);
		}
	}
}
window.onload = function(){
	SetSubMenu('menubar');
}
</script>
<body>
<div id="menubar">
<ul>
	<li><img src="mprod.gif" alt="様式" title="">
		<ul>
			<li><a href="/1/1-1.xls">掲示</a></li>
			<li><a href="/1/1-2.doc">点検表</a></li>
			<li><a href="/1/1-3.doc">手順書</a></li>
		</ul>
	</li>
	<li><img src="mprod.gif" alt="教育" title="">
		<ul>
			<li><a href="/2/2-1.doc">記録簿</a></li>
			<li><a href="/2/2-2.doc">入場者</a></li>
			<li><a href="/2/2-3.doc">申告書</a></li>
			<li><a href="/2/2-4.doc">誓約書</a></li>
		</ul>
	</li>
</ul>
</body>
</html>