Aujourd’hui, petite présentation du plugin jQuery SmartMenus, qui permet d’ajouter facilement des menus déroulants à plusieurs niveaux aux pages HTML intégrées avec Bootstrap.
Présentation
Bootsrap est un framework d’intégration HTML et CSS vraiment performant et efficace pour créer tout types design web responsive. Il propose par défaut de nombreux composants ou éléments réutilisables à intégrer dans un design : boutons, formulaires, onglets… Néanmoins, un fonctionnalité qui manque très souvent est la possibilité d’avoir une navigation à plusieurs niveaux au survol.
En effet, Bootstrap propose par défaut une navigation au clic, pour pouvoir être compatible mobile, mais on veut souvent avoir une navigation au survol sur ordinateur de bureau et laptop.
Le plugin SmartMenus règle ce problème. Il permet d’ajouter facilement plusieurs niveaux de sous-navigation, qui seront compatibles mobile avec un comportement parfait sur les petits formats d’écrans : déroulement/enroulement en accordéons des différents niveaux de navigation.
Utilisation
L’utilisation de SmartMenus est très facile, il suffit de joindre à sa page HTML le fichier JS du plugin, le fichier JS de l’extension pour Bootstrap du plugin :
<script src="chemin_fichier/jquery.smartmenus.min.js"></script> <script src="chemin_fichier/jquery.smartmenus.bootstrap.min.js"></script>
Et la feuille de style du plugin :
<link href="assets/stylesheets/jquery.smartmenus.bootstrap.css" rel="stylesheet">
Le tout est très léger (25Ko pour le Javascript et 4Ko pour le CSS).
Ensuite, l’utilisation est très simple, avec de simples paramètres à ajouter et modifier directement dans le HTML, au niveau du menu sur lequel on veut travailler. Pas de hacks multiples et compliqués à modifier dans le HTML, le CSS ou le JS du design :
<ul class="nav navbar-nav" data-sm-options="{ showTimeout: 0, subMenusMinWidth: '100%' }">
<li>
<a href="#">Votre Centre PMA</a>
</li>
...
Ici, setTimeout permet de gérer la vitesse d’apparition du sous-menus et subMenusWidth gère la largeur voulue du sous-menu. On dispose de toute une liste de paramètres qui permettent de personnaliser facilement son menus, son comportement et son apparence.
En conclusion, un très bon plugin à utiliser sans modération.