- 締切済み
macromediaのようなメニュー
HTMLとCSSなどを少しかじっている者です。 http://qa.asahi.com/qa1282110.html これを見つけて自分なりにアレンジしようと思ったのですが、色を消したくてもどこを消せばよいかわからず、困っています。 色などはいらないので、メニューをアクティブにしたときに下にサブメニューが出るようなHTML（javascriptを直接head内に書き込んでいただいて）を教えていただけないでしょうか？ そうすれば少しはわかるようになると思うので… ご教授お願いします。。
- goetia
- お礼率52% (20/38)
- JavaScript
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
みんなの回答
テキストの上にメニュー（背景が透明色）が表示された場合、ダブって見にくい時があるかな～？
色ね～。 var color = (flag)? '#ff6600': 'transparent';とか color = '#ff9933';の部分を変えます transparentは透明（通過）を意味し、#赤緑青で16進法で色を表現します 白色なら#FFFFFFということで。
<html> <head> <style> #menu {position:absolute;height:40px;} #menu ul {margin-left:0; } #menu li {float:left; width:4em; } .sub_menu { display:none;margin-left:1em;background-color:#eee; border:1px #888 solid} .sub_menu a:link { color: #000; background-color:#eee;} .sub_menu a:hover { color: #fff; background-color:#333;} </style> <script> function disp(n){ for(i=1,m=document.getElementById('menu').getElementsByTagName('li').length;i<=m;i++){ document.getElementById('s'+i).style.display=(i==n)?'block':'none'; } } </script> </head> <body> <div id="menu"> <ul style="list-style-type: none"> <li> <a href="sub1.html" onMouseover="disp(1)">menu1</a> <div class="sub_menu" id="s1" onMouseLeave="disp(0)"> <a href="m1sub1.html">abc</a><br> <a href="m1sub2.html">defg</a><br> </div> </li> <li> <a href="sub2.html" onMouseover="disp(2)">menu2</a> <div class="sub_menu" id="s2" onMouseLeave="disp(0)"> <a href="m2sub1.html">hij</a><br> <a href="m2sub2.html">klmn</a><br> <a href="m2sub3.html">defg</a><bri> </div> </li> <li> <a href="sub3.html" onMouseover="disp(3)">menu3</a> <div class="sub_menu" id="s3" onMouseLeave="disp(0)"> <a href="m3sub1.html">opq</a><br> <a href="m3sub2.html">rstufffffvw</a><br> </div> </li> </ul> </div> <br style="clear:both;margin-top:3em"> さっきのはひどかった。これもひどいかもなぁ～<br> </body> </html>
補足
本当に申し訳ないのですが、プルダウンメニューがほしいのではないのです。リンク先の回答だとロールオーバーで色が変わりますよね？その色を抜いたものが、普通のリンク色のものがほしいのです… 補足が足りませんでした。ごめんなさい。
<html> <head> <style> #menu li {float:left; width:5em; } .sub_menu { display:none;margin-left:1em} </style> <script> function disp(n){ for(i=1,m=document.getElementById('menu').getElementsByTagName('li').length;i<=m;i++){ document.getElementById('s'+i).style.display=(i==n)?'block':'none'; } } </script> </head> <body> <div id="menu"> <ul style="list-style-type: none"> <li> <a href="sub1.html" onMouseover="disp(1)">menu1</a> <div class="sub_menu" id="s1" onMouseLeave="disp(0)"> <a href="m1sub1.html">abc</a><br> <a href="m1sub2.html">defg</a><br> <a href="m1sub3.html">defg</a><br> </div> </li> <li> <a href="sub2.html" onMouseover="disp(2)">menu2</a> <div class="sub_menu" id="s2" onMouseLeave="disp(0)"> <a href="m2sub1.html">hij</a><br> <a href="m2sub2.html">klmn</a><br> <a href="m2sub3.html">defg</a><bri> </div> </li> <li> <a href="sub3.html" onMouseover="disp(3)">menu3</a> <div class="sub_menu" id="s3" onMouseLeave="disp(0)"> <a href="m3sub1.html">opq</a><br> <a href="m3sub2.html">rstuvw</a><br> </div> </li> </ul> </div> </body> </html> こりゃ～プロの人たちに笑われそうだ。 サブメニューはリストタグを使うべきなのだろうけど・・・
お礼
なるほど！ありがとうございます。 しかし必ず色指定は必須なのでしょうか。色指定の部分を抜けば、デフォルトのリンク色になる、という考えは甘いでしょうか・・・