2010-11-26 9 views
0

私は部分的にHTMLメニューを持っており、私たちがいるページに応じてメニュー項目を動的(色の変更)にしたいと考えています。どうやってやるの?Rails 3 - Dynamic Menu項目

おかげ

答えて

2

現在のページを反映するために、メニューの外観を変更するために使用される一般的なトリックは、bodyタグ内のページ名を反映したCSSセレクタやクラスを置くことです。

これを実行したら、必要なページ名のバリエーションごとに異なるスタイルを作成できます。例えば

<!-- @page_name is 'home' in this example --> 
<body class="<%= @page_name %>"> 

    <!-- Lots of html here --> 

    <div class="nav_links"> 
    <ul id="nav"> 
     <li class="home"><a href="/"><span>Home</span></a></li> 
     <li class="about_us"><a href="/about"><span>About us</span></a></li> 
     <li class="store"><a href="/store"><span>Shop</span></a></li> 
    </ul> 
    </div> 

次にCSSはあなたのような何もすることができますが、のようなもの:

body.home div.nav_links ul li.home { /* blah blah */ } 
body.about_us div.nav_links ul li.about_us { /* blah blah */ } 

は、この方法は、懸念の良好な分離を保証します。視覚的なスタイルは、(あなたの色の変更)あなたのスタイルシートにとどまり、コードから抜け出してください。

0

メニューのhtmlを生成するヘルパーを作成し、controller.controller_name変数を使用してクラスを変更します。

0

私は同じ問題を抱えていました。アクティブなメニュー項目を設定するためのヘルパメソッドを作成しました。あなたは私がcontroller_pathから期待される結果を渡すactive_tabで見ることができるように

def active_tab(id) 
    if id == menu_entry_id 
     'active' 
    else 
     'tab' 
    end 
    end 

    def menu_entry_id 
    if controller_path.match('/') 
     controller_path.gsub!('/', '_') 
    else 
     controller_path 
    end 
    end 

例メニュー

%li{:class => "#{active_tab 'admin_dashboard'}"}= link_to 'Dashboard', admin_dashboard_path 
%li{:class => "#{active_tab 'admin_customers'}"}= link_to 'Customers', admin_customers_path 

(/ _で置き換えられています)。 active_tabは、その入力をcontroller_pathの結果と比較し、それを多くの、または単にタブとしてアクティブに戻します。

私はそれを行う他の方法があるかもしれないと思うが、私は何か良いものを考え出すことができなかった。