激凹みから立ち直る方法

プルダウンメニューについてです。
http://javascript.eweb-design.com/0701_pdm.html
こちらのサイトを参考につくっています。

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="JavaScript">
<!--
// プルダウンメニュー
flag = false;
function pullDown() {
if(flag) ID.style.visibility = "hidden";
else ID.style.visibility = "visible";
flag = !flag;
}
//-->
</SCRIPT>
</HEAD>
<BODY bgcolor="#ffffff">
<A href="javaScript:pullDown()">メニューを表示する</A><BR>
<DIV id="ID" style="position:absolute;visibility:hidden;">
<A href="http://www.yahoo.co.jp/">■Yahoo!</A><BR>
<A href="http://bb.yahoo.co.jp/">■Yahoo! BB</A><BR>
<A href="http://shopping.yahoo.co.jp/">■Yahoo! Shopping</A><BR>
<A href="http://auctions.yahoo.co.jp/">■Yahoo! Auctions</A><BR>
</DIV>
<BR><BR><BR><BR>
</BODY>
</HTML>

説明がうまくできないのですが、、”メニューを表示する”をクリックしたときにドロップダウンメニューを開くと同時にページを開きたいと思っています。(”メニューを表示する”のページを作りたい。)
どうしたらよいでしょうか?よろしくお願いします。

A 回答 (4件)

IE8でも成功!


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>html5</title>
<script type="text/javascript" charset="utf-8">
var flag = false;
var frame;
window.onload = function () {
frame = document.getElementById("frame");
frame.contentDocument.open("text/html");
frame.contentDocument.write(
'<!DOCTYPE html>\n' +
'<html>\n' +
'<head>\n' +
'<meta charset="UTF-8">\n' +
'<meta http-equiv="Content-Script-Type" content="text/javascript">\n' +
'<title>html5</title>\n' +
'</head>\n' +
'<body>\n' +
'<div id="ID" style="visibility:hidden;">\n' +
'<a href="http://www.yahoo.co.jp/">■Yahoo!</a><br>\n' +
'<a href="http://auctions.yahoo.co.jp/">■Yahoo! Auctions</a><br>\n' +
'</div>\n' +
'<script type="text/javascript" charset="utf-8">\n' +
'var target=document.getElementById("ID");' +
'try{' +
'window.addEventListener("message", function(ev) {' +
'if(ev.data=="true")target.style.visibility="hidden";' +
' else target.style.visibility = "visible";' +
'},false);}' +
'catch(e){' +
'window.attachEvent("onmessage", function(ev) {' +
'if(ev.data=="true")target.style.visibility="hidden";' +
' else target.style.visibility = "visible";' +
'},false);}' +
'</scr' + 'ipt>\n' +
'</body>\n' +
'</html>\n'
);
frame.contentDocument.close();
}
function pullDown(){
if(flag) document.getElementById("ID").style.visibility = "hidden";
else document.getElementById("ID").style.visibility = "visible";
frame.contentWindow.postMessage(flag,location.protocol+"//"+location.hostname);
flag = !flag;
}
</script>
</head>
<body>
<div>
<a href="javaScript:pullDown()">メニューを表示する</a>
</div>
<div id="ID" style="visibility:hidden;">
<a href="http://www.yahoo.co.jp/">■Yahoo!</a><br>
<a href="http://auctions.yahoo.co.jp/">■Yahoo! Auctions</a><br>
</div>
<iframe id="frame">
</iframe>
</body>
</html>
    • good
    • 0

これで、どうです。


(※HTML5 クロスドキュメントメッセージングです。)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>html5</title>
<script type="text/javascript" charset="utf-8">
var flag = false;
var frame;
window.onload = function () {
frame = document.getElementById("frame");
frame.contentDocument.open("text/html");
frame.contentDocument.write(
'<!DOCTYPE html>\n' +
'<html>\n' +
'<head>\n' +
'<meta charset="UTF-8">\n' +
'<meta http-equiv="Content-Script-Type" content="text/javascript">\n' +
'<title>html5</title>\n' +
'</head>\n' +
'<body>\n' +
'<div id="ID" style="visibility:hidden;">\n' +
'<a href="http://www.yahoo.co.jp/">■Yahoo!</a><br>\n' +
'<a href="http://auctions.yahoo.co.jp/">■Yahoo! Auctions</a><br>\n' +
'</div>\n' +
'<script type="text/javascript" charset="utf-8">\n' +
'var target=document.getElementById("ID");' +
'window.addEventListener("message", function(ev) {' +
'if(ev.data=="true")target.style.visibility="hidden";' +
' else target.style.visibility = "visible";' +
'},false);' +
'</scr' + 'ipt>\n' +
'</body>\n' +
'</html>\n'
);
frame.contentDocument.close();
}
function pullDown(){
if(flag) document.getElementById("ID").style.visibility = "hidden";
else document.getElementById("ID").style.visibility = "visible";
frame.contentWindow.postMessage(flag,location.protocol+"//"+location.hostname);
flag = !flag;
}
</script>
</head>
<body>
<div>
<a href="javaScript:pullDown()">メニューを表示する</a>
</div>
<div id="ID" style="visibility:hidden;">
<a href="http://www.yahoo.co.jp/">■Yahoo!</a><br>
<a href="http://auctions.yahoo.co.jp/">■Yahoo! Auctions</a><br>
</div>
<iframe id="frame">
</iframe>
</body>
</html>

おっとIE8は、attachEventにかえなきゃ...無駄か
    • good
    • 0

単に


<A href="メニュページのurl" onclick="pullDown();" target="_blank">メニューを表示する</A><BR>

この回答への補足

一瞬は表示されますが・・・。

補足日時:2010/05/25 16:39
    • good
    • 0
この回答へのお礼

このコードで試しましたが、ドロップダウンメニューが表示されませんでした。
あと、別ページではなく、同ページに表示されるようにしたいと思います。よろしくお願いします。

お礼日時:2010/05/25 16:35

意味がまったく伝わってきませんが。



>”メニューを表示する”のページ

って何ですか?何のためのページですか?同時にやることに意味があるんですか?

どこに開くんですか?新しいタブ/ウィンドウ?

ドロップダウンメニューは開いたページと関係あるんですか?

ぜんぜんわからない。

この回答への補足

同じウィンドウに”メニューを表示する”のページを表示し、同時にドロップメニューも表示させるようにしたいのです。現在のコードですと、”メニューを表示する”をクリックするとドロップダウンメニューが表示されるだけなので…。
わかりずらくてすみません。

補足日時:2010/05/25 17:46
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!