html - Rails 应用程序的基础顶部栏导航

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

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

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

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

enter image description here

enter image description here

首先,很难改变大小、链接和背景颜色。有没有比检查或修改每个元素更简单的自定义方法?

我能否将一个导航栏分成两行,此部分中的每个列表元素都属于切换,并且我需要将语言导航栏保持在切换之外并保持完整。如果我制作两个单独的导航栏 - 在调整屏幕大小时,一种语言位于第二种语言之下,因为所有按钮都堆叠在一起。我不认为一个好的解决方案是以不同的方式覆盖两个导航栏,我希望这不是唯一的。

制作这种响应式导航的最佳方式是什么?

感谢您的帮助和指导。

最佳答案

您是否考虑过使用顶部栏和图标栏 -:http://foundation.zurb.com/docs/components/icon-bar.html一起?这样你就可以用一种方式设置顶部栏的样式,而将图标栏设置为另一种方式。除了颜色外,它看起来与您的模型几乎完全一样。

关于html - Rails 应用程序的基础顶部栏导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24828640/

相关文章:

CSS 多列对齐

ruby-on-rails - 如何在 Rails 3 中使用 devise 和 aws cognito

ruby-on-rails - 不允许的参数 : file rails 4

html - 有没有正确的方法来突出显示文本中的#标签和@用户?

html - Bootstrap 4 的模态和滚动模态有什么区别?

HTML/CSS。去上课?

html - CSS Grid 自动添加一个::before 元素

ruby-on-rails - 提升完全匹配搜寻点/弹性搜寻Rails 4

javascript - 将变量从一个页面传递到另一个页面

html - 为什么设置 :first-letter selector with whitespace cause mouse highlighting to be offset?