jqueryで実装されたプルダウンメニューの更新時の表示状況を改善したい。


http://www.geekzshu.com/jquery/343

のサイトを参考にプルダウンメニューを作成しました。
問題なく動いてはいるのですが、更新時(ページ遷移時)になぜか隠してあるメニューの部分が一時的に出てきてしまうのです。
※わかりにくいのですが、ページを更新すれば確認できます。

特にクロームで顕著です。

この状況の改善策を教えてください。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/08/19 22:16:35
  • 終了:2013/08/19 23:54:55

ベストアンサー

id:windofjuly No.2

うぃんど回答回数2625ベストアンサー獲得回数11492013/08/19 22:50:12

ポイント100pt

jqueryでサブメニューを非表示にしているので、
スクリプト起動までのタイムラグが発生します。

対策としてはcssでhiddenにしておくということになります。

ul#sub visibility: hidden;
他1件のコメントを見る
id:windofjuly

visibilityじゃなくてdisplay:none;でした。

お詫びがてらサンプルを…

<html>
<head>
  <style>
    ul,li{margin:0; padding:0;}
    ul#menu{margin:10px auto; width:360px;}
    ul#menu li{float:left; width:180px; height:48px; background-color:#2b76cc;
        list-style:none; text-align:center; border-bottom:1px solid #666;}
    ul#menu li a{display:block; width:178px; height:100%; line-height:48px;
        color:#fff; text-decoration:none; border-left:1px solid #fff;
        border-right:1px solid #fff; border-bottom:1px solid #fff;}
    ul#sub { display:none; }
    ul#sub li{ float:none;}
  </style>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">google.load('jquery', '1.6.4');</script>
  <script type="text/javascript">
    $(function(){
      $("ul#menu>li").hover(function(){
        $("ul:not(:animated)", this).slideDown();},
        function(){$("ul#sub",this).slideUp();});
    });
  </script>
</head>
<body>
  <ul id="menu">
    <li><a href="">メニュー</a>
      <ul id="sub">
        <li><a href="">サブメニュー</a></li>
        <li><a href="">サブメニュー</a></li>
        <li><a href="">サブメニュー</a></li>
      </ul>
      </li>
      <li><a href="">メニュー</a>
        <ul id="sub">
          <li><a href="">サブメニュー</a></li>
          <li><a href="">サブメニュー</a></li>
          <li><a href="">サブメニュー</a></li>
      </ul>
    </li>
  </ul>
</body>
</html>
2013/08/19 23:50:39
id:jamis

ありがとうございます。
目的どおりの結果になりました。
CSSで単純に解決できたんですね。

2013/08/19 23:54:26

その他の回答(1件)

id:dawakaki No.1

だわかき回答回数797ベストアンサー獲得回数1222013/08/19 22:41:42

IE10, Chrome28.0を使ってますが、そういう症状は出ません。
それほど変なスクリプトではないと思います。

ChromeのアドオンをOFFにしてみてください。

id:jamis

いろんなブラウザで確認しましたが、症状は確実にあるようです。
更新時に黄色い枠部分が大きくなって、一瞬「サブメニュー」の文字列が見えてしまいます。

2013/08/19 22:48:39
id:windofjuly No.2

うぃんど回答回数2625ベストアンサー獲得回数11492013/08/19 22:50:12ここでベストアンサー

ポイント100pt

jqueryでサブメニューを非表示にしているので、
スクリプト起動までのタイムラグが発生します。

対策としてはcssでhiddenにしておくということになります。

ul#sub visibility: hidden;
他1件のコメントを見る
id:windofjuly

visibilityじゃなくてdisplay:none;でした。

お詫びがてらサンプルを…

<html>
<head>
  <style>
    ul,li{margin:0; padding:0;}
    ul#menu{margin:10px auto; width:360px;}
    ul#menu li{float:left; width:180px; height:48px; background-color:#2b76cc;
        list-style:none; text-align:center; border-bottom:1px solid #666;}
    ul#menu li a{display:block; width:178px; height:100%; line-height:48px;
        color:#fff; text-decoration:none; border-left:1px solid #fff;
        border-right:1px solid #fff; border-bottom:1px solid #fff;}
    ul#sub { display:none; }
    ul#sub li{ float:none;}
  </style>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">google.load('jquery', '1.6.4');</script>
  <script type="text/javascript">
    $(function(){
      $("ul#menu>li").hover(function(){
        $("ul:not(:animated)", this).slideDown();},
        function(){$("ul#sub",this).slideUp();});
    });
  </script>
</head>
<body>
  <ul id="menu">
    <li><a href="">メニュー</a>
      <ul id="sub">
        <li><a href="">サブメニュー</a></li>
        <li><a href="">サブメニュー</a></li>
        <li><a href="">サブメニュー</a></li>
      </ul>
      </li>
      <li><a href="">メニュー</a>
        <ul id="sub">
          <li><a href="">サブメニュー</a></li>
          <li><a href="">サブメニュー</a></li>
          <li><a href="">サブメニュー</a></li>
      </ul>
    </li>
  </ul>
</body>
</html>
2013/08/19 23:50:39
id:jamis

ありがとうございます。
目的どおりの結果になりました。
CSSで単純に解決できたんですね。

2013/08/19 23:54:26
  • id:windofjuly
    うぃんど 2013/08/19 22:56:28
    ちゃんと調べずに回答する人がいるので注意しましょう。
    間違いを指摘されても無視することが多い人です。

    生涯給与の件などでは、質問文にあるURLの3ページ目の受け売りを回答されてますが、あんなものを求めてますか?

    質問者が回答を評価する努力を行わない限り、このような回答者が付きまといます。
    利用ガイドラインの注意事項も読んで今後の対応を決めてください。
    http://q.hatena.ne.jp/help/guideline
    >>
    有料で質問を行う場合、質問終了後、質問者は回答者に対して所定のはてなポイントを支払います。支払いの際には回答の内容によって支払うはてなポイントの額を変えることができますので、よい回答が得られた際には多めに支払い、不適切な回答には支払いを行わないなど、適切に回答の品質に対する評価を行ってください。
    <<
    >>
    投稿の内容が明確に不適切であるとお考えの場合には、通報機能や回答拒否機能をご利用いただくことを推奨します
    <<
  • id:jamis
    確かに。見当の外れた回答でした。
    ちょっといろいろと対策を考えてみます。
    ありがとうございます。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません