RefineryCMS 2.1.0和Zurb 4顶级菜单，带有下拉导航
我正在尝试使用Zurb粉底来设计使用最新版炼油厂构建的应用程序。 我开始遵循本指南
http://blog.flatironschool.com/post/54511602806/build-a-blog-based-site-with-refinerycms
但最新版本的炼油厂使用“menu-presenter”来布局菜单。
我到目前为止：
module ApplicationHelper def zurb_menu menu_items = Refinery::Menu.new(Refinery::Page.in_menu) presenter = Refinery::Pages::MenuPresenter.new(menu_items, self) presenter.css = "top-bar-section" presenter.dom_id = nil presenter.menu_tag = :section presenter.list_tag = "ul class='left'" presenter end end 这种工作，但元素不太正确，主要问题是我不知道如何或在何处添加下拉类以使子元素下拉。 使用上面的代码，子元素只是一直在扩展。
谢谢你的帮助
如果你使用fast_menu而不是in_menu ，那么你将能够重新排序页面。 menu_pages有效，但是它不会以与admin中相同的顺序呈现页面。 希望这有助于某人。
menu_items = Refinery :: Menu.new（Refinery :: Page.menu_pages）
menu_items = Refinery :: Menu.new（Refinery :: Page.fast_menu）
这是我的版本……经过测试; 它至少对我有用。
我使用了我在另一个问题上找到的Bootstrap代码（上面评论中的链接）。 但是，我没有替换整个菜单展示器，而是仅覆盖了我们需要的方法。
创建Zurb菜单演示文件：
应用/演示/炼油厂/页/ zurb_menu_presenter.rb
module Refinery module Pages class ZurbMenuPresenter < MenuPresenter config_accessor :list_dropdown_css, :list_item_dropdown_css, :list_first_css MenuPresenter.menu_tag = :section MenuPresenter.css = "top-bar-section" self.list_dropdown_css = "dropdown" self.list_item_dropdown_css = "has-dropdown" self.list_first_css = nil def render_menu_items(menu_items) if menu_items.present? content_tag(list_tag, :class => menu_items_css(menu_items)) do menu_items.each_with_index.inject(ActiveSupport::SafeBuffer.new) do |buffer, (item, index)| buffer << render_menu_item(item, index) end end end end def check_for_dropdown_item(menu_item) ( menu_item != roots.first ) && ( menu_item_children( menu_item ).count > 0 ) end def menu_items_css(menu_items) css = [] css << list_first_css if (roots == menu_items) css << list_dropdown_css if (roots != menu_items) css.reject(&:blank?).presence end def menu_item_css(menu_item, index) css = [] css << list_item_dropdown_css if (check_for_dropdown_item(menu_item)) css << selected_css if selected_item_or_descendant_item_selected?(menu_item) css << first_css if index == 0 css << last_css if index == menu_item.shown_siblings.length css.reject(&:blank?).presence end def render_menu_item(menu_item, index) if check_for_dropdown_item(menu_item) menu_item_class = list_item_dropdown_css else menu_item_class = menu_item_css(menu_item, index) end content_tag(list_item_tag, :class => menu_item_class) do @cont = context.refinery.url_for(menu_item.url) buffer = ActiveSupport::SafeBuffer.new buffer << link_to(menu_item.title, context.refinery.url_for(menu_item.url)) buffer << render_menu_items(menu_item_children(menu_item)) buffer end end end end end
我在app / helpers / application_helpers.rb中有一个帮手：
module ApplicationHelper def zurb_menu menu_items = Refinery::Menu.new(Refinery::Page.menu_pages) presenter = Refinery::Pages::ZurbMenuPresenter.new(menu_items, self) presenter end ...
然后从_header调用zurb_menu。 我正在我的标题函数中明确地做Navbar的东西，这可能是也可能不对; 你可以将它滚到ZurbMenuPresenter类中，我可能会这样做：
应用程序/视图/炼油厂/ _header.html.erb
您需要覆盖MenuPresenter。 具体来说，您需要使用render_menu_item函数将适当的类添加到顶级菜单的子级中。 我对Zerb Foundation不太熟悉，但这应该让你开始。
注意：未经测试的代码，我只是从我自己的Bootstrap菜单解决方案中切换了一些类名来让你入门，你可能需要做更多的工作。 我也将你的帮助代码添加到被覆盖的演示者，所以你可以在这样的视图中调用它： <%= Refinery::ZerbMenuPresenter.new(refinery_menu_pages, self).to_html %>
应用/演示/炼油厂/ zerb_menu_presenter.rb
module Refinery class ZerbMenuPresenter < ::Refinery::MenuPresenter self.css = "top-bar-section" self.dom_id = nil self.menu_tag = :section self.list_tag = "ul class='left'" def render_menu_item(menu_item, index) content_tag(list_item_tag, :class => menu_item_css(menu_item, index)) do buffer = ActiveSupport::SafeBuffer.new if menu_item_children(menu_item).present? buffer << link_to("#{menu_item.title}", context.refinery.url_for(menu_item.url), :class => 'has-dropdown') buffer << render_menu_items(menu_item_children(menu_item), 'dropdown') else buffer << link_to(menu_item.title, context.refinery.url_for(menu_item.url)) end buffer end end end end