La méthode de cet article est minimaliste, il s’agit de créer un menu contextuel composé d’icônes qui se déplie lorsque la souris passe devant.
Le web regorge de modules jQuery compliqués et de méthodes alambiquées pour créer des menus contextuels suite à un clic ou au passage de la souris. L’objet de cet article est autrement plus simple : je veux simplement afficher un petit menu contextuel tout simple, et sans alourdir mon projet avec des dépendances.
Sommaire
Mise en place de la structure HTML
La structure HTML de mon document est toute simple : un contenu caché va apparaître comme par magie suite à un événement javascript. On remarque les classes fa qui sont appel aux visuels de Font Awesome mais on aurait aussi pu utiliser les icones iQuery UI ou encore des images. L’élément qui va me permettre de déplier tout le menu est une flèche qui pointe vers le bas.
|
1 2 3 4 5 6 7 8 |
<p>Hello <span class="toggle-menu"> <i class="fa fa-caret-down"></i> <span class="icons hidden"> <i class="fa fa-gear"></i> <i class="fa fa-gear"></i> <i class="fa fa-gear"></i> <i class="fa fa-gear"></i> </span> </span> </p> |
J’ai fait le choix de coller mon menu déroulant à du texte pour montrer la bonne intégration avec le contexte.
La feuille de style
Voici la feuille de style correspondante.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
.hidden { display: none; } .toggle-menu { position: relative; display: inline; } .btn-hover { display: inline; position: absolute; width: 100px; height: 20px; border: 1px solid #CCC; background-color: #EEE; padding: 5px; border-radius: 10px; box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2); text-align: center; } .btn-hover .fa-caret-down { opacity: 0.5; } |
La mise en place avec Javascript
Pour finir, ce code javascript peut figurer dans un fichier à part ou bien dans le corps de la page html.
|
1 2 3 4 5 6 7 8 9 |
<script> $('.toggle-menu').on('mouseover', function() { $(this).addClass('btn-hover'); $(this).children('.icons').removeClass('hidden'); }).on('mouseout', function() { $(this).children('.icons').addClass('hidden'); $(this).removeClass('btn-hover'); }); </script> |
Le résultat en images
Lorsque le menu n’est pas déplié, voici ce qui est affiché.
Suite au passage de la souris, les différents choix du menu sont proposés.
Avec un tout petit peu d’imagination, voilà un menu qui propose différents partages vers les réseaux sociaux.
Pour voir tout ceci mis en œuvre sur une page minimale, vous pouvez regarder le code de cette page d’exemple. Cette mise en œuvre fonctionne sans surprise sur un ordinateur, mais elle n’est pas très pratique sur un smartphone ou tablette car on doit cliquer ailleurs pour refermer le menu déroulé.
rien ne fonctionne
Bonjour, je vous conseille d’aller faire un tour sur cette page d’exemple sur laquelle vous pourrez examiner le code.
Pour rentrer dans le fil d’exécution de l’application, le code javascript doit être préfixé par une formule du type
$(function() {});ou encore faire partie d’un fichier à part.