• 締切済み

Navimenuについて

NaviMenuなのですが、XPだとうまく表示されるのですが、それ以外だと駄目みたいなのです。 <STYLE TYPE="text/css"> <!--  A:link { color:Black;}  :visited { color:Black;}  A:hover { background-color:Black;      color:white ;}  BODY { background-color:black; }  .title { position:relative;      text-align:center;      font:bold 50pt Times ;}     #NaviMenu { position:absolute;       width:150px;       border:DimGray 0.5em ridge;       background-color:GainsBoro;       z-index:1;       visibility:hidden ;} --> </STYLE> <SCRIPT LANGUAGE="JavaScript">  var flag = true;  unction Menu() {   if(flag) {    NaviMenu.style.posLeft = event.clientX;    NaviMenu.style.posTop = event.clientY;    NaviMenu.style.visibility = "visible";    flag = false;   }  else {    NaviMenu.style.visibility = "hidden";    flag = true;     }  }  document.ondblclick = Menu; </SCRIPT> -------------------------------------------------- <DIV id="NaviMenu" style="position:absolute;width:150px;z-index : 5;visibility:hidden;"> <SPAN STYLE="width:150px;background-color:Silver;text-align:center;color:Black;font:14pt Times new roman">Navigate Menu</SPAN><BR> メニュー1 メニュー2 メニュー3 メニュー4 メニュー5 </DIV> どのようにすれば、Winユーザー全てに対応出来るのでしょうか? (林檎USERの方、ごめんなさい) アドバイス宜しくお願いいたします。

  • n--n
  • お礼率58% (24/41)
  • CSS
  • 回答数2
  • ありがとう数1

みんなの回答

  • d-3
  • ベストアンサー率42% (16/38)
回答No.2

内容から推察すると、"画面のどこかをダブルクリックするとメニューが表示される"という感じのものですね。XPだとどのように動作して、それ以外だとどう不具合があるのかをもう少し詳しく教えてください。 XPでも、ブラウザのJavaScriptを動作させない設定にしていると、何も起こらないと思うので、もしこのメニューがナビゲーション上重要なもの(ページ間を行ったり来たりするなど)であれば、他の手段で表示することをおすすめします。(または、JavaScriptと普通のテキストリンク両方用意しておく方法もあります。) #スタイルシートに記述漏れがあるようです。  :visited { color:Black;} ↓ a:visited

  • ryota2
  • ベストアンサー率43% (61/140)
回答No.1

<SCRIPT LANGUAGE="JavaScript">  var flag = true; ○unction Menu() {   if(flag) {    NaviMenu.style.posLeft = event.clientX;    NaviMenu.style.posTop = event.clientY;    NaviMenu.style.visibility = "visible";    flag = false;   }  else {    NaviMenu.style.visibility = "hidden";    flag = true;     }  }  document.ondblclick = Menu; </SCRIPT> 「○」のところのfが抜けているのはいかがでしょうか。

n--n
質問者

補足

しまった(~_~;) すみません。 ↑fがぬけてました(汗 HP上では抜けてないのです.....

関連するQ&A

  • ワイドのモニターだとズレます

    下記のような記述を用いてオンマウスでメニューが現われるようにしているのです。 仕事で使っている15インチモニターでは正常に表示できるのですが、家にあるワイドモニターで見るとズレが生じてしまいます。 これを直すにはどうしたら良いのでしょうか? <style type="text/css"> <!-- #menu1{ position:absolute; top:22px; left:0px; visibility:hidden; } #menu2{ position:absolute; top:22px; left:90px; visibility:hidden; } #menu3{ position:absolute; top:22px; left:180px; visibility:hidden; }} --> </style>

  • float: leftで横に並べたら、サファリだけ

    float: leftで横に並べたら、サファリだけ隙間が空いてしまいます。 IEやファイヤーフォックスではピッタリ表示できています。 問題の箇所は以下です。 <div style="float: left;"> <p style="position: relative;"> <img src="./img/img-001.png" width="240" height="150" /> <br /> <span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト1</span> </p> </div> <div style="float: left;"> <p style="position: relative;"> <img src="./img/img-002.png" width="240" height="150" /> <br /> <span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト2</span> </p> </div> <div style="float: left;"> <p style="position: relative;"> <img src="./img/img-003.png" width="240" height="150" /> <br /> <span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト3</span> </p> </div> どうすればサファリの隙間を消せるでしょうか?

    • ベストアンサー
    • 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">イベント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"; }

  • メニュー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>

  • IEでのポップアップ画像の位置「fixed」

    オンマウスでポップアップする画像を、左上に固定したいのですが、 HTMLとCSSだけでは難しいのでしょうか? HTMLとCSS以外の知識はほとんどありませんので、なんとかこの2つでとも思っているのですが… firefox・googleChromeでは下記のCSSで左上でポップアップ画像が固定されています。 IE8で確認したところ、どうしても画像の下に出てしまいます。 .thumbnail{ z-index: 0; font-size:12px; } .thumbnail:hover{ background-color: transparent; z-index: 50; } .thumbnail span{ position: absolute; background-color: #FFFFFF; padding: 5px; left: 10px; border: 1px dashed gray; visibility: hidden; color: black; text-decoration: none; } .thumbnail span img{ border-width: 0; padding: 2px; } .thumbnail:hover span{ visibility: visible; position: fixed; top: 10px; left: 10px; } ご教授いただければと思います。

    • ベストアンサー
    • CSS
  • adressを一番下に表示させたい

    スタイルシート・スタンダード・デザインガイドという本を見ながらサイトを作っています。 サンプルを元にいろいろいじっていたらadressが一番下にくるはずなのに一番上に来てしまいます。 どうしたらいいでしょうか。 body { text-align:center; background-image:url(images/bg2.gif); background-color:#ffffff; } p.menu { border: 0; margin: 0; padding: 0; border:0; color:#ffffff; position:absolute; left:50px; top:50px; } p.menu img { margin:0; padding:0; } p.menu a{ padding:0; margin:0; background-color:#ffffff; } p.menu a:hover, p.menu a:active { background-color:#ffff99; } #menu2 { font-size:0.75em; margin-bottom:0; margin-top:50px; height:90%; width:197px; border:solid 1px #ff9999; position:absolute; left:50px; top:100px; background-color:#ffffff; } #menu2 a { color:#5e8eab; text-decoration:none; background-color:#ffffff; display:block; width:100%; line-height:2em } #menu2 a:hover { background-color:#c5e1ed } #menu2 span { color:#c5e1ed; display:none } .contents { width:580px; height:90%; margin-left:0; margin-right:0; margin-bottom:0; background-color:#ffffff; position:absolute; margin-top:20px; left:248px; top:130px; border:solid 1px #ff9999; } .section { margin-left:60px; margin-right:60px; text-align:left; margin-top:2em } address { font-size:0.625em; font-weight:bold; font-style:normal; color:#2d444f; position:absolute; text-align:center; text-valign:bottom; } address a { color:#2d444f; }

    • ベストアンサー
    • HTML
  • style.visibility="hidden";

    下記は画面にJavaScriptで碁盤の目に区切り 左上の一区切りの下地を表示するコードです <html> <head> <title>タイル</title> <script language="JavaScript"> <!-- var block = [0]; function setTile() { num = 100; w = Math.floor(document.body.clientWidth / num); h = Math.floor(document.body.clientHeight/ num); wTag = ""; n = 1; for (j=0; j<=h; j++) { for (i=0; i<=w; i++) { wTag += "<span id='abc" + n +"' style='position:absolute;top:" + j*num + "px;left:" + i*num + "px;width:" + (num-1) + "px;height:" + (num-1) + "px;background-color:blue;'>" + "</span>"; block[n] ='abc' + n; n++; } } document.all["tile"].innerHTML = wTag; document.body.style.visibility = "visible"; abc1.style.visibility="hidden"; } // --> </script> </head> <body onLoad="setTile()" style="visibility:hidden"> <div id="tile" style="position:absolute;top:0px;left:0px;"></div> </body> </html> 下地を表示する abc1.style.visibility="hidden"; を下記に直すと動かなくなります block[1].style.visibility="hidden"; よろしくお願いします。

  • マウスをクリックで画像・・・

    マウスをクリックすると画像が飛び散る素材(?)を頂いてきたのですが、 以下の通りにUPすると「エラー」が出てしまいます。 どこが悪いのか解らないので よろしくお願いします。 <SCRIPT language="JavaScript" src="ht://xxx/xx.js"></SCRIPT> <BODY onload="initMouseEvents()"> <DIV id="sparks"> <DIV id="sDiv0" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/1.gif" width="15" height="16"></DIV> <DIV id="sDiv1" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/2.gif" width="15" height="16"></DIV> <DIV id="sDiv2" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/3.gif" width="15" height="16"></DIV> <DIV id="sDiv3" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/i4.gif" width="15" height="16"></DIV> <DIV id="sDiv4" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/i5.gif" width="15" height="16"></DIV> <DIV id="sDiv5" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/i6.gif" width="15" height="16"></DIV> <DIV id="sDiv6" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/7.gif" width="15" height="16"></DIV> <DIV id="sDiv7" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/8.gif" width="15" height="16"></DIV> <DIV id="sDiv8" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/9.gif" width="15" height="16"></DIV> <DIV id="sDiv9" style="position:absolute; visibility: hidden;"><IMG src="ht://xx/10.gif" width="15" height="16"></DIV> </DIV>

  • onMouseOver,Outを使用したドロップダウン型メニューを作りたい

    ★ヘッダ内 function mymenu(titles){ if((document.getElementById) && (!document.all)) { titles=document.getElementById(titles).style; if (titles.visibility=='hidden') titles.visibility="visible"; else titles.visibility='hidden'; } else{ titles=document.all[titles].style; if (titles.visibility=='hidden') titles.visibility="visible"; else titles.visibility='hidden'; } } ★本文 <base target="_blank"> (…中略…) <td class="top_menu" align="center" nowrap bgcolor="#000099" width="60" height="23"> <a style="text-decoration:none" href="JavaScript:mymenu('drop1')" target="_self">仮名</a><br> <div id="drop1" style="position: absolute; width: 120px; height: 60px; background-color: #000099; visibility:hidden"> <a href="#" target="_blank">あ</a><br> <a href="#" target="_blank">い</a><br> <a href="#" target="_blank">う</a><br> </div> </td> 上が現在のソースで、テーブルでレイアウトしています。 これをonMouseOver,Outを使用したドロップダウン型メニューにできないでしょうか? 宜しくお願いいたします。 <イメージ>http://www.adobe.co.jp/ …フラッシュは不要です。

  • liタグのナビボタンがFirefoxで二重に表示。

    liタグでナビボタンを縦に3つ積みたいのですが、IEでは正しく表示しますが、何故かFirefoxでは2段めから2つずつ表示してしまい5つのナビボタンになってしまいます。どのように記述すれば良いのでしょう? <div id="sidebar"> <ul> <li id="aaa"><a href=""><span>aaa</span></li> <li id="bbb"><a href=""><span>bbb</span></li> <li id="ccc"><a href=""><span>ccc</span></li> </ul> </div> div#sidebar { width: 245px; float:left; border-right-width: 1px; border-right-style: solid; border-right-color: #CCCCCC; } div#sidebar ul li a { display: block; } div#sidebar ul li a span { position:absolute; width: 0; height: 0; overflow:hidden; } ul li#aaa a { width: 245px; height: 60px; background-image:url(image/aa.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#bbb a { width: 245px; height: 60px; background-image:url(image/bb.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#ccc a { width: 245px; height: 60px; background-image:url(image/cc.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; }

    • ベストアンサー
    • CSS

専門家に質問してみよう