css - 动态自适应导航栏示例

Question

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

请提供一些指向具有此类响应式导航的示例或工作网站的链接

Answer 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 - 调整窗口大小以查看更改