动态自适应导航栏示例答案

【问题标题】：Dynamically adaptive navbar examples动态自适应导航栏示例
【发布时间】：2016-04-04 04:13:08
【问题描述】：

您是否知道根据屏幕宽度隐藏菜单元素的 Use 示例或自适应导航的任何代码示例？

请提供一些使用这种响应式导航的示例或工作网站的链接

【问题讨论】：

标签： css user-interface interface responsive-design navigation

【解决方案1】：

解决它！

HTML 代码：

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">NOSTROMO inc.</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="menu-item active"><a href="#">Антропоморфоз</a></li>
                <li class="menu-item"><a href="#">Филогенез</a></li>
                <li class="menu-item"><a href="#">Адаптагенность</a></li>
                <li class="menu-item"><a href="#">Абберация</a></li>
                <li class="menu-item"><a href="#">Суперпозиция</a></li>
                <li class="menu-item"><a href="#">Микрофиламент</a></li>
                <li class="menu-item"><a href="#">Квинтесенция</a></li>
                <li class="menu-item"><a href="#">Нейропластичность</a></li>
                <li class="dropdown" id="menu-colapsed">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        <span class="glyphicon glyphicon-option-horizontal"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li class="collapsed-menu-item"><a href="#">Антропоморфоз</a></li>
                        <li class="collapsed-menu-item"><a href="#">Филогенез</a></li>
                        <li class="collapsed-menu-item"><a href="#">Адаптагенность</a></li>
                        <li class="collapsed-menu-item"><a href="#">Абберация</a></li>
                        <li class="collapsed-menu-item"><a href="#">Суперпозиция</a></li>
                        <li class="collapsed-menu-item"><a href="#">Микрофиламент</a></li>
                        <li class="collapsed-menu-item"><a href="#">Квинтесенция</a></li>
                        <li class="collapsed-menu-item"><a href="#">Нейропластичность</a></li>
                    </ul>
                </li>
            </li>
        </div>
    </div>
</nav>

CSS 代码：

.collapsed-menu-item {
    display: none;
}
/*hide menu items on resize and show dropdown "more" menu and add nenu items to dropdown*/
@media (max-width: 1500px) {
    .menu-item:nth-child(n+8) {display: none}
    .collapsed-menu-item:nth-child(n+8) {display: block}
}
@media (max-width: 1300px) {
    .menu-item:nth-child(n+7) {display: none}
    .collapsed-menu-item:nth-child(n+7) {display: block}

}
@media (max-width: 1100px) {
    .menu-item:nth-child(n+6) {display: none}
    .collapsed-menu-item:nth-child(n+6) {display: block}

}
@media (max-width: 1000px) {
    .menu-item:nth-child(n+5) {display: none}
    .collapsed-menu-item:nth-child(n+4) {display: block}
}

/*show all menu elements in mobile view and hide dropdown menu "more"*/

@media (max-width: 768px) {
    .menu-item {
        display: block !important;
    }
    #menu-colapsed {
        display: none;
    }
}

@media (min-width: 1500px) {
    #menu-colapsed {
        display: none;
    }
}

codepen 上的现场演示：http://codepen.io/DmitriySatinaev/pen/adYLad - 调整窗口大小以查看更改

【讨论】：

【解决方案2】：

Twitter 的 Bootstrap 框架有一个很好的响应式导航栏，当屏幕宽度不足以显示所有菜单项时，它会折叠成一个汉堡图标。

https://getbootstrap.com/examples/navbar-static-top/

要更改它们的颜色/样式，需要了解一些有关引导框架如何工作的知识，并且对新手不太友好，但幸运的是，有一个很棒的生成器，您可以使用它在 @ 处生成引导导航栏的自定义基本样式987654322@

【讨论】：