• 締切済み

ブラウザでjavascriptのプルダウンメニューが効かない！？

初めての症状なのですが、、 グローバルメニューの部分でプルダウンメニューを使っているサイト（プルダウン部分はjavascriptを使っています）をサーバーにアップしたのですが、 サーバー上で、プルダウンメニューがでてきません。作動しません。。 ローカルでは、firefox, IE, safari, 全て動作確認済みなのですが、、 もちろん、jsファイルもアップしてあります。 他のポップアップウィンドウなどで使用しているjavascriptは正常に動いてるようなのですが、、、 このような現象ありえるのでしょうか？ どなたかお分かりになる方がいらっしゃいましたら、ご教授願えないでしょうか？宜しくお願い致します。 ちなみにプルダウン部分のhtmlです。 javascriptは外部から読み込むようにしてます。 <!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=Shift_JIS" /> <meta name="keywords" content="Australia, restaurant"> <meta name="description" content="ーー料理" /> <title>Salt | Access</title> <link href="css/import.css" rel="stylesheet" type="text/css" media="all" /> <script src="js/SpryMenuBar.js" type="text/javascript"></script> <script type="text/javascript"><!-- window.onload = function(){ new Spry.Widget.MenuBar("MenuBar1"); } // --></script> </head> <body> <div id="bg2"> <div id="wrapper"> <div id="header"> <div id="h1"><a href="index.html"><img src="img/img_logo.jpg" alt="Salt" width="89" height="83" border="0" /></a></div> <div id="navi" lang="en"> <ul id="MenuBar1" class="MenuBarHorizontal clearfix"> <li id="orange_menu"></li> <li class="first"><a href="index.html" id="first_hover" class="MenuBarItemSubmenu">Top</a></li> <li class="first"><a href="concept.html" id="first_hover" class="MenuBarItemSubmenu">Concept</a></li> <li class="first"><a href="food.html" id="first_hover" class="MenuBarItemSubmenu">Food</a> <ul> <li><a href="lunch3500.html">Lunch</a> <ul> <li><a href="lunch3500.html">Lunch Course 3500</a></li> <li><a href="food.html">Lunch Course 5000</a></li> </ul> </li> <li><a href="raw.html">Dinner</a> <ul> <li><a href="raw.html">Entrees</a></li> <li><a href="main.html">Mains</a></li> <li><a href="vegetable.html">Vegetable Menu</a></li> <li><a href="degustation.html">Degustation</a></li> <li><a href="desserts.html">Desserts and Cafe</a></li> </ul> </li> <li><a href="holiday.html">Holiday Course</a></li> </ul> </li> <li class="first"><a href="wine.html" id="first_hover" class="MenuBarItemSubmenu">Wine</a> <ul> <li><a href="wine.html" class="MenuBarItemSubmenu">Glass</a></li> <li><a href="bubbly_pink.html">Bubbly and PINK</a></li> <li><a href="maritime_white.html">White</a> <ul> <li><a href="maritime_white.html">Maritime</a></li> <li><a href="mediterranean_white.html">Mediterranean</a></li> <li><a href="Altitude_white.html">Altitude</a></li> </ul> </li> <li><a href="maritime_red.html">Red</a> <ul> <li><a href="maritime_red.html">Maritime</a></li> <li><a href="distinctively_red.html">Distinctively Cool</a></li> <li><a href="old_vine.html">Old Vine</a></li> </ul> </li> <li><a href="stickies.html">Stickies</a></li> </ul> <li class="first"><a href="spaces.html" id="first_hover" class="MenuBarItemSubmenu">Spaces</a></li> <li class="first"><a href="access.html" id="first_hover" class="MenuBarItemSubmenu">Access</a></li> <li class="first"><a href="http://www.sweet-w.com/space/salt.html" id="first_hover" class="MenuBarItemSubmenu">Wedding</a></li> <li id="menu_right"></li> </ul> </div> 以下続く。。。

みんなの回答

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

アップする際に文字コードが変換されているとか・・・ とりあえずfirefoxで確認できるならfirebugでデバッグしてみては？

blueman918
質問者

補足

お答えありがとうございます！ firebugなんてものがあるのですね。さっそくやってみます。 でもどうやら、 ＞<script type="text/javascript"><!-- window.onload = function(){ new Spry.Widget.MenuBar("MenuBar1"); } // --></script> ここの部分を読み込んでないようで、 URLのアドレスのところで、直打ちしてみたのですが、 http://----- /js/top.js などは、そこに到達できるのですが、 http://-----/js/SpryMenuBar.js これがプルダウンのプログラムなのですが、これを直打ちしたところ、 ロリポップを使っているのすが、４０３エラーになってしまったので、 これを読み込んでないようなのです。。 もう少し検証してみます。

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

関連するQ&A

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

    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%; }

  • CSSのプルダウンメニュー

    menu1とmenu2の挙動について疑問があります。 添付画像をご覧ください。 menu2からsub4-1を選択している状態です。 この時、menu2の背景色が赤に戻らないのは仕様でしょうか？ それとも何か間違っているのでしょうか？ 背景を画像にしても同じ結果になります。 -------------------------------------------- ul#menu li{ float:left; list-style-type:none; text-align:center; } ul#menu ul li{ clear:both; } ul#menu li a,.menu1,.menu2{ display:block; width:200px; height:50px; line-height:50px; text-decoration:none; background:#ff0000; } ul#menu li a:hover,.menu1:hover,.menu2:hover{ background:#ffcc00; } ul#menu ul{ display:none; } ul#menu li:hover > ul{ display:block; position:absolute; } ul#menu ul ul{ margin:-50px 0 0 200px; } --------------------- <ul id="menu"> <li class="menu1">menu1</a> <ul> <li><a href="#">sub1</a> <ul> <li><a href="#">sub1-1</a></li> <li><a href="#">sub1-2</a></li> </ul> </li> <li><a href="#">sub2</a></li> </ul> </li> <li class="menu2">menu2</a> <ul> <li><a href="#">sub3</a></li> <li><a href="#">sub4</a> <ul> <li><a href="#">sub4-1</a></li> <li><a href="#">sub4-2</a></li> </ul> </li> </ul> </li> </ul> ------------------ お分かりになる方よろしくお願いします。

    • 締切済み
    • CSS
  • Javascriptでプルダウンメニューを作りましたが関数化できません

    <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> function foldmenu(i){ var i; for(j=1;j<=5;j++){ if(i==j) $('#sc'+j).toggle('normal'); else $('#sc'+j).hide(); } $(function(i){ $('#c'+i).click(function(){ for(j=1;j<=5;j++){ if(i==j) $('#sc'+j).toggle('normal'); else $('#sc'+j).hide(); } }); }); } </script> <div id="c1" onClick="foldmenu('1')">1</div> <ul id="sc1"> <li><a href="#">入力画面1-1</a></li> <li><a href="#">入力画面1-1</a></li> </ul> <div id="c2" onClick="foldmenu('2')">2</div> <ul id="sc2"> <li><a href="#">入力画面2-1</a></li> <li><a href="#">入力画面2-2</a></li> </ul> <div id="c3" onClick="foldmenu('3')">3</div> <ul id="sc3"> <li><a href="#">入力画面3-1</a></li> <li><a href="#">入力画面3-2</a></li> </ul> <div id="c4" onClick="foldmenu('4')">4</div> <ul id="sc4"> <li><a href="#">入力画面4-1</a></li> <li><a href="#">入力画面4-2</a></li> </ul> <div id="c5" onClick="foldmenu('5')">5</div> <ul id="sc5"> <li><a href="#">入力画面5-1</a></li> <li><a href="#">入力画面5-2</a></li> </ul> と関数化しましたがうまく動きません。 初期状態では1の部分が開く。 それ以降はクリックした部分が開き開いていた部分は閉じるという感じにしたいです。 縦長のプルダウンメニューです。 たてに1から5が並んでいて、1をクリックすると１と2の間に1の子カテゴリーが表示されます。 困っています。教えてください。

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

    【質問内容】 画像のすぐ上にドロップダウンメニューを設置したいのですが、 マウスオンすると下部の画像の表示位置が下がってしまいます。 この画像表示位置を動かないようにするにはどうすればいいのでしょうか？ 【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; } ご教授お願いします。

  • JavaScriptで折りたたみメニュー

    現在、JavaScriptを利用して折りたたみメニューを作成しました。 2つの項目の下にそれぞれ下層メニューがあり、各項目をクリックするごとに下層メニューが開いたり閉じたりできる状態なのですが、 このどちらかの項目をクリックしたとき、その項目の下層メニューは表示されるが、もう一方の項目の下層メニューは閉じる。というようにするにはどうすればよいでしょうか？（両方の下層メニューが同時に開いている状態が無いように。） よろしくお願いいたします。 【XHTML】 <ul> <li><a href="javascript:exMenu('treeMenu1')">項目1</a> <ul id="treeMenu1" style="display:none"> <li><a href="#">項目1-1</a></li> <li><a href="#">項目1-2</a></li> <li><a href="#">項目1-3</a></li> </ul> </li> <li><a href="javascript:exMenu('treeMenu2')">項目2</a> <ul id="treeMenu2" style="display:none"> <li><a href="#">項目2-1</a></li> <li><a href="#">項目2-2</a></li> <li><a href="#">項目2-3</a></li> </ul> </li> </ul> 【JavaScript】 function exMenu(tName) { tMenu = document.getElementById(tName).style; if (tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; }

  • プルダウン時の最上部メニューの画像置換について

    お世話になります。サイト製作初心者のpeace193と申します。 以下のサイトを参考に自分なりにカスタマイズしました。本来はテキストであるタグ最上部のli内はクラスで画像に変え、ホバー時にCSSで個々に他の画像に置き換わるようにしました。 http://www.leigeber.com/2008/11/drop-down-menu/ そこで質問なのですが、プルダウンした時に、最上部のメニューを個別にホバーした時の画像のままにしたいのですが、このサンプルを生かす場合、どのようなCSS、またはjavascriptが必要でしょうか？（例えば、menu02-01-01やmenu03-01にホバーしたとき、それぞれmenu02のホバー画像を維持、menu03のホバー画像を維持。） 参考サイト上では ul.menu .menulink:hover, ul.menu .menuhover {background: url(/images/header_over.gif)} で変えているようですが、私はメニュー毎に置き換わる画像を変えたいのです。 お忙しいところ恐縮ですが、ご教示いただけると幸いです。 <ul class="menu" id="menu"> <li><a href="#" class="menu01"></a></li> <li><a href="#" class="menu02"></a> <ul> <li><a href="#" class="sub">menu02-01</a> <ul> <li><a href="#">menu02-01-01</a></li> <li><a href="#">menu02-01-02</a></li> </ul> <li><a href="#">menu02-02</a></li> <li><a href="#">menu02-03</a></li> </ul> </li> <li><a href="#" class="menu03"></a> <ul> <li><a href="#">menu03-01</a></li> <li><a href="#">menu03-02</a></li> <li><a href="#">menu03-03</a></li> </ul> </li> <li><a href="#" class="menu04"></a></li> </ul>

  • jQuery多層式アコーディオンメニューについて。

    javascript勉強中です。 jQueryを使っての多層式アコーディオンメニューですが、現在hoverでメニューが開く仕様になっています。 これをclickすることで開くようにするにはどうしたらいいか、アドバイスいただければ幸いです。 <!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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('ul.main li').hover(function(){ $('>ul:not(:animated)',this).slideDown('fast') },function(){ $('>ul',this).slideUp('fast'); }); }); </script> <style> ul.sub, ul.sub ul.sub{display:none;} </style> </head> <body> <ul class="main clearfix"> <li><a href="#">メニュー1</a> <ul class="sub"> <li><a href="#">サブ1-1</a> <ul class="sub"> <li><a href="#">サブ1A-1</a></li> </ul> </li> <li><a href="#">サブ1-2</a></li> </ul> </li> <li><a href="#">メニュー2</a> <ul class="sub"> <li><a href="#">サブ1-1</a> <ul class="sub"> <li><a href="#">サブ1A-1</a></li> </ul> </li> <li><a href="#">サブ1-2</a></li> </ul> </li> </ul> </body> </html> 何卒宜しくお願い申し上げます。

  • 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;}

  • jQuery プルダウンメニュー

    プルダウンメニューの一部で行き詰っています。 メニュー１のサブメニューが開いている状態で、メニュー２をクリックした時 メニュー１のサブメニューが閉じるようにする(その逆パターンも含む)。 サブメニューにカーソルがある時、メニューはhoverさせないようにする。 ▼html----------------------------------------- <ul id="gNav"> <li>メニュー1 <ul> <li><a href="">サブメニュー1-1</a></li> </ul> </li> <li>メニュー2 <ul> <li><a href="">サブメニュー2-1</a></li> <li>サブメニュー2-2 <ul> <li><a href="">サブメニュー2-2-1</a></li> <li><a href="">サブメニュー2-2-2</a></li> <li><a href="">サブメニュー2-2-3</a></li> </ul> </li> </ul> </li> <li><a href="">メニュー3</a></li> </ul> ▼jQuery----------------------------------------- $(function(){ $("#gNav > li").click(function(){ $(this).children("ul").toggle(); }); $("#gNav > li > ul > li").mouseenter(function(){ $(this).children("ul").show(); }).mouseleave(function(){ $(this).children("ul").hide(); }); $("#gNav > li").hover(function(){ $(this).css("background-color","#ff9900"); },function(){ $(this).css("background-color","#ffcc00"); }); $("#gNav > li > ul > li").hover(function(){ $(this).css("background-color","#99cc66"); },function(){ $(this).css("background-color","#669933"); }); $("#gNav > li > ul >li > ul >li").hover(function(){ $(this).css("background-color","#dddddd"); },function(){ $(this).css("background-color","#eeeeee"); }); }); 宜しくお願いします。

  • cssとjavascriptでプルダウンメニュー

    お世話になります。 いろいろとサンプルを試し、ハマっています・・・。どなたか助けてください！ 今下記のようなソースでメニューを作っています。 <ul id="globalnavi"> <li id="a"><a href="#">a</a></li> <li id="b"><a href="#">b</a> <ul id="subnav"> <li><a href="#">b-1</a></li> <li><a href="#">b-2</a></li> <li><a href="#">b-3</a></li> </ul> </li> <li id="c"><a href="#">c</a></li> </ul> このソースで、親階層のメニューは画像、submenuはテキストで表現したいのですが、FFやIE7、IE6、safariに使える方法でなにか簡単なものありましたら、教えていただきたいです。 よろしくお願い致します！

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する