RefineryCMS 2.1.0 and Zurb 4 Top menus with drop down navigation

Question

I am trying to use the Zurb base to build an application built using the latest refinery. I started with this guide

http://blog.flatironschool.com/post/54511602806/build-a-blog-based-site-with-refinerycms

but the latest version of the refinery uses the "menu-presenter" to layout the menu.

I'm so far away:

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

Similar work. However, the elements are not entirely correct, and the main problem is that I do not know how and where to add a drop-down class to display child elements. With the code above, the children just expand all the time.

thanks for the help

Answer 1

in_menu, fast_menu, . menu_pages , , admin. , -.

menu_items = Refinery:: Menu.new(Refinery:: Page.menu_pages)

menu_items = Refinery:: Menu.new(Refinery:: Page.fast_menu)

Answer 2

... ; , .

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

/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
...

zurb_menu _header. Navbar , ; ZurbMenuPresenter, :

///_header.html.erb

<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>

Answer 3

MenuPresenter. , render_menu_item. Zerb Foundation, .

Note: untested code, I just switched some class names from my own Bootstrap menu so that you get started, you may have to work a bit. I also add your helper code to the overridden master, so you can just call it like this:<%= Refinery::ZerbMenuPresenter.new(refinery_menu_pages, self).to_html %>

application / Leading / factory / 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