在Rails应用程序上进行基础顶栏导航

时间:2014-07-18 15:26:25

标签: html css ruby-on-rails navigation zurb-foundation

我在处理基于我的Rails应用程序的基础上遇到了问题。它们主要与自定义和少量导航结构相关。

在我的assets文件夹中,我将application.css.scss和framework_and_overrides.css.scss作为覆盖样式,在我的application.css.scss中导入,并且还在其中导入“foundation”。

我理解顶栏的默认结构,但是我没有按照模型中的描述构建两级响应式导航:

enter image description here

enter image description here

首先,很难改变尺寸,链接和背景颜色。是否有任何简单的方法来进行自定义而不是检查或修改每个元素?

我可以在两行中创建一个导航栏,本节中的每个列表元素都在切换下,我需要将语言导航栏保留在切换点之外并保持原样。如果我制作两个单独的导航栏 - 当调整屏幕大小时,语言一个属于第二个,因为所有按钮都堆叠在一起。我不认为一个好的解决方案是以不同的方式覆盖两个导航栏,我希望它不是唯一的。

进行此类响应式导航的最佳方式是什么?

感谢您提供任何帮助和指导。

2 个答案:

答案 0 :(得分:2)

您是否考虑过使用Top-Bar和Icon-Bar - http://foundation.zurb.com/docs/components/icon-bar.html?这样你就可以单向设置Top栏,另一个设置图标栏。除了颜色,它看起来几乎与您的模型完全相同。

答案 1 :(得分:1)

您可以使用CSS media标记来完成此操作。见http://jsfiddle.net/8cqgumhw/