- ベストアンサー
プルダウンメニューについての質問
- プルダウンメニューとは、ウェブサイト上でメニュー項目を一時的に非表示にし、ユーザーがクリックした際に表示させることができるメニューのことです。
- プルダウンメニューの作成方法は、JavaScriptを使って非表示・表示の切り替えを行います。
- ドロップダウンメニューを開くと同時にページを開くためには、JavaScriptの関数を使用して実現することができます。
- tukinohana
- お礼率66% (63/95)
- JavaScript
- 回答数4
- ありがとう数5
- みんなの回答 （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>
その他の回答 (3)
- yyr446
- ベストアンサー率65% (870/1330)
これで、どうです。 （※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にかえなきゃ...無駄か
- yyr446
- ベストアンサー率65% (870/1330)
単に <A href="メニュページのurl" onclick="pullDown();" target="_blank">メニューを表示する</A><BR>
- zeff
- ベストアンサー率69% (137/198)
意味がまったく伝わってきませんが。 ＞”メニューを表示する”のページ って何ですか？何のためのページですか？同時にやることに意味があるんですか？ どこに開くんですか？新しいタブ/ウィンドウ？ ドロップダウンメニューは開いたページと関係あるんですか？ ぜんぜんわからない。
補足
同じウィンドウに”メニューを表示する”のページを表示し、同時にドロップメニューも表示させるようにしたいのです。現在のコードですと、”メニューを表示する”をクリックするとドロップダウンメニューが表示されるだけなので…。 わかりずらくてすみません。
お礼
このコードで試しましたが、ドロップダウンメニューが表示されませんでした。 あと、別ページではなく、同ページに表示されるようにしたいと思います。よろしくお願いします。
補足
一瞬は表示されますが・・・。