プルダウンメニューの表示に関する問題

前へ 次へ
このQ&Aのポイント
  • プルダウンメニューの表示後、閉じた際に+のgifが再表示されない問題について
  • 親メニューの+が-になっている場合にgifの-を表示させる方法について
  • HTMLで+のgifをクリックして-のgifと詳細表示が出る仕組みを作成した際の問題点
回答を見る
  • ベストアンサー

プルダウンメニューの表示

+のgifをクリックすると-のgifと詳しい表示が出る様にHTMLを書いたのですが、 表示された後で閉じると、その+のgifが再表示されません。 何が足りなくてそうなってしまうのでしょうか？ また、親メニューの+が-になっている時、gifの-を表示させる方法を教えてやって下さい…。 よろしくお願いします。 <body bgcolor="#000000" text="#ffffff" link="#000000" alink="#808080" vlink="#ff0000"> <div id='div1' style="position:absolute; left:10; top:100; width:250;"> <a id="menu1" href="#" onClick="onmenu(this,'menu11');return false" style="text-decoration:none;"> <img src="p.gif" alt="+" border="0"></a><font size="+2">BBS</font> <div id="menu11" style="position:absolute; left:-2; top:16; visibility:hidden;"> ├<a href="http://…" target="_top" style="text-decoration:none;"> <img src="m.gif" alt="-" border="0"></a> aBBS<br> ├<a href="http://…" target="_top" style="text-decoration:none;"> <img src="m.gif" alt="-" border="0"> </a> bBBS<br> └<a href="http://…" target="_top" style="text-decoration:none;"> <img src="m.gif" alt="-" border="0"></a> cBBS </div></div></div> </body>

  • HTML
  • 回答数2
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • puri2
  • ベストアンサー率75% (3/4)
回答No.1

メインメニューをクリックする度にサブメニューの表示非表示が切り替わるということでしょうか？ 書かれているソースだけでは原因が何であるかわかりませんが、 私が以前似たようなものを作った時は次のようにしました。 +のgifがクリックされた時点で、id="menu11"の状態（visibleかhiddenか）を判定して命令を分岐します。 id="menu11"がvisibleならhiddenに、hiddenならvisibleに。 ↓参考になれば良いのですが。（Netscape6では使えませんでした。） -------------------------------------------------------------------- <HTML> <HEAD> <TITLE>サブメニュー表示非表示</TITLE> <SCRIPT language="JavaScript"> <!-- function onmenu(){ //IE用 if(document.all){ if(document.all['menu11'].style.visibility == 'hidden'){ //サブメニュー非表示の場合 document.all['menu11'].style.visibility = 'visible' //サブメニューを表示 } else{ //サブメニュー表示中 document.all['menu11'].style.visibility = 'hidden' //サブメニューを非表示 } } //NN用 if(document.layers){ if(document.layers['menu11'].visibility == 'hide'){ //サブメニュー非表示の場合 document.layers['menu11'].visibility = 'show' //サブメニューを表示 } else{ //サブメニュー表示中 document.layers['menu11'].visibility = 'hide' //サブメニューを非表示 } } } // --> </SCRIPT> </HEAD> <BODY bgcolor="#FFFFFF" text="#000000"> <DIV id="div1" style="position:absolute; left:10; top:100; width:250; visibility: visible> <A href="javascript:void(0);" onClick="onmenu()"><IMG src="p.gif" alt="+" border="0"><FONT size="+2">BBS</FONT> <DIV id="menu11" style="position:absolute; left:-2; top:16; visibility: hidden"> ├<A href="http://..." target="_top" style="text-decoration:none;"> <IMG src="m.gif" alt="-" border="0"></A> aBBS<BR> ├<A href="http://..." target="_top" style="text-decoration:none;"> <IMG src="m.gif" alt="-" border="0"></A> bBBS<BR> └<A href="http://..." target="_top" style="text-decoration:none;"> <IMG src="m.gif" alt="-" border="0"></A> cBBS </DIV></DIV> </BODY> </HTML>

RYOKUYA
質問者

お礼

有り難うございます！動作確認しました所、たしかに希望通り表示されました。 スクリプトの定義が足りなかった様です。 それで、重ねてお願いなのですが、これの下に別の親メニューとサブメニューを増やしたい のですが、増やし方をお教え願えますでしょうか？ 本を片手にいじってみたのですが、親が増やせてもサブが表示されなかったりして どうしても上手く行きません(T_T)。 どうかよろしくお願いいたします…。

その他の回答 (1)

  • puri2
  • ベストアンサー率75% (3/4)
回答No.2

１番上のメニューを親メニュー。 ２番目、３番目をそれぞれ子メニュー、孫メニューとして説明します。 子メニューと孫メニューのレイヤーをネストして（子孫レイヤー）、 親メニューのクリックで子孫レイヤーを表示できるようにすれば良いと思います。 さらに子孫レイヤー内でも子メニューのクリックで孫メニューレイヤーを表示するようにします。 下のサンプルを実行してもらえばわかると思いますが、 子メニューが複数ある場合、孫メニューを表示した時に、他の子メニューと重なって表示されないように他の子メニューレイヤーを移動しなければなりません。 少しややこしいですが、子メニューをクリックした時点で孫メニューレイヤーの表示非表示を判定すると同時に孫メニューレイヤーの高さを求めます。（offsetHeightを使用） ここで求めた孫メニューレイヤーの高さ分だけ、下段にある子メニューレイヤーを下方向に移動させます。 子メニューをもう一度クリックすると、今度は逆方向に移動します。 また、孫メニュー表示中に、親メニューをクリックしても子メニューが非表示にならないように変数xyzの値で孫メニューの表示非表示を判定します。 孫メニューがひとつ表示されるとxyzに+1、非表示にされると-1の値を送るようにします。 xyzの値が0の時は孫メニューがすべて非表示の状態なので、その時だけ親メニューのクリックで子メニューを非表示にできます。 親メニューが複数ある場合も、これまでの応用で他のレイヤーを移動させれば良いです。 WindowsのIE5.5でしか動作確認していません。 Netscape用のスクリプトは省略しています。 <HTML> <HEAD> <TITLE>サブメニュー表示非表示</TITLE> <SCRIPT language="JavaScript"> <!-- var xyz = 0; //孫メニューの表示状態を判定 function showmenu(komenu_num,ppp){ //孫メニューの表示切替 a = komenu_num + '1'; y_position = document.all['menu'+a].offsetHeight; //孫メニューの高さを求める //IE用 if(document.all){ if(document.all['menu'+a].style.visibility == 'hidden'){ //孫メニュー非表示の場合 document.all['menu'+a].style.visibility = 'visible' //孫メニューを表示 xyz = xyz+1; for(n=1;n<=ppp;n++){ otMenuNo = komenu_num+n; document.all['menu'+otMenuNo].style.posTop += y_position //下段の子メニューの移動 } } else{ //孫メニュー表示中 document.all['menu'+a].style.visibility = 'hidden' //孫メニューを非表示 xyz = xyz-1; for(n=1;n<=ppp;n++){ otMenuNo = komenu_num+n; document.all['menu'+otMenuNo].style.posTop -= y_position //下段の子メニューの移動 } } } } function onmenu(submenu_num){ //子メニューの表示切替 //IE用 if(document.all){ if(document.all['menu11'].style.visibility == 'visible'){ //子メニュー表示中の場合 if(xyz == 0){ //孫メニュー非表示の場合 for(i=1;i<=submenu_num;i++){ document.all['menu1'+i].style.visibility = 'hidden' //子メニューを非表示 } } else{ for(i=1;i<=submenu_num;i++){ document.all['menu1'+i].style.visibility = 'visible' //子メニューを表示のまま } } } else{ //子メニュー非表示の場合 for(i=1;i<=submenu_num;i++){ document.all['menu1'+i].style.visibility = 'visible' //子メニューを表示 } } } } // --> </SCRIPT> </HEAD> <BODY bgcolor="#FFFFFF" text="#000000"> <DIV id="div1" style="position:absolute; left:10; top:10; width:250; visibility: visible> <A href="javascript:void(0);" onClick="onmenu(3)"><FONT size="+2">BBS</FONT> </DIV> <DIV id="menu11" style="position:absolute; left:2px; top:35px; width:250; visibility: hidden"> <A href="javascript:void(0);" onClick="showmenu(11,2)">+子メニュー</A> <DIV id="menu111" style="position:absolute; left:5px; top:20px; visibility: hidden"> <A href="javascript:void(0);">++孫メニュー</A><BR> <A href="javascript:void(0);">++孫メニュー</A> </DIV> </DIV> <DIV id="menu12" style="position:absolute; left:2px; top:60px; width:250; visibility: hidden"> <A href="javascript:void(0);" onClick="showmenu(12,1)">+子メニュー</A> <DIV id="menu121" style="position:absolute; left:5px; top:20px; visibility: hidden"> <A href="javascript:void(0);">++孫メニュー</A><BR> <A href="javascript:void(0);">++孫メニュー</A><BR> <A href="javascript:void(0);">++孫メニュー</A> </DIV> </DIV> <DIV id="menu13" style="position:absolute; left:2px; top:85px; width:250; visibility: hidden"> <A href="javascript:void(0);" onClick="showmenu(13,0)">+子メニュー</A> <DIV id="menu131" style="position:absolute; left:5px; top:20px; visibility: hidden"> <A href="javascript:void(0);">++孫メニュー</A> </DIV> </DIV> </BODY> </HTML>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • プルダウンメニューがうまくいかない

    スタイルシート・スタンダード・デザインガイドと言う本を参考にプルダウンメニューを作っていますがうまくいきません。 サブメニューをメインメニューの真横にだすにはどうすればいいでしょう。 ■HTML■ <a href="index.html"><img src="images/home.gif" width="13" height="14">トップページ</a> <span>|</span> <a href="instruction.html"><img src="images/instruction.gif" width="14" height="13">注意事項</a> <span>|</span> <div id="menu1" onMouseOver="MenuOn(1)" onMouseOut="MenuOff(1)"> <a href="event/index.html" class="menuhead"><img src="images/menu.gif" width="8" height="12">お知らせお知らせ</a> <div class="submenu" id="submenu1"> <a href="event/index.html"><img src="images/submenu.gif" width="8" height="12">イベント１</a> <span>|</span> <a href="event/2.html"><img src="images/submenu.gif" width="8" height="12">イベント２</a> <span>|</span> <a href="event/3.html"><img src="images/submenu.gif" width="8" height="12">イベント３</a> </div> </div> <span>|</span> <a href="aaaaaaaa.html"><img src="images/menu.gif" width="8" height="12">ああああああああ</a> <span>|</span> <div id="menu2" onMouseOver="MenuOn(2)" onMouseOut="MenuOff(2)"> <a href="mainmenu1/index.html" class="menuhead"><img src="images/menu.gif" width="8" height="12">メインメニュ１</a> <div class="submenu" id="submenu2"> <a href="mainmenu1/index.html"><img src="images/submenu.gif" width="8" height="12">サブメニュ１</a> <span>|</span> <a href="mainmenu1/submenu2.html"><img src="images/submenu.gif" width="8" height="12">さぶめにゅ２</a> <span>|</span> <a href="mainmenu1/submenu3.html"><img src="images/submenu.gif" width="8" height="12">サブメニュ3</a> </div> </div> 省略 </div> ■スタイルシート■ .menu { font-size:0.75em; margin-left:0; margin-right:0; margin-bottom:50px; margin-top:0; height:2em; width:140px; border-top:solid 1px #33cc99; position:absolute; text-align:left; left:0; top:95px; padding-left:10px } .menu a { color:#33cc99; border-bottom:solid 1px #33cc99; text-decoration:none; display:block; width:100%; line-height:2em; text-align:left; } .menu a:hover { background-color:#ffffcc; } .menu span { color:#000000; display:none; } .menu img { margin-right:10px; margin-left:5px; border:0 } .submenu a{ background-color:#33cc99; border-bottom:solid 1px #ffffff; color:#ffffff; width:100%; } .submenu { visibility:hidden; position:absolute; left:0; width:140px; padding-left:10px; } .submenu a:hover { background-color:#0099cc; width:140px; } #submenu1 { position:absolute; left:0; } #submenu2 { position:absolute; left:0 } #submenu3 { position:absolute; left:0 } #submenu4 { position:absolute; left:0 } #submenu5 { position:absolute; left:0 } #submenu6 { position:absolute; left:0 } ■Javascript■ function MenuOn(x){ obj=document.getElementById("submenu"+x).style.visibility="visible"; } function MenuOff(x){ obj=document.getElementById("submenu"+x).style.visibility="hidden"; }

  • ▲▲JavaScriptのツリーメニューについて▲▲

    現在このような記述でツリーメニューを作っています trList = ["treeMenu1","treeMenu2","treeMenu3","treeMenu4","treeMenu5","treeMenu6","treeMenu7","treeMenu8"]; function exMenu(tName) { for (i=0; i<trList.length; i++) eval(trList[i]).style.display = "none"; tMenu = eval(tName).style; if (tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; } 本文は <img src="sozai/menu1.gif" alt="矢印" width="13" height="13">&nbsp;<a href="javascript:exMenu('treeMenu1')">教会のご案内</a> <div id="treeMenu1" style="display:none" class="font_menu2"> <img src="sozai/menu2.gif" alt="矢印" width="9" height="9">&nbsp;<a href="kyoukai_1_1.html" target="main">牧師・スタッフの紹介</a><br> <img src="sozai/menu2.gif" alt="矢印" width="9" height="9">&nbsp;<a href="kyoukai_2_1.html" target="main">教会施設の紹介</a><br> <img src="sozai/menu2.gif" alt="矢印" width="9" height="9">&nbsp;<a href="kyoukai_3_1.html" target="main">交通のご案内</a><br> <img src="sozai/menu2.gif" alt="矢印" width="9" height="9">&nbsp;<a href="kyoukai_4_1.html" target="main">教会QandA</a> </div> こんな感じです☆多少こちらで決めたタグなども入っていますが…。 テーブルを使って記述しています。 上記を見まして、「教会のご案内」をクリックするとメニューが出てきます。もう一度「教会のご案内」をクリックすると表示されたメニューが表示されていない状態に戻すように表示をしたいんです。 説明下手ですが、おわかりになる方タグなどを教えてくださいｖ(。・・。)

  • 折たたみメニューの表示・非表示

    JavaScriptで下記のような折りたたみ（階層）メニューを作成しています。 <script type="text/javascript"> <!-- /* ブラウザ判別 */ var ie=document.all ? 1 : 0; var ns6=document.getElementById&&!document.all ? 1 : 0; var opera=window.opera ? 1 : 0; /* 子メニューの表示・非表示切替 */ function openFolder(childObj, parentObj){ var child=""; var parent=""; var sw="../../images/blanc.gif"; /* フォルダ表示時のアイコン画像 */ var hd="../../images/blanc.gif"; /* フォルダ非表示時のアイコン画像 */ if(ie || ns6 || opera){ child=ns6 ? document.getElementById(childObj).style : document.all(childObj).style; parent=ns6 ? document.getElementById(parentObj) : document.all(parentObj); if (child.display=="none"){ child.display="block"; parent.src=sw; }else{ child.display="none"; parent.src=hd; } } } //--> </script> <div id="open_1" style="display:none;"> <a href="01.html"><img src="images/list_01.gif"></a><br> <a href="02.html"><img src="images/list_02.gif"></a><br> </div> <div id="open_2" style="display:none;"> <a href="03.html"><img src="images/list_03.gif"></a><br> <a href="04.html"><img src="images/list_04.gif"></a><br> </div> <div id="open_3" style="display:none;"> <a href="04.html"><img src="images/list_03.gif"></a><br> <a href="05.html"><img src="images/list_04.gif"></a><br> </div> ここで、<div id="open_1">内のリンクをクリックして01.htmlに遷移した際、01.htmlでも<div id="open_1">内の階層が表示されているようにしたいのです（下のふたつの階層についても同じです）。 過去ログなどを調べまして、 <script type="text/javascript"><!-- function keepOpen(){ document.getElementById('x').style.display = "block"; document.getElementById('y').style.display = "block"; }keepOpen(); //--></script> を挿入すればいけそうでやってみたのですが、今度は開きっぱなしになってしまいます。二日ほど調べたのですが、よい解決策が見つかりません（また、<div>の中のソースはすでにphpのコードを組込んでいるので、できれば中の部分はいじりたくありません）。 お詳しい方、大変恐れ入りますが、どうぞご教示くださいませ。 よろしくお願いいたします。

  • フレームを使って細いメニューを作りたいです。

    フレームを使って細いメニューを作りたいです。 フレームを使って下のほうに細いメニューを表示したいと思っています。 しかし文字の上に一行分くらいの隙間が開いてしまい、 メニューの文字がスクロールしないと表示されません。 メニューの作り方も調べましたが、ここまで細いものについてはわかりませんでした。 どうしたら上手く表示できるでしょうか。 完成ページ↓ <html> <head> <title></title> </head> <frameset rows="*,3%" frameborder="NO" border="0"> <frame src="PageTop.html"> <frame src="Menu.html" noresize scrolling="NO"> <norames><P>このページを表示するには、フレームをサポートしているブラウザが必要です。</P> </frameset> </html> PageTop.html↓ <html> <head> <title></title> </head> <body></body> </html> Menu.html↓ <html> <head> <title></title> <style type="text/css"> <!-- p { text-decoration: none; } --> </style> </head> <p> <body bgcolor="#696969" link="#696969" alink="#696969" vlink="#696969"> <font face="Kartika"><div style="font size:20px;"> 　　 <target="1" href="">Top</a> 　　　 <target="1" href="">About</a> 　　　<target="1" href="">Main</a> 　　　<target="1" href="">Blog</a> 　　　<target="1" href="">Link</a> 　　　<target="_top" href="">Index</a> </font></p> </body> </html> 至らない点がありましたらご指摘ください。 よろしくお願い致します。

    • ベストアンサー
    • HTML
  • ドロップダウンメニューの方法を教えてください

    ■ドロップダウンメニューでサブメニューが横並びで出るようにしたいと思っています。 HTMLは下記のように記述しています。どのようにJavascriptを記述すると良いのか教えてください。よろしくお願いします。 【html】 <div id="menuber"> <a href="#"><IMG src="test/m1.gif" width="101" height="20" border="0" align="left"></a> <div class="hiddenmenus"> <span id="sub"> <a href="#"><IMG src="test/sub1.gif" width="101" height="20" border="0" align="left"></a> <a href="#"><IMG src="test/sub2.gif" width="101" height="20" border="0" align="left"></a> <a href="#"><IMG src="test/sub3.gif" width="101" height="20" border="0" align="left"></a> <a href="#"><IMG src="test/sub4.gif" width="101" height="20" border="0" align="left"></a> </span> </div> </div> 【CSS】 .hiddenmenus {position:absolute; top: 20px; left: 0px;} #sub1 { visibility: hidden; }

  • IEとFirefoxの見え方のずれにおけるCSSの解決法（liタグ）

    こんにちは、質問させて下さい。 現在　li　タグを使って、メニュー（画像）を作っていたのですが、 IEでは表示されるのですが、firefoxだとどうしても左に余白が出てしまいます。 マーカーボックスの指定が消えていないのかな、と素人ながらに思うのですが、それが正しいのか、正しくとも正しくなくとも、ではどう直せばいいのか分かりません。 どうぞご回答お願いいたします。 以下は、そのliに関連するCSSと、ソースです。 ■CSS #div{ width: 458px; float: left; text-align: center; border-top-width: 2px; border-bottom-width: 2px; border-top-style: dotted; border-bottom-style: dotted; border-top-color: #333333; border-bottom-color: #333333; padding-top: 10px; padding-bottom: 10px; margin-bottom: 15px; margin-right: auto; margin-left: auto; padding-left: 10px; } #div ul{ list-style-type:none; display: block; width: 432px; text-align: center; margin: 0px; } #div li { float: left; height: 200px; width: 140px; margin-right: 4px; margin-bottom: 10px; margin-top: 0px; margin-left: 0px; } #div li img{ border:none; ■html <div> <ul> <li><a href="1.html"><img src="image/menu1.jpg" alt="品"></a></li> <li><a href="2.html"><img src="image/menu2.jpg" alt="品"></a></li> <li><a href="3.html"><img src="image/menu3.jpg" alt="品"></a></li> <li><a href="4.html"><img src="image/menu4.jpg" alt="品" /></a></li> <li><a href="5.html"><img src="image/menu5.jpg" alt="品"></a></li> <li><a href="6.html"><img src="image/menu6.jpg" alt="商"></a></li> </ul> </div> 宜しくお願いいたします。

    • ベストアンサー
    • HTML
  • スタイルシートに関しての質問です。margin0 padding0と指定し居るのに、変なスペースが入ってしまいます。。。

    スタイルシートで、 *｛ padding:0; margin:0; ｝ img{ padding:0; margin:0; } と指定しているのですが、なぜか画像でへんなスペースが入ってしまいます。どうしてでしょうか？ ソースは下記の通りです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <head> <META http-equiv=Content-Type content="text/html; charset=Shift_JIS"> <META content="新築マンション,賃貸,敷金ゼロ,礼金ゼロ,ペット可,内覧可能,水商売可,風俗可,東京,都内,マンション,アパート,一戸建, name=keywords> <title>株式会社</title> <link href="css/mainstyle.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wapper"> <div id="head"><img src="img/forward_rogo.gif" width="250" height="56" border="0" ></div> <div id="sidememu"> <table width="150" border="0" cellpadding="0" cellspacing="0" > <tr> <td><a href="#"><img src="img/menu1.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu13_h.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu5_h.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu4.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu11_h.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu10_h.gif" width="150" height="40" border="0"></a></td> <tr> <td><a href="#"><img src="img/menu3.gif" width="150" height="40" border="0"></a></td> <tr> <td><a href="#"><img src="img/menu9_h.gif" width="150" height="40" border="0"></a></td> <tr> <td><a href="#"><img src="img/menu6_h.gif" width="150" height="40" border="0"></a></td> <tr> <td><a href="#"><img src="img/menu8_h.gif" width="150" height="40" border="0"></a></td> </tr> </table> </div> <div id="main"> <div id="flash-a"> <img src="img/dammy.gif" width="650" height="150" border="0"> </div> <div id="main-1"> <img src="img/top_1.gif" width="650" height="40" border="0"> </div> </div> </div> </body> </html> cssは、 /* CSS Document */ *{ padding:0; margin:0; } img{ padding:0; margin:0; } body{ margin-left:auto; margin-right:auto; text-align:center; } #wapper{ width:820; } #head{ margin-top:20px; text-align:left; border-bottom:2px #000099 solid; } #sidememu{ margin-top:20px; background-color:#F00; float:left; } #main{ margin-left:10px; margin-top:20px; float:right; } です。すみません。教えてください！

  • html,cssプルダウンメニューについて教えてください。

    html,cssプルダウンメニューについて教えてください。 現在html,cssのみでプルダウンメニューを作成しているのです、解決のできない問題点が あり困っています。どなたか知識のある方、教えていただけると嬉しいです。 [問題点] オンマウスでプルダウンメニュー表示時、その表示分だけ、親要素の<div>の 高さが広がってしまい、それに伴いそれ以下のページ内要素全て下にずれてきます。 (分かりにく表現で申し訳ありません） 出来れば、プルダウンメニューが表示されても、親要素の高さは変わらず、以下のタグ要素の 上に重なって表示させたいと思っています。 対処法がお分かりになる方、教えて頂けると幸いです。 [html] <div id="main_menu"> <div id="navi"> <ul> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#"><IMG src="img/main_menu04.gif"></a> <ul class="sub"> <li><a href="#">サブメニュー 1</a></li> <li><a href="#">サブメニュー 2</a></li> </ul> </li> <li class="navi_menu1" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#"><IMG src="img/main_menu05.gif"></a> <ul class="sub"> <li class="navi_menu1"><a href="#">サブメニュー 1</a></li> <li class="navi_menu1"><a href="#">サブメニュー 2</a></li> </ul> </li> </ul> </div> </div> [css] #navi { width:993; margin:0 auto; border:0px solid red; padding:0px 39px 0px 0px; } #navi ul { margin: 0; padding: 0; list-style: none; } #navi li { float: left; margin: 0; width:120px; } #navi li.navi_menu1{ float: left; margin: 0; width:140px; } #navi li a { font-size: 14px; color: #ffffff; display: block; width: 100%; padding: 0px 0; text-align: center; font-weight: bold; text-decoration: none; background-color: #3399ff; } #navi li a:hover { color: #ffffff; background-color: #3366cc; } #navi ul.sub { background: #eeeeee; } #navi ul.sub li { padding:5px 0px 0px 0px; float: none; height:25; } #navi ul.sub li.navi_menu1 { float: none; height:25; width:180; } #navi ul.sub li a { color: #666666; background: none; font-size: 12px; font-weight: normal; padding:0px 0; border-top:0px solid #000099; } #navi ul.sub li a:hover { color: #ffffff; background-color: #ff9900; } #navi ul li.navi_menu ul { display: none; } #navi ul li.navi_menu_on ul { display: block; } #navi li.navi_menu{ border:0px solid #000099; } #navi li.navi_menu_on{ border:0px solid #000099;}

  • サイト制作の際のメニューバーのロゴについて

    サイト制作でのメニューバー及び、ナビゲーションバーについて。 とある事情により、サイトを制作していて このサイト(http://www.maroon5.com/home)のような、メニューバーにしたいと思い 自分で作ってみたところ、ロゴの画像が左上で小さくなってしまい困っています。 どなたか、親切な方アドバイスの方よろしくお願いします。 ソースコードは以下の通りになってます。 ------HTML------------ <!DOCTYPE html> <html> <head> <meta > <head> <meta content="text/html" charset="utf-8"> <title>練習</title> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body> <!--ナビゲーション--> <div id="wrapper"> <!-- メニューバー --> <div id="menu"> <a href="intro"><img src="image/logo1.png" class="logo" /></a> <div align="center"> <ul> <li><a href="index.html">NEWS</a></li> <li><a href="ntroduction.html">BIOGRAPHY</a></li> <li><a href="story.html">DISCOGRAPHY</a></li> <li><a href="cast.html">SPECIAL</a></li </ul> </div> <div align="right"> <a href="https://www.facebook.com/falloutboy" target="_blank"><img src="image/icon/facebook.png" class="icon" /></a> <a href="https://twitter.com/falloutboy" target="_blank"><img src="image/icon/twitter.png" class="icon" /></a> <a href="https://www.youtube.com/falloutboy/about" target="_blank"><img src="image/icon/youtube.png" class="icon" /></a> </div> </div> <!--　メインビジュアル　--> <div id="main_image"> <img src="メインビジュアル画像" alt="Main Image" /> </div> </header> </div> </body> </html> -----CSS--------- @charset "UTF-8"; body{ margin:0; color: #FFFFFF; font-family:"Lucida Sans Unicode","Lucida Grande",sans-serif; font-size:13px; } /*　外枠　*/ #wrapper{ width: 100% margin: 0; padding: 0; } /* メニューバー */ #menu{ margin-top:0; width: 100%; height: 50px; position: fixed; top:0; background-color: rgba(0,0,0,0.8); z-index: 1; } #menu ul{ list-style-type: none; width: 50%; margin:0; padding:0; } #menu li{ padding-top: 13px; color: #FFFFFF; font-family:'Ubuntu','Arial',cursive; font-size: 18px; width: 25%; text-align:center; float: left; } a:link{ color:rgba(255,255,255,0.8); text-decoration:none; } a:hover{ color:#FFFFFF; text-decoration:none; } a:visited{ color:rgba(255,255,255,0.8); text-decoration: none; } img.logo{ width:20px; height: auto; position:fixed; top: 0px; left:15px; z-index:0; } /*アイコン*/ img.icon{ width: 20px; height: 20px; margin-right: 10px; padding-top: 15px; } img.icon:hover{ opacity: 0.5; }

  • ツリーメニューを２個つづけると

    <script type="text/JavaScript"> <!-- function treeMenu(tName){ tMenu = document.getElementById(tName).style; tMenu.display=(tMenu.display=='none')?"block":"none"; } //--> </script> </head> <body> <img src="icon.gif"> <font color="FF6600"><a href="JavaScript:treeMenu('treeMenu1')">GENSUI</a> <ul id="treeMenu1" style="display:none;margin-top:0px;"> <a href="a.html" target="right">１</a><br> <a href="b.html" target="right">２</a></ul> ここまでで１つめ。下から２つめ <script type="text/JavaScript"> <!-- function treeMenu(tName){ tMenu = document.getElementById(tName).style; tMenu.display=(tMenu.display=='none')?"block":"none"; } //--> </script> </head> <body> <img src="newicon.gif"> <font color="FF6600"><a href="JavaScript:treeMenu('treeMenu1')">ABYSS</a> <ul id="treeMenu1" style="display:none;margin-top:0px;"> <a href="a.html" target="right">３</a><br> <a href="b.html" target="right">４</a></ul> こうすると、２つめの【ABYSS】をクリックすると上の【GENSUI】のツリー『１』『２』がでてきます。（GENSUIを押したときと同じ状態になる） どうすればちゃんと【ABYSS】をクリックして『３』『４』がでてくれますか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する