Question

您是否知道任何使用示例或自适应导航的任何代码示例，其中隐藏菜单元素取决于屏幕宽度？

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

Answer 1

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

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

要改变它们的颜色/样式需要一些关于引导程序框架如何工作的知识，并且不是那么新手友好，但幸运的是有一个很棒的生成器，你可以使用它来生成自定义基本样式的Bootstrap＆＃39; s导航栏http://twitterbootstrap3navbars.w3masters.nl/

Answer 2

解决它！

HTML code：

<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 个答案: