人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

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

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

●質問者: jamis
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● だわかき
●0ポイント

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

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


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

2 ● うぃんど
●100ポイント ベストアンサー

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

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

ul#sub visibility: hidden;

jamisさんのコメント
回答ありがとうございます。 この方法もトライしてみたのですが、今度はプルダウンが降りなくなってしまいます。

うぃんどさんのコメント
visibilityじゃなくてdisplay:none;でした。 お詫びがてらサンプルを… >|html| <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> ||<

jamisさんのコメント
ありがとうございます。 目的どおりの結果になりました。 CSSで単純に解決できたんですね。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ