javascript - 内部响应式菜单的错误

Question

我是JS的初学者。我找到了响应式菜单的精彩示例，并将代码放入其中functions.php。菜单必须像这里一样工作http://filamentgroup.com/examples/rwd-nav-patterns/但我有错误 - 当我使用平板电脑模式时，我的站点中的下拉菜单向右移动。

我尝试根据 Bootstrap http://b.pusku.com将此菜单包含在我的网站中

Answer 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/

我没有覆盖更新的小提琴中的 themargin-left或 the 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 */
}

此外，您的托管服务提供商正在为url(img/icons.png). 您可能需要确保该文件存在。