Question

我尝试制作类似于BBC的导航栏，其中显示的项目取决于可以适应当前屏幕宽度的数量，其余部分隐藏在下拉菜单中。< / p>

使用Bootstrap，导航栏中的所有项目一旦达到一定宽度就会被隐藏。我一直试图梳理他们网站上的代码，但我没有太多运气。

我想就你如何做到这一点征求你的建议。

谢谢！

编辑：你知道什么，我将自己做，而不是使用bootstrap。

HTML代码：

<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <div class="inline-div">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </div>
                <span class="inline-div responsive-menu">Menu</span>
            </button>
        </div>

        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li class="active"><a href="#">Directory</a></li>
                <li><a href="#">Food &amp; Drinks</a></li>
                <li><a href="#">Shops &amp; Services</a></li>
                <li><a href="#">Movies</a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>

CSS代码：

.inline-div { display: inline-block; }
.responsive-menu { font-size: 20px; color: #000; }
.navbar {
    border: none;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    border-radius: 0px;
    margin-bottom: 0px;
}
.navbar-default .navbar-toggle .icon-bar { background-color: black; }
.navbar-default .navbar-toggle { border-color: black; border-radius: 0px; }
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus, .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus { color: #ffffff; background-color: #F38C1E; }
.navbar-default { background-color: white; }
.navbar-default .navbar-nav>li>a { color: black; }
@media (min-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;
    }

    .navbar .navbar-collapse {
        text-align: center;
    }
}

Answer 1

通过使用Bootstrap的类名，div将应用Bootstrap的JS，从而导致您希望避免的崩溃功能。为了解决这个问题，我建议完全放弃Bootstrap的“navbar”类系统，并从头开始自己设计样式。然后，您可以设置某种jquery来显示导航栏中的div，直到某个点，您将在该点显示“汉堡包”图标并隐藏其余的导航栏项目。这样的事可以让你开始吗？

$(document).ready(function() {
    var ViewWidth = $(window).width();
    var DivWidth = 0;
    $("li").each(function() {
        var Width = $(this).width();
        DivWidth+=Width;
        if (DivWidth > ViewWidth){
            $("#HamburgerContainer").show()
            $(this).addClass("#Collapsed");
        }
    });
});

这显然还需要一些工作！足够让你入门？

尝试制作隐藏每个项目的响应式导航栏

1 个答案: