Formation PUB030 : Laravel, 2019 Où sommes nous ?

25.2 Identification visuelle pour le menu actif


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.

Route::currentRouteName()

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 :

Vue Laravel (Blade)

<li {!! Route::currentRouteName() == 'pages.accueil' ? ' class="active"' : null !!}><a href="{{ URL::route('pages.accueil') }}">Accueil</a></li>

Request::is()

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

Vue Laravel (Blade)

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

Vue Laravel (Blade)

<li {!! Request::is('produits') || Request::is('produits/*') ? ' class="active"' : null !!}><a href="{{ URL::route('chalets.index') }}">Chalets</a></li>

Pour plus d'information

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

Veuillez noter que le contenu de cette fiche vous est partagé à titre gracieux, au meilleur de mes connaissances et sans aucune garantie.
Merci de partager !
Soumettre