Dynamic menu ruby on rails and partial
i'm pretty new to rails and would like some help with implementing a dynamic menu using partials.
As of right now, my code is as follows:
the menu partial:
.three.columns
%ul#nav
%li{:class => @active_page=="about" ? "active_page" : ""}
%a{:href => "../pages/about"} About
%li{:class => @active_page=="careers" ? "active_page" : ""}
%a{:href => "../pages/careers"} Careers
%li{:class => @active_page=="contact" ? "active_page" : ""}
%a{:href => "../pages/contact"} Contact
the view:
html...
= render :partial => 'shared/aboutmenu_nav'
more html...
the pages helper:
def @active_page(c)
controller.action_name == c
end
Note: active_page
is the class that I would like to pass to the li
if the user is on the corresponding page. For example, if the user is on the Contact page, the active_page class would be passed to only the Contact li element.
I've tried several solutions including creating multiple CSS versions and passing a class on the body
corresponding with the page? for example,
%body{:class => @page_name}
and then defining @page_name in the pages_helper as follows:
def page_name
@path.parameterize('_') unless @path.blank?
end
Neither of these versions seem to work, as the former (@act开发者_如何学Cive_page) does not yield any results. Similarly, I was unable to assign a class on the body tag--when I checked the source code, the body tag did not have any classes.
I'd appreciate any help on how to implement a dynamic menu using partials. If there is a method I have not tried please feel free to inform me. I sincerely appreciate all of your help, and I'm very thankful for your time! Thank you!
Using Kanadada's solution. The page literally displays the following text where the styled menu should appear:
<li class="">
<a href="/pages/about">About</a>
</li>
<li class="active_page">
<a href="/pages/careers">Careers</a>
</li>
<li class="">
<a href="/pages/contact">Contact</a>
</li>
This code would be great if it was in the source code; however, the source does not seem to recognize it... instead the source code shows the following code:
<li class=""><a href="/pages/about">About</a></li><li class="active_page"><a href="/pages/careers">Careers</a></li><li class=""><a href="/pages/contact">Contact</a></li>
I suspect that it might have something to do with the way =top_menu
is interpreted in HAML?
Add these methods to helpers/appalication_helper.rb
def active_menu?(path, path_right=request.path)
(URI::parse(path).path == path_right) rescue false
end
def top_menu
[
"About", "../pages/about",
"Careers", "../pages/careers",
"Contact", "../pages/contact"
].each_slice(2).map do |name, path|
content_tag(:li, link_to(name, path),
:class => (active_menu?(path) ? "active_page" : ""))
end.join('').html_safe
end
Now in your view:
.three.columns
%ul#nav
= top_menu
Note:
Use route helpers for path instead of hard coding them. Assuming you have a controller called PagesController
, you can rewrite the top_menu
method as follows:
def top_menu
[
"About", about_pages_path,
"Careers", careers_pages_path,
"Contact", contact_pages_path
].each_slice(2).map do |name, path|
content_tag(:li, link_to(name, path),
:class => (active_menu?(path) ? "active_page" : ""))
end.join('').html_safe
end
精彩评论