Question

我是JS的初学者。我找到了 wonderful example of responsive menu ，并将代码放在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;
    }
}

导航链接折叠到下拉列表后，它们会向左浮动。由于25px中的以下规则（第728行），链接左侧的偏移量为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。

<强> ORIGINAL：

我认为这是rwd-nav.css和bootstrap.css之间的CSS冲突。尝试将.nav-menu .nav-primary h3中的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)返回404。您可能希望确保该文件存在。

内部响应菜单的错误

1 个答案: