0

大きな画面サイズの通常の水平ナビゲーション メニューと、ボタンがクリックされるまでメニュー (#mmenu) を非表示にする jQuery ドロップダウンを備えたhttp://www.fcl.euにWeb サイトを構築しました。

このドロップダウンは、幅が 980 ピクセル未満の場合にトリガーされると想定されており、Chrome、Safari、および Internet Explorer でトリガーされます。

ただし、Firefox では、#mmenu が 994px で消えてナビゲーション バーが空白になります (ボタンは CSS メディア クエリによって制御されるため、994px ではまだ display:none に設定されています)。980px では、モバイル メニューが期待どおりに表示されます。

一体何をすればいいの？これは基本的に、サイトをクロスブラウザ互換にする試みを台無しにするので、私はちょっとおかしくなっています. JS によって制御されるため、994px でも正しく表示されません (この時点でメニュー項目は水平に配置されますが、少なくともユーザーはクリックして表示できます)。

より良い解決策はありますか？Firefox の条件付きコメントのようなものはありますか?

私のjQueryは次のようになります。

<script type="text/javascript">
jQuery(document).ready(function ($) {
     $(".mtoggle").click(function () {
         $("#mmenu").slideToggle(500);
     });
     if ($(window).width() < 980) {
         $("#mmenu").hide();
     }
 });

 $(window).resize(function () {
     if ($(window).width() > 980) {
         $('#mmenu').show();
     }

     if ($(window).width() < 980) {
         $("#mmenu").hide();
     }
 });
</script>

比較的新しい Firefox 23.0.1 を実行しているので、単なるバグなのだろうかと思います。他の誰かがそれを複製できますか?

編集: ナビゲーション バーの HTML は次のとおりです。完全なページは www.fcl.eu で表示できます。

<nav id="access" role="navigation" class="navbar-fixed-top">
            <h1 class="assistive-text section-heading">Main menu</h1>
            <div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
            <h1 id="site-title"><a href="http://fpsl.eu/" title="First Phase Soft Landing" rel="home"><img src="http://www.fpsl.eu/img/first-phase-logo.png" alt="First Phase Soft Landing" class="logo" /></a></h1>
        <a class="btn-navbar mtoggle" data-toggle="collapse" data-target=".mmenu">
                    <span class="navmenu">&#9776;</span>
                </a>
        <div id="mmenu">
            <div class="menu-first-phase-menu-container"><ul id="menu-first-phase-menu" class="mmenu"><li id="menu-item-83" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item menu-item-83"><a href="http://fpsl.eu/">Home</a></li>
<li id="menu-item-84" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-84"><a href="http://fpsl.eu/about/">About</a></li>
<li id="menu-item-122" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-122 dropdown"><a href="#">Our Services ▾&lt;/a>
<ul class="sub-menu">
    <li id="menu-item-88" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-88"><a href="http://fpsl.eu/market-research/">Market Research</a></li>
    <li id="menu-item-87" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-87"><a href="http://fpsl.eu/operational-set-up/">Operational Set Up</a></li>
    <li id="menu-item-86" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-86"><a href="http://fpsl.eu/fast-track-services/">Fast Track Services</a></li>
</ul>
</li>
<li id="menu-item-91" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-91"><a href="http://fpsl.eu/testimonials/">Testimonials</a></li>
<li id="menu-item-157" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-157"><a href="http://fpsl.eu/blog/">Blog</a></li>
<li id="menu-item-106" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-106"><a href="#contact">Contact</a></li>
</ul></div>     </div>
        </nav>

編集 2: 正しく動作するヘッダー コードのみを使用して、ここに JSFiddle があります - http://jsfiddle.net/Kg6h4/embedded/result/。ただし、メイン コンテンツが HTML に挿入されると、問題は解決しません。 http://jsfiddle.net/juk5w/18/embedded/result/を参照してください。

4

0 に答える 0