Dans l'exemple ci-dessous, nous avons un menu classique Bootstrap. Il faut noter qu'aucune class active n'est présente :
<div class="navbar navbar-default span12" role="navigation">
<...>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/fjLearning/"><g:message code="menu.home" /></a></li>
<li><a href="/fjLearning/page/training"><g:message code="menu.training" /></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><g:message code="menu.about" /> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/fjLearning/page/about"><g:message code="menu.about.perso" /></a></li>
<li class="divider"></li>
<li class="dropdown-header"><g:message code="menu.about.site" /></li>
<li><a href="/fjLearning/page/under"><g:message code="menu.underTheHood" /></a></li>
<li><a href="#">FAQ</a></li>
</ul>
</li>
</ul>
</div>
</div>
Pour que cela fonctionne, j'ai juste ajouté dans chaque page :
<body>
<script>
$(document).ready(function() {
$('a[href="' + this.location.pathname + '"]').parent().addClass('active');
});
</script>
...
A présent, lorsque je clique sur un des éléments de mon menu, il est automatiquement sélectionné.
Si vous voulez voir un exemple pratique, vous pouvez voir mon projet Grails sur GitHub : https://github.com/drieu/fjLearning
Voici les deux fichiers utiles :
https://github.com/drieu/fjLearning/blob/master/grails-app/views/layouts/_menu.gsp
https://github.com/drieu/fjLearning/blob/master/grails-app/views/page/training.gsp
Aucun commentaire:
Enregistrer un commentaire