Css 带下拉导航的RefineryCMS 2.1.0和Zurb 4顶部菜单 我试图用Zurb基金会来设计一个应用最新版本的炼油厂的应用程序。我从这本指南开始

但最新版本的refinery使用“菜单演示器”来布局菜单

我已经做到了这一点：

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

这种方法很有效，但是元素并不完全正确，主要问题是我不知道如何或在哪里添加下拉类来使子元素下拉。在上面的代码中，子元素一直在扩展

---

感谢您的帮助

您需要覆盖菜单中心。具体来说，您需要使用

render\u menu\u项

函数将适当的类添加到顶级菜单的子菜单中。我对ZeRB基金会不太熟悉，但这应该让你开始。

注意：未经测试的代码，我刚刚从我自己的引导菜单解决方案中切换了一些类名来开始，您可能需要做更多的工作。我还将您的助手代码添加到覆盖的presenter中，因此您可以在如下视图中调用它：

app/presenters/refinery/zerb_菜单_presenter.rb

模块精炼
类ZerbMenuPresenter<：：精炼厂：：菜单中心
self.css=“顶栏部分”
self.dom_id=nil
self.menutag=：节
self.list_tag=“ul class='left'”
def渲染菜单项（菜单项，索引）
内容标签（列表项标签：class=>菜单项css（菜单项，索引））做什么
buffer=ActiveSupport:：SafeBuffer.new
如果菜单项子项（菜单项）。是否存在？
缓冲区“有下拉列表”）
缓冲区这是我的版本。。。测试；至少对我来说是这样

我使用了在另一个问题上找到的引导代码（上面评论中的链接）。但是我没有替换整个菜单演示器，而是只覆盖了我们需要的方法

创建Zurb菜单演示者文件：

app/presenters/refinery/pages/zurb\u菜单\u 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

<nav class="top-bar hide-for-small">
<ul class="title-area">

    <li class="name">
    <h1><a href="/">Home</a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<script src="http://foundation.zurb.com/public/assets/marketing_docs.js"></script>
<%=
    zurb_menu.to_html
%>

</nav>

然后从_标题调用zurb_菜单。我在header函数中显式地执行Navbar，这可能是正确的，也可能是错误的；您可以将其应用到ZurbMenuPresenter类中，我也可以这样做：

app/views/refinery/_header.html.erb

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

<nav class="top-bar hide-for-small">
<ul class="title-area">

    <li class="name">
    <h1><a href="/">Home</a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<script src="http://foundation.zurb.com/public/assets/marketing_docs.js"></script>
<%=
    zurb_menu.to_html
%>

</nav>







而不是在_菜单中如果使用快速_菜单，则可以重新排序页面。菜单页面可以正常工作，但不能按照管理中的顺序呈现页面。希望这对别人有帮助

菜单项=精炼厂：：菜单。新建（精炼厂：：页面。菜单页面）

menu items=Refinery:：menu.new（Refinery:：Page.fast\u menu）
嗨，TimK，我尝试过使用Bootstrap和RefineryCMS，但发现让样式工作起来相当尴尬。我现在正在看Zurb，如果我能让这个菜单工作，我会在这里发布答案。我猜你/我们需要修改MenuPresenter，请看——第四个答案是关于炼油厂2.1.0（我们不再有_菜单或_菜单_分支部分）我现在有一个Zurb中的示例nav正在工作，使用了一个_header.erb.html覆盖，它基本上反映了我的发现。看起来不错，但我还不明白隐藏菜单/响应功能。我认为要使下拉列表正常工作，您可能会幸运地使用我在上面的评论中发布的引导代码。如果您能解释您试图实现的目标，我或其他人可能会提供帮助…无需解释，我想我遇到的问题与此完全相同。子菜单项将永久展开。而且，菜单并不像它应该的那样在点击时展开——你也看到了吗？可能与（我在那里找到了一个解决方法-我的答案-但在我的网站上，单击会显示整个项目树，没有任何层次结构）相同的问题。您好@CJBrew-感谢您查看此信息！我想你已经发现了我的意思，但以防万一，这里是我目前所在位置的链接。我认为你是对的，菜单演示者需要修改以应用正确的菜单，在适当的地方有下拉菜单和下拉菜单，但我不知道如何做，并且已经尝试了几个小时-如果你有任何问题，请告诉我，我没有声誉投票这个答案，但它对我有效。经过以下细微修改。1.在应用程序帮助程序中，我需要菜单项=Refiner:：menu.new（Refiner:：Page.In\u菜单）而不是.menu\u页面。2.我需要在我的应用程序布局文件中的body标记之间放置_头代码。感谢@ghoppe对Hanks@TimK的支持。您是否有能够将其标记为答案的“代表”？：）至于“in_menu”--我在你原来的帖子中看到了，不知道是什么。我想我可能创建了一个提供“菜单页面”的助手。任何对你有用的东西。完美的解决方案！我只需将数据顶栏添加到导航元素。：）我已经调整了这个解决方案，以便
zurb_menu
可以传递各种菜单项和html/css选项。因此，它适用于任何部分，而不仅仅是标题。请参阅或。我在菜单中发现
的顺序错误，我不得不写一行代码将其反转。。。我将看一看fast_菜单，感谢fast_菜单是优化的范围，只包含订购在菜单中显示的活动页面。这是在refinerycms第2.1.1版中定义的。def fast_menu live.in_menu.order（arel_table[：lft]）包括（：parent，：translations）endcorrection:in_menu在Heroku上以正确的顺序显示，但在我的测试站点上以相反的顺序显示！。。。很奇怪。