2

レスポンシブ Web サイトの折りたたみメニューを作成しました。

幅が 960px 未満のブラウザでサイトを表示すると、ナビゲーション メニュー項目が積み重なって非表示になります。ナビゲーション アイテムを表示するには、トグル ボタンをクリックする必要があります。ブラウザの幅が 960px を超えると、ナビゲーション メニュー項目が一列に表示されます。

私の問題は、ユーザーが iPad でサイトを閲覧するときに発生します。ユーザーが最初に縦向きモード (幅 < 960px) の iPad でサイトを開き、トグル ボタンをクリックしてナビゲーション メニューを表示し、トグル ボタンをもう一度クリックしてナビゲーション メニューを非表示にした場合。ユーザーが iPad を横向きモード (幅 > 960px) に回転すると、ナビゲーション メニューが消えます。

ただし、ユーザーが iPad でサイトを縦向きモードで開き、トグル ボタンをクリックせずに横向きモードに回転した場合、ナビゲーション メニューは横向きモードで使用できます。

以下は、ナビゲーション メニューを表示または非表示にするために作成した JavaScript コードです。

$(document).ready(function() {

    // Get the handlers
    var collapseBtn = $('#nav-collapse');
    var mainNav = $('#main-nav');

    // Navigation menus only collapse when they are not floated
    var isFloated = mainNav.children('li').css('float');
    if (isFloated != 'left') {
        // Add toggle button click event listener
        collapseBtn.on('click', function() {
            mainNav.slideToggle();
        });

    }

});

html コードは次のとおりです。 

<nav class="col-lg-12">
    <a class="nav-collapse" id="nav-collapse">Menu</a>
    <ul class="clearfix" id="main-nav">
        <li><a href="#">home</a></li>
        <li>
            <a href="#">Item 1</a>
            <ul>
                <li><a href="http://apple.com.au">Item 1</a></li>
                <li><a href="#"Item 1</a></li>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 1</a></li>
            </ul>
        </li>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 1</a></li>
        <li>
            <a href="#">Item 1</a>
            <ul>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 1</a></li>
            </ul>
        </li>
        <li><a href="#">Item 1</a></li>
    </ul>
</nav>

css コードは次のとおりです。

/* toggle button */
#nav-collapse {
    display:block;
    margin:0 auto;
    padding:5px;
    background-color:#CDD1F4;
    text-align:center;
    width:20%;
    color:#ffffff;
    cursor:pointer;
}
#nav-collapse:hover {
    text-decoration:none;
}

/* main navigation */
ul#main-nav {
    list-style:none;
    padding-left:0;
    display:none;
}
ul#main-nav li {
    z-index:9;
}
ul#main-nav  li a {
    display:block;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:5px;
    border-bottom:1px solid #cccccc;
}
ul#main-nav  li a:hover {
    text-decoration:none;
    background-color:#CDD1F4;
    color:#ffffff;
}

/* first level navigation */


/* second level navigation */
ul#main-nav > li > ul {
    display:none;
    list-style:none;
    padding-left:2%;
}

@media (min-width: 960px) {

    /* toggle button */
    #nav-collapse {
        display:none;
    }

    /* main navigation */
    ul#main-nav, ul#main-nav ul, ul#main-nav ul li {
        margin:0;
        padding:0;
    }
    ul#main-nav {
        line-height:1;
        list-style:none;
        display:block;
        overflow:visible;
    }
    ul#main-nav li a {
        font-size:13px;
        color:#6D87C3;
        display:block;
        text-decoration:none;
        font-family: 'pt sans',Arial,Helvetica,sans-serif;
    }
    ul#main-nav  li a:hover {
    text-decoration:none;
    background-color:transparent;
    color:#6D87C3;
}

    /* first level navigation */
    ul#main-nav > li {
        float:left;
        padding:0;
        margin:0;
        position:relative;
    }
    ul#main-nav > li > a {
        line-height:10px;
        padding:0px 12px 0px 7px;
        border-right:1px solid #6D87C3;
        border-bottom:none;
    }
    ul#main-nav > li:hover > ul {
        display:block;
    }

    /* second level navigation */
    ul#main-nav > li > ul {
        display:none;
        position:absolute;
    }
    ul#main-nav > li > ul > li {
        background-image:url('../img/trans3.png');
    }
    ul#main-nav > li > ul > li > a {
        width:220px;
        padding:15px 10px;
    }
    ul#main-nav > li > ul > li > a:hover {
        color:#ffffff;
    }

}
4

1 に答える 1

1

問題は、jQuery のメソッドが、トグルしている要素に a を直接タグに.slideToggle()動的に追加することです。style: noneそのため、CSS で設定されたメディア クエリ ルールよりも優先されます。この問題を解決するには、画面幅が 960px を超えるデバイスを対象とするメディア クエリ!importantでdisplay、#main-nav.

ul#main-nav {
    line-height:1;
    list-style:none;
    display:block !important;
    overflow:visible;
}

私が気付いたもう 1 つのことは、ナビゲーション トグルのクリック イベントにリスナーを追加するための決定要因でした。の float 属性に依存している#main-nav場合、ページが最初に横向きで読み込まれ、次に縦向きに切り替えられると、#nav-collapse読み込み時に要素にリスナーがアタッチされていないため、スライド トグルは機能しません。ただし、次のようなアプローチでそれを処理する必要があります。

$(document).ready(function () {

    // Get the handlers
    var collapseBtn = $('#nav-collapse');

    collapseBtn.on('click', function () {
        //if the device is desktop prevent toggle of nav
        if (screen.width >= 960) 
            return;
        mainNav.slideToggle();
    });

});
于 2013-08-26T19:44:01.630 に答える