“混搭”风格的导航栏(“Mashable” style navbar)

2019-10-19 19:44发布

我知道,这不是我的“个人服务支持”,但要寻找一个简单的解决方案,以实现一个导航栏,其中导航栏项目dissapear并最终变成一个下拉菜单(或左侧导航栏)作为浏览器调整水平状的http:// mashable.com 。

我目前使用的http://www.bublinastudio.com/flattybs3/这是建立在引导3顶部我一直在寻找了几个小时,但所有我能找到的是“如何把你的导航栏下拉列表”。 没有人解释如何显示了基于浏览器的宽度,以及如何在项目优先/隐藏导航栏项目,表明其应该先消失。

如果你们能请你只重定向我一些有用的网站有更多有关这一点,我将不胜感激!

Answer 1:

你可以查找有关这两个媒体查询,也:第n个孩子()选择。 在帮助你完成你希望做什么沿!

第n个孩子()
http://css-tricks.com/how-nth-child-works/

http://api.jquery.com/nth-child-selector/

媒体查询
http://css-tricks.com/css-media-queries/



Answer 2:

自举4(更新2019)

这里是引导4.1更新的选项。 这将折叠四溢的额外导航栏项目到右侧下拉列表。 它逐渐移动导航栏项目的下拉菜单。

https://www.codeply.com/go/IETSah3bFG

引导3(原来的答案)

如果我理解你的问题,你希望有导航栏链接崩溃右侧的“更多”下拉列表中,当没有足够的宽度。 这将需要定制的CSS,以及一些jQuery来监视导航栏的宽度和折叠相应溢出链接...

这是一个工作示例: http://bootply.com/128897



文章来源: “Mashable” style navbar