动态自适应导航栏示例

Question

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

请给这类敏感资产净值的一些链接实例或工作网站

Answer 1

Twitter的引导框架有一个很好的响应导航栏坍塌下来一个汉堡包图标时没有足够的屏幕宽度显示所有菜单项。

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

要更改颜色/他们的风格需要对如何引导框架的作品有点知识的，并没有那么新手友好，但幸运的是一个梦幻般的生成器，你可以用它来生成自定义基本Bootstrap导航栏的造型http://twitterbootstrap3navbars.w3masters.nl/

Answer 2

解决它！

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 - 调整窗口看变化