プルダウンメニューを表の中に入れるには？
- 下記のソースに表記されているプルダウンメニューを同じく下記に表記されている表の中に埋め込むにはどうしたら良いのでしょうか？
- プルダウンメニューを表に入れる方法について教えてください。
- プルダウンメニューと表を組み合わせる方法について知りたいです。
- ベストアンサー
プルダウンメニューを表の中に入れるには？
下記のソースに表記されているプルダウンメニューを 同じく下記に表記されている表の中に埋め込むにはどうしたら 良いのでしょうか？ ご存知の方がいらっしゃいましたら、教えていただけると大変 ありがたいです。宜しくお願いします。 <html> <head> <title></title> <style> <!-- #MainMenu { background-color:lightsteelblue; color:black; position:absolute; z-index:99; } #SubMenu { background-color:lightsteelblue; color:black; display:none; } a.SubMenu { color: gray; text-decoration:none; font-weight:bold; } a.SubMenu:hover { color: black; } --> </style> <LINK rel="stylesheet" href="table.css" type="text/css" id="TABLE_CSS_ID_"> </head> <body> <table id="MainMenu" border="0" cellpadding="0" cellspacing="0"> <tr> <TD onmouseover="document.getElementById('SubMenu').style.display='block'" onmouseout="document.getElementById('SubMenu').style.display='none'"> <span class="SubMenu" style="color:Navy;font-weight:bold;">メインメニュー</span> <div id="SubMenu"> <table border="0" cellpadding="0" cellspacing="0"> <tr><td> <A class="SubMenu" href="submenu1.html">サブメニュー１</A><br> <A class="SubMenu" href="submenu2.html">サブメニュー２</A><br> <A class="SubMenu" href="submenu3.html">サブメニュー３</A> </td> </tr> </table> </div> </TD> </tr> </table> <CENTER> <TABLE border="1" cellspacing="0" cellpadding="2" id="TABLE_1_A_080522104101" class="cnt-tb1"> <TBODY> <TR> <TD class="cnt-tb-cell1" align="center" width="285" height="31"></TD> </TR> </TBODY> </TABLE> </CENTER> </body> </html>
- may555may
- お礼率92% (12/13)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
下のテーブルのtdタグの間に上のテーブルをはさみこめばいいのでは？
関連するQ&A
- オンマウスでプルダウンメニューを作りたいのですが？
オンマウスでプルダウンメニューを作りたいのですが、作って見た所表示はしますが、消えません。 それと、横に同様なメニューを作る場合の方法を申し訳ありませんが教えてください 以下がソースです。 <HTML> <HEAD> <TITLE>メニュー</TITLE> </HEAD> <BODY> <A href="#" onMouseover="window['table'].style.display='none'" onMouseout="window['table'].style.display=''"> ●●情報</A> <TABLE id="table" border="1" style="display:" align="left" cellpadding="0" cellspacing="0" width="180"> <TR> <TD CLASS="td9" COLSPAN="3" ALIGN="left"><a href="http://www.goo.ne.jp"></a>●●</TD> </TR> <TR> <TD CLASS="td9" COLSPAN="3" ALIGN="left">▲▲</TD> </TR> </TABLE> </BODY> </HTML>
- ベストアンサー
- ホームページ作成ソフト
- プルダウンメニューがうまくいかない
スタイルシート・スタンダード・デザインガイドと言う本を参考にプルダウンメニューを作っていますがうまくいきません。 サブメニューをメインメニューの真横にだすにはどうすればいいでしょう。 ■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
- HTMLで表を横並びにしたくて、下記のような表を作りました。
HTMLで表を横並びにしたくて、下記のような表を作りました。 この表をもう一つ右隣に作りたいのですが、どうもうまくいきません。 何を付け足せば横に並んでくれるのでしょうか？ <table style= width="500" bgcolor="#007500" cellspacing="1" cellpadding="5"> <tr> <td bgcolor="#e5ffe5" width="120"><font color="#000000"><strong><a href="紹介したURL">ああああ</strong></font></td> <td bgcolor="#ffffff"><font color="#000000"><strong>ああ<br></strong></font></td> </tr> <tr> <td bgcolor="#e5ffe5"><font color="#007500"><strong><a href="紹介したいURL">ああああ</a> </strong></font></td> <td bgcolor="#ffffff"><font color="#000000"><strong>ああ<br></strong></font></td> </tr> <tr> <td bgcolor="#e5ffe5"><font color="#000000"><strong><a href="index.html"></strong></font></td> <td bgcolor="#ffffff"><font color="#000000"><strong>あああああ</strong></font></td> </tr> </table><br> </tr>
- ベストアンサー
- その他([技術者向] コンピューター)
- Java script でのツリーメニューの表示非表示について
まったくのJavascript 初心者です。 過去ログで似たようなものを見つけましたが、私には難しすぎてよくわかりませんでした。 お時間があればどうぞ教えてください。 ツリーメニューを作りたいと思っています。 大分類をクリックすると、その下のカテゴリメニューを表示したり、非表示にしたりするメニューです。 とりあえずこれはできるようになったのですが、 その下のメニューをクリックして、他のページに移動すると、元通り、すべてのカテゴリメニューがリセットされて閉じてしまっています。 リンクで移動しても、カテゴリメニューが開いたままにしたいのですが、どうしてもできません。 ソースは以下のとおりです。 初心者で本当に申し訳ありませんが、どうぞ教えてください。 よろしくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang=ja dir=ltr xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <link href="style.css" rel="stylesheet" type="text/css" /> <SCRIPT language=JavaScript> <!-- function OpenCategory(n){ if(document.all){ menu = document.all(n); flag = menu.style.display; if(flag == "block"){ menu.style.display = "none"; document.cookie=n+"=0; expires=Thu, 1-1-2099 0:0:0; path=/;"; } else{ menu.style.display = "block"; document.cookie=n+"=1; expires=Thu, 1-1-2099 0:0:0; path=/;"; } } else if(document.getElementById){ menu = document.getElementById(n); flag = menu.style.display; if(flag == "block"){ menu.style.display = "none"; document.cookie=n+"=0; expires=Thu, 1-1-2099 0:0:0; path=/;"; } else{ menu.style.display = "block"; document.cookie=n+"=1; expires=Thu, 1-1-2099 0:0:0; path=/;"; } } } // --> </SCRIPT> </head> <body leftmargin="0" topmargin="0" class="bg1"> <table width="150" align="left" cellpadding="0" cellspacing="0"> <tr> <td height="5"></td> </tr> <tr> <td height="30"><a onclick="OpenCategory('folder5'); return false;" href="#">大分類</a></td> </tr> <tr > <td > <div class="folder5" id="folder5" style="DISPLAY: none"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr height="18"> <td height="18">L</td> <td><p><a href="test2.htm" target="_self" >メニュー１</a></p></td> </tr> <tr height="18"> <td height="18">L</td> <td><a href="test3.htm" target="_parent" >メニュー２</a></td> </tr> <tr height="18"> <td height="18">L</td> <td><a href="test4.htm" target="_parent" >メニュー３</a></td> </tr> <tr height="18"> <td height="18"> </td> <td> </td> </tr> </table> </div></td> </tr> </table> あいうえお </body> </html>
- ベストアンサー
- JavaScript
- ドロップダウンメニューの制作で
こんにちわ。 http://javascript.eweb-design.com/0701_pdm.html のサイトを参考に ほとんどソースを変えずドロップダウンメニューを制作しようとしていますが HTMLの定義を <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> にすると、上記のサイトのソースだとできないのです。 この定義にてどうしても制作したいのですが、どこを変えればいいのでしょうか？ 参考にし、以下のようにソースを書きました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // プルダウンメニュー flag = false; function pullDown01() { if(flag) ID01.style.display = "none"; else ID01.style.display = "block"; flag = !flag; } //--> </SCRIPT> <link href="css/test.css" rel="stylesheet" type="text/css"> </HEAD> <BODY bgcolor="#ffffff"> <TABLE border="0" cellspacing="0" cellpadding="0"> <TBODY> <TR> <TD> <DIV style="background-color:#ffcccc; width:160px"> <div class="test"><p><a href="javaScript:pullDown01()">テスト</a></p></div> </DIV> <DIV id="ID01" style="display:none;"><div class="test2"><p><a href="#">テスト</a></p></div></div> </TD> </TR> </TBODY> </TABLE> <BR><BR><BR><BR> <BR><BR> </BODY> </HTML>
- ベストアンサー
- JavaScript
- メニューボタン
ホームページ作成初心者です。 よろしくお願いします。 メニューボタンのことで質問させてください。 テーブルにて横方向にボタン画像を並べました。 ボタン画像はスタイルシートで指定しております(リンクテキストは別) <html> <head> <style type="text/css"><!-- table{ border-collapse:collapse; } .td1{ background-image:url(menu01.gif); padding:0px; border:0px solid #0000FF; background-color:#FFFFFF; width:90px; height:25px; font-size:12px; } --></style> </head> <body> <table> <tr> <td class="td1"><a href="">トップページ</a></td> <td class="td1"><a href="">次のページ</a></td> <td class="td1"><a href="">その次のページ</a></td> </tr> </table> </body> </html> このような場合で、リンクもしくはボタン画像にマウスポインタを 乗せると画像が入れ替わるというようなことは出来ますか？ もし、お分かりの方がいましたら教えて下さい。 宜しくお願いします。
- ベストアンサー
- HTML
- このHTXLソースが意味する動作を教えてください
文末に記したソースは、セキュリティで保護されたHPのログイン後のものです。 ▲▲▲▲▲▲と表示されているところを、クリックしたときの動作を表していると思うのですが、それは▲リンク先URL▲に飛ぶことだと理解し、ＶＢからＩＥをそのように操作しました。 ところが、「セッションが無効になりました」と表示され、▲▲▲▲▲▲をクリックしたときとは別の結果になりました。 どこを間違えているのかお教え下さい。 <td class="menu_item_h2"> <div style="width:200;display:;" id="AREA_FO_5_color"> <table width="100%" border="0" cellpadding="0" cellspacing="0" class="color_icon_h2" id="AREA_FO_5_hoverarea" onClick="return execOpen('FO',5,'','true','2','color','398F','h2');" > <tr> <td style="background-color:#EE" id="AREA_FO_5_BackGroundColor"> <font class="menu_font_h2" color="#33"> <a href="▲リンク先URL▲" target='main_frm' class="S398FO0008" id="AREA_FO_5_linkarea" onClick="return false;"> <font id="AREA_FO_5_TextColor" style="color:#33">▲▲▲▲▲▲</font></a></font></td> </tr> </table> </div> </td>
- 締切済み
- HTML
- jacascriptで作ったドロップダウンメニューが下の画像に隠れる
ドロップダウンメニューがＩＥ６だと ドロップしたメニューが下の画像の下に隠れてしまいます。 回避方法はありますでしょうか？ ソースは ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ <script type="text/javascript"><!-- function visiblemenu(to) { document.getElementById(to).style.display = "block"; } function hiddenmenu(to) { document.getElementById(to).style.display = "none"; } // --></script> ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ <div id="jumpmenu"> <table> <tr> <td><img src="image/11_b_e03_r1_c1.jpg" width="80" height="42"></td> <td> <div onMouseover="visiblemenu('menu01')" onMouseout="hiddenmenu('menu01')"> <a href="#"><img src="image/11_b_e03_r1_c2.jpg" width="117" height="42" id="n11_b_e03_r1_c2"></a><br> <div id="menu01" class="menubox"> <a href="#" class="link"><p class="menu">メニュー１</p></a> <a href="#" class="link"><p class="menu">メニュー１</p></a> </div> </div> </td> <td><img src="image/11_b_e03_r1_c3.jpg" width="23" height="42"></td> <td> <div onMouseover="visiblemenu('menu02')" onMouseout="hiddenmenu('menu02')"> <a href="#"><img src="image/11_b_e03_r1_c4.jpg" width="117" height="42" id="n11_b_e03_r1_c4"></a><br> <div id="menu02" class="menubox"> <a href="#" class="link"><p class="menu">メニュー１</p></a> <a href="#" class="link"><p class="menu">メニュー１</p></a> </div> ・ ・ ・ ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ ＣＳＳは ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ img {border:0; vartical-align:top;} #jumpmenu {width:1000;} #jumpmenu table {width:1000; border-collapse:collapse;} #jumpmenu table td {padding:0;} #jumpmenu table td p.menu { text-decoration :none; border :1px solid #ece9d8; padding :5px; margin :0; display :block; font-family :Verdana, Arial, Helvetica, sans-serif; font-size :14px; text-align :left; } #jumpmenu table td a:link p.menu {color:#fff; background:#b4c1cf;} #jumpmenu table td a:visited p.menu {color:#fff; background:#b4c1cf;} #jumpmenu table td a:hover p.menu {color:#333; background:#ccc;} #jumpmenu table td a:link.link {text-decoration :none;} #jumpmenu table td .menubox{ width :180px; position :absolute; border :1px solid #555; display :none; } ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ です。 よろしくお願いします。
- ベストアンサー
- JavaScript
- ※再度※どこが悪いのかみていただきたいです。
以前あまり回答が得られなかったので カテを変えて、再度お願いいたします。 下記のようなHPをフリーソフトの「alphaEDIT」で作りました。 一番外側のテーブルの上下を画面の上下いっぱいに引っ付けたいと思っています。 プレビューでこのソースのページを見るとちゃんと上下にくっついているのですが アップロードしてインターネット上で見ると上はくっついているのですが 下がくっついていないのです。 これがなぜなのかわかる方は、教えていただきたいです。 HP初心者なのでできるだけわかりやすく教えていただけるとうれしいです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"> <title></title> <style type="text/css"> <!-- BODY TD { FONT-SIZE: 10pt } A.menu:link,A.menu:visited { BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666666 1px solid; COLOR: #ffffff; PADDING-TOP: 12px; BORDER-BOTTOM: #666666 1px solid; HEIGHT: 40px; BACKGROUND-COLOR: pink; TEXT-DECORATION: none } A.menu:hover,A.menu:active { BORDER-RIGHT: #ffffff 1px ridge; PADDING-RIGHT: 15px; BORDER-TOP: #ffffff 1px ridge; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ffffff 1px ridge; COLOR: gray; PADDING-TOP: 12px; BORDER-BOTTOM: #ffffff 1px ridge; HEIGHT: 40px; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none } table#mainTable{ border-collapse:collapse; } td.borderAll,td.borderNoTop,td.borderNoBottom{ border:solid 1px #c0c0c0; } td.borderNoTop{ border-top:0px; } td.borderNoBottom{ border-bottom:0px; } --> </style> </head> <body bottommargin="0" background="sozai/kabegami.gif" topmargin="0"> <table height="956" width="730" align="center" id="mainTable" style="WIDTH: 730px; HEIGHT: 956px"> <tr> <td colspan="2" class="borderNoTop" bgcolor="#ffffff" height="20" ></td> </tr> <tr> <td colspan="2" height="120" class="borderAll" background="sozai/title_back.gif"> <p align="center"><font color="#ff0000" size="5"><strong> </strong></font> </p></td> </tr> <tr> <td class="borderAll" colspan="2" valign="top" align="left" bgcolor="#ffffff"><br> <table cellspacing="0" cellpadding="0" width="155" align="left" border="0"> <tr> <td bgcolor="#ffffff"> <table style="MARGIN-TOP: -2px; FONT-WEIGHT: bold; WIDTH: 146px; FONT-FAMILY: 'mspゴシック'; HEIGHT: 241px" cellspacing="3" cellpadding="0" width="146" align="center" border="0"> <tr> <td><a class="menu" href="index.html" >Ｔｏｐ</font></a></td> </tr> <tr> <td><a class="menu" href="1_news.html" >Ｎｅｗｓ</font></a></td> </tr> <tr> <td><a class="menu" href="2_sakuhin.html" >作品集</font></a></td> </tr> <tr> <td><a class="menu" href="4_kyoushitsu.html" >お教室情報</a></td> </tr> <tr> <td style="BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 15px; PADDING-BOTTOM: 10px; BORDER-LEFT: #666666 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #666666 1px solid" align="center"><font color="gray">Ｓｈｏｐｐｉｎｇ</font></td> </tr> <tr> <td><a class="menu" href="6_link.html" >お友達サイト</a></td> </tr> <tr> <td><a class="menu" href="7_mail.html" >Ｍａｉｌ</a></td> </tr> </table></td></tr></table> <table style="WIDTH: 560px; HEIGHT: 748px" cellspacing="1" cellpadding="20" width="560" align="left" bgcolor="#c0c0c0" border="0"> <tr> <td valign="top" align="left" bgcolor="#ffffff"> </td></tr></table> </td></tr> <tr> <td class="borderAll" colspan="2" bgcolor="#ffffff" height="20"> <p align="center"> <font color="#808080">Copyright © 2005-2007 princess-ichigo, All rights reserved.</font></font></p></td> </tr> <tr> <td colspan="2" class="borderNoBottom" bgcolor="#ffffff" height="20" > </td> </tr> </table> </body></html>
- 締切済み
- ホームページ作成ソフト
- 階層式メニューをtableタグ内に
初めてJSPとJavaScriptをいじります。 階層メニューを作りたいのですが、 <table border="1" cellspacing="0" cellpadding="0"> <tr> <td>見出し１</td> <td>見出し２</td> <td>見出し３</td> </tr> <% for(int i = 0; i < 5; i++){ %> <tr> <td colspan="3">▼階層１</td> </tr> <tr> <td colspan="3">▽階層２</td> </tr> <tr> <td>項目１</td> <td>項目２</td> <td>項目３</td> </tr> <% } %> </table> このようなテーブルを作成して、 ▼階層１をクリックしたら▽階層２以下が表示・非表示されるように、 ▽階層２をクリックしたら項目１～項目３が表示・非表示されるようにしたいのです。 http://phpjavascriptroom.com/?t=js&p=tips_node のサイトを参考にしてみましたが、 <div id="open_1" class="child" style="display:none;">をどの位置に入れても階層メニューがうまく動きません。 アイコンは変わるけど下の階層が開閉しなかったり、全く動かなくなったりします。 どうしたらうまく動くようになるのでしょうか？参考になるサイト等ありましたら教えて下さい。
- ベストアンサー
- JavaScript
お礼
ありがとうございます！できました。 色々教えていただきありがとうございます。 ちなみに、メニューの位置を変えて表示するには どうしたらよいですか？ また図々しく質問してしまっていますがお時間ございましたら 宜しくお願いします。