Rails 3 - Dynamic Menu Item

J'ai un menu HTML dans un partiel et je veux rendre les éléments de menu dynamiques (changer les couleurs) selon la page où nous sommes. Comment puis je faire ça?Rails 3 - Dynamic Menu Item

Merci

Source

2010-11-26 donald

Une astuce courante qui est utilisée pour modifier l'apparence des menus pour refléter la page actuelle est de mettre un sélecteur CSS ou une classe qui reflète le nom de la page dans la balise body. Une fois que vous avez fait cela, vous pouvez créer des styles différents pour chaque variation du nom de la page que vous voulez.

Par exemple:

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

Ensuite, le CSS peut être tout ce que vous voulez, mais quelque chose comme:

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

Cette méthode assure une bonne séparation des préoccupations: les styles visuels (changement de vos couleurs) restez dans vos feuilles de style et hors de votre code.

Source

2010-11-26 22:14:33 Scott

Créez une aide pour générer le code HTML pour le menu et utilisez la variable controller.controller_name pour modifier la classe.

Source

2010-11-26 22:15:26

J'ai eu le même problème et j'ai créé des méthodes auxiliaires pour définir l'élément de menu actif.

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

Exemple de menu

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

Comme vous pouvez le voir dans le active_tab je passe le résultat attendu de la controller_path (/ est remplacé par _). La table active_tab compare son entrée avec le résultat de controller_path et retourne active à la fois beaucoup ou juste un onglet. Je suppose qu'il pourrait y avoir d'autres façons de le faire, mais je ne pouvais pas trouver quelque chose de mieux.

Source

2010-11-28 19:24:33

Rails 3 - Dynamic Menu Item

Répondre

Questions connexes