0

私はJSの初心者です。レスポンシブメニューのすばらしい例を見つけて、中にコードを入れfunctions.phpました。メニューはここhttp://filamentgroup.com/examples/rwd-nav-patterns/のように機能する必要がありますが、バグがあります。タブレットモードを使用すると、ドロップダウンメニューがサイトの右に移動します。

Bootstrap http://b.pusku.comに基づいて、このメニューを自分のサイトに含めようとしました。

4

1 に答える 1

1

アップデート：

フィドルの問題の一部は、ロゴ画像に割り当てられたスペースが広すぎることでした。そこで、それを修正するために以下を追加しました。

#logo > img {
    width: 25px;
}

ドロップダウンを常に左にフロートさせるには、次を追加します。

.nav-menu .nav-primary {
    float: left;
    clear: none;
}

ルールに@media screen and (min-width: 910px)...

@media screen and (min-width: 910px) {
    .nav-primary {
        float: right;
        clear: none;
    }   
    .nav-menu .nav-primary {
        float: left;
        clear: none;
    }
}

ナビゲーションリンクがドロップダウンに折りたたまれると、左に浮きます。（728行目）25pxの次のルールにより、リンクの左側にオフセットがあります。bootstrap.css

ul, ol {
    padding: 0;
    margin: 0 0 10px 25px; /*specifically this rule*/
}

margin-left: 0;必要に応じて、.nav-primary ulルールに追加することで、これをオーバーライドできます。

.nav-primary ul {
   border: 1px solid #e6e6e6;
    margin-left: 0; /* add this to override the bootstrap.css rule*/
}

最後に、画面の幅が狭くなると、ドロップダウンの幅が幅全体に広がるように見えます。これが望ましい効果でない場合は、ルールに追加display: inline-block;します。.nav-primary

.nav-primary {
    clear: left;
    margin: 0 0 2em;
    display: inline-block;
}

また、より多くの（適切な名前の）変数を使用して「レスポンシブ」ナビゲーションをドロップダウンに折りたたむJavaScriptを書き直したので、スクリプトが何をするのかをよりよく理解できます。

$(document).ready(function () {
    'use strict';
    $('.nav-primary')
    // test the menu to see if all items fit horizontally
        .bind('testfit', function () {
            var nav = $(this),
                navPrimaryTop = nav.offset().top, // top of div.nav-primary
                navSkipNavTop = nav.prev().offset().top, // top of p containing a#main
                topOfFirstLink = nav.find('li:first-child').offset().top, //top of "What We Done"
                topOfLastLink = nav.find('li:last-child').offset().top, //top of "Contact Us"
                navBelowSkipNav = navPrimaryTop > navSkipNavTop, //boolean indicating whether div.nav-primary is below the p containing a#main
                lastLinkBelowFirstLink = topOfLastLink > topOfFirstLink, //boolean indicating whether "Contact Us" is below "What We Done"
                displayAsMenu = navBelowSkipNav || lastLinkBelowFirstLink; // boolean indicating whether to collapse to a dropdown menu
            $('body').removeClass('nav-menu');
            if (displayAsMenu) {
                $('body').addClass('nav-menu');
            }
        })
        // toggle the menu items' visiblity
        .find('h3').bind('click focus', function () {
            $(this).parent().toggleClass('expanded');
        });
    // ...and update the nav on window events
    $(window).bind('load resize orientationchange', function () {
        $('.nav-primary').trigger('testfit');
    });
});

これが基本を示す更新されたフィドルです：http：//jsfiddle.net/DD7MC/1/

更新されたフィドルのmargin-leftまたはをオーバーライドしませんでした。display

オリジナル：

rwd-nav.cssとの間のCSSの競合だと思いますbootstrap.css。.nav-menu .nav-primary h3inのクラス定義を次のように変更してみてくださいrwd-nav.css。

.nav-menu .nav-primary h3 {
   position: absolute;
   top: -10px; /* <-- change this line */
   left: auto;
   right: 0;
   display: block;
   width: 4em;
   height: 3.75em;  /* <-- change this line */
   background: #ccc url(img/icons.png) no-repeat -205px 45%;
   text-indent: -999em;
   cursor: pointer;
   font-size: inherit; /* <-- add this line */
}

また、ホスティングプロバイダーはの404を返していますurl(img/icons.png)。ファイルが存在することを確認することをお勧めします。

于 2012-11-15T20:33:04.090 に答える