• ベストアンサー

プルダウンメニューが設置できません

http://miyakekobo.fc2web.com/contents/kowaza032.html ↑このページ内で配布されているプルダウンメニューを設置したいのですが…。下記がそのソースです。 <DIV id="固有のID" style="width:800;height:36;overflow:hidden;font-size:12px;"> メニュー本体 </DIV>  「クリックでメニューを開く」は下記<DIV>で、上記<DIV>と入れ子になっています。 <DIV style="width:200;padding:10;border:1px solid #999999;text-align:center;cursor:pointer;" onclick="zoom_on();"> クリックでメニューを開く </DIV>  JavaScript部分 <SCRIPT language="JavaScript"> <!-- var max = 開いた時の縦幅; var min = 閉じた時の縦幅; var i = min; function zoom_on(){tid=setInterval("kakudai();",10);} function zoom_off(){tid=setInterval("syukusyou();",10);} function kakudai(){ i+=5;if(imin-1){document.getElementById("固有のID").style.height=i+"px";}else{clearInterval(tid);} } //--> </SCRIPT> をホームページ作成ソフトのホームページビルダーで入力し、 プレビュー画面で「クリックでメニューを開く」をクリックすると、 ランタイムエラーが発生しました。 デバッグしますか? 行:35 エラー:'imin'は宣言されていません。 と、表示されます。 どのように設置すればよいのでしょうか。 何方かご教授ください。 よろしくお願いいたします。

noname#115684
noname#115684

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

  • ベストアンサー
  • project-a
  • ベストアンサー率54% (107/195)
回答No.3

再び "#2" です。 サンプルを右クリックして「ソースを表示」すると、以下のようになっています。 ----------------------------------------------------------- function kakudai(){ i+=5;if(i<max){document.getElementById("menu1").style.height=i+"px";}else{clearInterval(tid);} } function syukusyou(){ i-=5;if(i>min-1){document.getElementById("menu1").style.height=i+"px";}else{clearInterval(tid);} } ----------------------------------------------------------- "imin" の "i" と "min" の間に、">" を入れてみてはいかがでしょうか? ※実際のソースと説明文が食い違っているような・・・  サンプルのソースを表示してみれば、使い方が分かるかと思います。

noname#115684
質問者

お礼

回答ありがとうございます! "サンプルを右クリックして「ソースを表示する」" こんなに便利な機能があったのですね。 実際にソースを見ることで理解できました。 さらにご指摘の通り、"imin" に問題があることも解りました。 的確なアドバイスを本当にありがとうございました。

その他の回答 (2)

  • project-a
  • ベストアンサー率54% (107/195)
回答No.2

変数が "min" で定義されているのに、 i+=5;if(imin-1){ ・・・・ では、"imin" となっています。 "imin" を "min" にしてみてはどうでしょうか。

  • xtort
  • ベストアンサー率44% (32/72)
回答No.1

ページの35行目には何が入力されていますか? おそらくDIV内の項目が間違っているのだと思います。

noname#115684
質問者

お礼

回答ありがとうございます! エラー:'imin'は宣言されていません。 の通り、'imin'がいけなかったようです。 'min'に修正することで解決できました。 本当にありがとうございました。

関連するQ&A

  • div要素を滑らかに動かしたい

    <div id="div1" class="div1" onclick="init();">move box</div> 上記のようなdiv要素を、画面右方向へ滑らかに 動かしたいのですが、どのようなscriptを記述すればよいでしょうか? setIntervalを使って0.5秒毎に1ピクセル右に移動、 というのを期待して以下のようなscriptを書いてみたのですが、 うまく動作しませんでした。 function init(){ setInterval(moveY, 500); } function moveY(){ var obj = document.getElementById("div1"); obj.style.left = obj.style.left+1 + "px"; }

  • メニュー3つとも個々にドロップして移動したいのですが

    メニュー3つとも個々にドロップして移動したいのですが、どのように すれば良いのでしょうか。 お願いします。 <html> <head> <title>ドラッグして画像を移動する</title> <script type="text/javascript"><!-- //2つ適応 window.onload=function(){ flag = false; offx = 80; offy = 100; document.getElementById("menu1").onmousedown= function dragOn(){ flag = true;} window.document.onmousemove = dragImg; window.document.onmouseup = dragOff; function dragOff(){ flag = false; } function dragImg(){ if (!flag) return; document.getElementById("menu1").style.top = event.y-offx; document.getElementById("menu1").style.left = event.x-offy; return false;} } // --></script> </head> <body> <div id="menu1" style="background-color:red; position:absolute; width:120px;height:150px;">メニュー1</div> <div id="menu2" style="background-color:green; position:absolute;top:200px;width:120px;height:150px;">メニュー2</div> <div id="menu3" style="background-color:blue; position:absolute;top:400px;width:120px;height:150px;">メニュー3</div> </body> </html>

  • プルダウンメニューについてです。

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

  • プルダウンメニューについて

    ジャバスクリプトが全くの初心者です。 プルダウンメニューをつくりたくて 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> とありますが、 ボタンが二箇所ある場合はジャバスクリプトの部分はどのように書けば良いでしょうか ? <SCRIPT language="JavaScript"> <!-- // プルダウンメニュー flag = false; function pullDown() { if(flag) ID1.style.visibility = "hidden"; else ID1.style.visibility = "visible"; flag = !flag; flag = false; function pullDown() { if(flag) ID2.style.visibility = "hidden"; else ID2.style.visibility = "visible"; flag = !flag; } //--> (IDの部分を変更しています。) こう書いてみましたがダメでした。 とても困っています、どなたか助けてください。よろしくお願いいたします。

  • 1ページ内に 複数のタブボックスを設置

    1ページ内に 複数のタブボックスを設置するために、下記のようなコードを記載しました。 おそらく最後のToggleをつかってタブを切り替えるところの記載方法がよくわからないため動かず困っています。すいませんがだれかご教授ください。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script> $(function() { /* 変数i に 1を代入 */ var i = 1; /* #list li を一つずつ処理 */ $('.tab_menu').each(function(){ /* #list li に class で no● を設定 ●には、i++ で変数iに1を加算したものが入ります サンプルでは、1から10 です */ $(this).attr('id','tabMenu' + (i++)); /* ↑は、$(this).addClass('no' + (i++)); でもOK */ }); var i = 1; /* #list li を一つずつ処理 */ $('.tab_box').each(function(){ /* #list li に class で no● を設定 ●には、i++ で変数iに1を加算したものが入ります サンプルでは、1から10 です */ $(this).attr('id','tabBoxes' + (i++)); /* ↑は、$(this).addClass('no' + (i++)); でもOK */ }); $("#tabMenu"+(i)+" li a").on("click", function() { $("#tabBoxes"+(i)+" div").hide(); $($(this).attr("href")).fadeToggle(); }); return false; }); </script> <style> .tab_menu ul{ width:600px; } .tab_menu li{ float:left; } .tab_menu li a{ display:block; width:198px; height:48px; line-height:50px; text-align:center; border:#ccc 1px solid; } #tabBox1,#tabBox2,#tabBox3{ width:598px; height:300px; border:#ccc 1px solid; } #tabBox1{ background:#FCF; } #tabBox2{ background:#FFC; display:none; } #tabBox3{ background:#ccc; display:none; } </style> </head> <body> <ul class="tab_menu"> <li><a href="#tabBox1">タブメニュー1</a></li> <li><a href="#tabBox2">タブメニュー2</a></li> <li><a href="#tabBox3">タブメニュー3</a></li> </ul> <div id="tabBoxes" class="tab_box"> <div id="tabBox1">タブボックス1</div> <div id="tabBox2">タブボックス2</div> <div id="tabBox3">タブボックス3</div> </div> <ul class="tab_menu"> <li><a href="#tabBox1">タブメニュー1</a></li> <li><a href="#tabBox2">タブメニュー2</a></li> <li><a href="#tabBox3">タブメニュー3</a></li> </ul> <div id="tabBoxes" class="tab_box"> <div id="tabBox1">タブボックス1</div> <div id="tabBox2">タブボックス2</div> <div id="tabBox3">タブボックス3</div> </div> <ul class="tab_menu"> <li><a href="#tabBox1">タブメニュー1</a></li> <li><a href="#tabBox2">タブメニュー2</a></li> <li><a href="#tabBox3">タブメニュー3</a></li> </ul> <div id="tabBoxes" class="tab_box"> <div id="tabBox1">タブボックス1</div> <div id="tabBox2">タブボックス2</div> <div id="tabBox3">タブボックス3</div> </div> </body> </html>

  • jqueryでのプルダウンメニューについて

    jqueryでのプルダウンメニューについて こんにちは。 現在私はWEBサイトを製作中です。 メインメニューにプルダウンをつけたいのですが、うまくいきません。 メニューはロールオーバーでの表示(CSSでやってます)です。 slideDownを使用しているのですが、 マウスオーバー時にslidDownで表示された、 サブメニューの背景が、上の要素の背景になってしまいます。 つまり、下のコードでいくとid="sub"の背景がそのまま clas="sub"の"li"要素の背景になってしまうということです。 何か対策はありますでしょうか? html <div id="head"> <ul id="globalnavi"> <li id="gh"><a href=".">メニュー</a> <ul class="sub"> <li><a href="">サブメニュー</a></li> </ul> </li> </ul> </div> <div id="main"> </div> jquery $(function(){ $("ul.sub").hide(); $("ul#globalnavi>li").hover(function(){ $("ul:not(:animated)", this).slideDown();}, function(){$("ul.sub",this).slideUp();}); }); CSS #globalnavi a{ background-image : url(../img/navi.png); background-repeat : no-repeat; display : block; width : 160px; height : 36px; color : #333333; text-decoration : none; line-height : 36px; } #header #globalnavi li { list-style-type : none; float : left; width : 160px; position : relativ; } #header #globalnavi { clear : both; width : 960px; line-height : 36px; overflow : hidden; position : relative; text-align : center; display : block; } ul,li{ margin:0; padding:0; } .sub li{ float : none; background-color : #FFF; } #gh a{ background-position :0 0; } #gh a:hover{ background-position :0 -36px; } ロールオーバー自体はうまくいっています。 他にプルダウンの方法あるよ、などありましたら教えてください。 よろしくお願いします。

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

    スタイルシート・スタンダード・デザインガイドと言う本を参考にプルダウンメニューを作っていますがうまくいきません。 サブメニューをメインメニューの真横にだすにはどうすればいいでしょう。 ■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">イベント1</a> <span>|</span> <a href="event/2.html"><img src="images/submenu.gif" width="8" height="12">イベント2</a> <span>|</span> <a href="event/3.html"><img src="images/submenu.gif" width="8" height="12">イベント3</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">メインメニュ1</a> <div class="submenu" id="submenu2"> <a href="mainmenu1/index.html"><img src="images/submenu.gif" width="8" height="12">サブメニュ1</a> <span>|</span> <a href="mainmenu1/submenu2.html"><img src="images/submenu.gif" width="8" height="12">さぶめにゅ2</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"; }

  • プルダウンメニューの設置について

    【質問内容】 画像のすぐ上にドロップダウンメニューを設置したいのですが、 マウスオンすると下部の画像の表示位置が下がってしまいます。 この画像表示位置を動かないようにするにはどうすればいいのでしょうか? 【html】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio … <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <link href="index.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="navi_continer"> <div id="navi"> <ul> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#">メニュー 1</a> <ul class="sub"> <li><a href="#">サブメニュー 1</a></li> <li><a href="#">サブメニュー 2</a></li> </ul> </li> <img src="shingo/images/1.TOP.jpg" width="150" height="150" alt="#" /> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#">メニュー 2</a> <ul class="sub"> <li><a href="#">サブメニュー 1</a></li> <li><a href="#">サブメニュー 2</a></li> <li><a href="#">サブメニュー 3</a></li> <li><a href="#">サブメニュー 4</a></li> </ul> </li> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#">メニュー 3</a> <ul class="sub"> <li><a href="#">サブメニュー 1</a></li> <li><a href="#">サブメニュー 2</a></li> <li><a href="#">サブメニュー 3</a></li> </ul> </li> </ul> </div> </div> </body> </html> 【css】 @charset "utf-8"; #navi_continer { position: relative; z-index:100; width: 300px; height:30px; } #navi { position: absolute; top: 10px; left: 10px; width: 150px; } #navi ul { margin: 0; padding: 0; list-style: none; } #navi li { color: #fffff; float: left; width: 100px; margin: 0; } #navi li a { font-size: 14px; color: #ffffff; display: block; width: 100%; padding: 3px 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 { float: none; } #navi ul.sub li a { color: #666666; background: none; font-size: 12px; font-weight: normal; padding: 3px 0; border-top:1px 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:1px solid #000099; } #navi li.navi_menu_on{ border:1px solid #000099; } ご教授お願いします。

  • もう一度onclickを利用した伸縮メニューの作成方法を教えてください

    もう一度onclickを利用した伸縮メニューの作成方法を教えてください。 以前"onclickを利用した伸縮メニューの作成方法を教えてください。"と質問に教えていただき思ったように動きとても感謝しているですが、自分の作成しているHPにソースを書き込んでみたら伸縮メニューが開いたまま閉じませんでした。たぶん自分のページに、教えていただいたソース以外に他のサンプルから引用したスクリプトがあるので上手く行かないのではないかと思ったので再度質問させてください。 作成したページのソースが長くなるので全部書き込めないのですが、おおまかには、メインメニューが5つありロールオーバー効果を持たせています。その各メニューはonmouseoverとoutでポップアップメニュを表示させるようにしています。 作成しているソフトはホームページビルバーV14です。 別なサンプルから引用したスクリプトは、 <SCRIPT language="JavaScript"> <!-- var tid,pm_no=""; function pm_op(sel){ if(pm_no!=""&&pm_no!=document.getElementById(sel)){pm_no.style.overflow='hidden';} pm_no=document.getElementById(sel); clearTimeout(tid); pm_no.style.overflow='visible'; } function pm_cl(sel){ pm_no=document.getElementById(sel); clearTimeout(tid); tid=setTimeout("pm_no.style.overflow='hidden';",500); } //--> </SCRIPT> ソースは、 <DIV id="cont" align="center"> <TABLE width="870" border="0" cellspacing="0" cellpadding="0"> <TBODY> <TR> <TD align="center"> <CENTER> <DIV style="width : 850px;position : relative;top : 0px;left : 0px;"> <DIV class="menu" style="left:0;" id="f1" onmouseover="pm_op(this.id);" onmouseout="pm_cl(this.id);"> <CENTER> <DIV style="text-align : center;border-style : none;width : 170px;height : 32px;bottom : auto;"><A href="#" id="HPB_ROLLOVER4" name="HPB_ROLLOVER4" onmouseout="HpbImgSwap('HPB_ROLLOVER4', 'image/n_image1.gif');" onmouseover="HpbImgSwap('HPB_ROLLOVER4', 'image/m_image1.gif');"><IMG src="image/n_image1.gif" width="170" height="32" border="0" name="HPB_ROLLOVER4"></A></DIV> <TABLE style="font-size:12px;"> <TR> . . . </TBODY> </TABLE> でid="f1"から"f5"で5つのメニューが動くようにしています。 先日教えていただいたソースと現在自分の作成したページのソースは別々なページとしては動くのですが同一ページに記述してプレビューすると先日教えていただいた"onclick"は開いたままで、動作的には"onclick"のメニューをマウスでクリックすると開いたままのメニューが一度閉じて再度開く動作をしてしまいます。 CSSがまだまだ未熟でわかり難いところも多々ありますが、わかればで結構です。 どなたか教えてください。

  • プルダウンのメニュー表示について

    JavaScriptでプルダウンメニューを表示する処理を作っているのですが、どうしても求める結果が得られずに困っています。 ○メニュー1 ―――――――――――――――――― ○メニュー2 ―――――――――――――――――― 上記の画面イメージの「メニュー1」をクリックした際に、JavaScriptで下記のようにメニューを表示させたいのです。 ○メニュー1  ●メニュー1-1  ●メニュー1-2  ●メニュー1-3  ●メニュー1-4 ―――――――――――――――――― ○メニュー2 ―――――――――――――――――― ところが、「○メニュー1」のすぐ下にborderが表示されてしまったり、●印のメニューの横幅が正確に伸びません。 こういうときはやはり、ulやdlなどを使わないで大人しくtableを使うべきでしょうか? 何か良い方法がありましたら、ぜひともアドバイスを頂けないでしょうか? 以下がコードの一部です。 [html] <div class="tree">   <a href="javascript:" id="test_01" onclick="getID(this);">○メニュー1</a>   <div class="tree_sub">     <ul>       <li class="left">●メニュー1-1</li>       <li>●メニュー1-2</li>     </ul>     <ul>       <li class="left">●メニュー1-3</li>       <li>●メニュー1-4</li>     </ul>   </div> </div> <div class="tree">   <a href="#">○メニュー2</a> </div> [css] div.tree {   border-bottom:1px solid #000000;   width:365px; } div.tree_sub ul li {   float:left; } div.tree_sub ul li.left {   width:50%; }

専門家に質問してみよう