“可混搭"风格导航栏 [英] "Mashable" style navbar
问题描述
我知道这不是我的个人帮助台"，但是我正在寻找一种简单的解决方案来实现导航栏，其中导航栏项会消失，并最终随着浏览器水平调整大小而变成下拉菜单(或左侧导航栏)，例如 http://mashable.com .
我目前正在使用 http://www.bublinastudio.com/flattybs3/在Bootstrap 3的顶部.我一直在寻找几个小时，但我所能找到的只是如何在导航栏中放置下拉菜单".没有人解释如何根据浏览器的宽度显示/隐藏导航栏项目，以及如何确定项目的优先级，以指示哪些项目应先消失.
如果您能将我重定向到一些有用的站点，并提供有关此方面的更多信息，我将不胜感激！
您可以查找有关媒体查询和:nth-child()选择器的信息.应该会帮助您以及您希望做的事！
nth-child()
http://css-tricks.com/how-nth-child-works/
http://api.jquery.com/nth-child-selector/
媒体查询
http://css-tricks.com/css-media-queries/
I know that this is not my "personal helpdesk", but am looking for a simple solution to implement a navbar where navbar items dissapear and eventually turns into a dropdown (or left side navbar) as the browser is resized horizontally like http://mashable.com.
I am currently using http://www.bublinastudio.com/flattybs3/ which is built on top of Bootstrap 3. I have been looking for hours but all I can find is "how to put dropdowns in your navigation bar". Nobody explains how you can show/hide navbar items based on browser width and how to prioritise your items, indicating which should disappear first.
If any of you could please just redirect me to some useful sites with more information about this I would be most grateful!
You could look up information about both Media Queries and also :nth-child() selector. The should help you along with what you are hoping to do!
nth-child()
http://css-tricks.com/how-nth-child-works/
http://api.jquery.com/nth-child-selector/
Media Queries
http://css-tricks.com/css-media-queries/
这篇关于“可混搭"风格导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
