Il est d'usage d'identifier l'option de menu qui correspond à la page affichée. L'identification peut être réalisée par un changement de la couleur du texte ou de la couleur de fond, par l'ajout d'un élément visuel comme, par exemple, une flèche ou une image de fond, etc.
Si vous travaillez avec Bootstrap, vous n'aurez qu'à ajouter la classe active à l'élément <li> de l'option de menu. Sinon, libre à vous d'appeler la classe comme bon vous semble et d'y associer les règles CSS pour obtenir le résultat visuel désiré.
La difficulté reste de déterminer à quel <li> il faut ajouter cette classe. Le travail avec la façade Request vous permettra d'y parvenir.
La méthode currentRouteName() de la façade Route permet de comparer à une chaîne le nom de la route qui correspond à l'URL de la page active.
Par exemple, pour identifier le menu qui mêne à la page d'accueil, dont la route se nomme pages.accueil :
<li {!! Route::currentRouteName() == 'pages.accueil' ? ' class="active"' : null !!}><a href="{{ URL::route('pages.accueil') }}">Accueil</a></li>
La méthode is() de la façade Request permet de comparer à une chaîne l'URL de la page active, sans le nom de domaine.
Dans l'exemple suivant, on veut mettre l'indicatif visuel à cet élément lorsque l'URL de la page est au format http://mondomaine.com ou, son équivalent, http://mondomaine.com/.
<li {!! Request::is('/') ? ' class="active"' : null !!}><a href="{{ URL::route('pages.accueil') }}">Accueil</a></li>
Dans ce second exemple, on veut mettre l'indicatif visuel à l'élément <li> lorsque l'URL de la page est au format http://mondomaine.com/produits ou http://mondomaine.com/produits/3/details ou http://mondomaine.com/produits/nouveau, etc.
<li {!! Request::is('produits') || Request::is('produits/*') ? ' class="active"' : null !!}><a href="{{ URL::route('chalets.index') }}">Chalets</a></li>
« Whats the cleanest way to add the active class to bootstrap link components? ». Laracasts. https://laracasts.com/discuss/channels/general-discussion/whats-the-cleanest-way-to-add-the-active-class-to-bootstrap-link-components
« Best practice for handling "active" menu item in L5 ». Laracasts. https://laracasts.com/discuss/channels/general-discussion/best-practice-for-handling-active-menu-item-in-l5?page=1
▼Publicité
