Comment concevoir un menu personnalisé

Vous apprendrez ici à concevoir un menu personnalisé.

Voici comment le construire :

Voir

• Sélectionnez un « tableau » et placez-le sur le canevas ; dans la palette Propriétés, modifiez le nombre de colonnes et de fichiers pour obtenir un fichier et quatre colonnes ; ajustez également la hauteur du tableau pour simuler un en-tête.

• Sélectionnez chaque cellule une par une et, dans la palette Propriétés, modifiez la disposition en « Horizontal ».

• Placez quatre textes centrés sur le canevas et écrivez : « Accueil », « Produits », « Services » et « À propos », maintenez la touche commande (Mac) ou contrôle (Windows) enfoncée et faites glisser les éléments à l’intérieur des cellules, vous verrez une teinte bleue.

• Dans la bibliothèque « Composants Web », insérez une icône « Chevron vers le bas » à côté de « Produits », « Services » et « À propos ». Après avoir donné à chaque cellule une disposition horizontale, l’icône sera positionnée horizontalement par rapport au texte. Dans la palette Propriétés, vous pouvez ajuster l’espace entre le texte et l’icône.

• Pour les options de menu, placez un nouveau « Tableau » et, dans la palette Propriétés, modifiez les colonnes pour qu’elles soient au nombre de un et les lignes au nombre de trois.

• Maintenez la touche commande (Mac) ou contrôle (Windows) enfoncée et placez 3 textes dans chaque cellule pour « Élément 1 », « Élément 2 » et « Élément 3 ».

• Une fois le tableau sélectionné, allez dans la palette Propriétés et changez la couleur de toutes les options de bordure en gris clair et décochez la bordure intérieure qui sépare les cellules.

• Le « Tableau » que nous avons créé étant sélectionné, maintenez la touche Alt enfoncée et faites-le glisser pour le dupliquer, le placer sous « Services » et le dupliquer à nouveau pour « À propos de ». Une fois le « Tableau » sélectionné sous « À propos », accédez à la palette Propriétés et modifiez le nombre de lignes pour le porter à deux.

• Sélectionnez les tableaux d’éléments un par un, cliquez dessus avec le bouton droit de la souris et sélectionnez l’option « Grouper dans le panneau dynamique ».

• Veillez à ce que chaque « panneau dynamique » dépasse le bord du tableau qu’il contient afin que les événements que nous créons ensuite fonctionnent correctement.
• Sélectionnez les trois panneaux dynamiques qui fonctionnent comme des listes déroulantes, allez dans la palette Propriétés et cliquez sur l’icône « Caché dans la simulation ». Par défaut, les listes déroulantes ne seront pas visibles dans la simulation.

  

Evénements

La cellule « Produits » étant sélectionnée, accédez à la palette Événements et cliquez sur « Ajouter un événement ».

1. Dans la boîte de dialogue, cliquez sur « Choose Trigger », survolez la section « Mouse » et sélectionnez « On mouse enter ».
2. Dans « Choose Action », sélectionnez « Show hidden element » et sélectionnez le « Dynamic panel » qui agit comme une liste déroulante pour l’option « Products ». Cliquez sur « Ok » pour terminer la création de l’événement.

La cellule « Produits » étant toujours sélectionnée, accédez à la palette Événements et cliquez sur le « + » pour ajouter un événement.

1. Dans la boîte de dialogue, cliquez sur « Choose Trigger », survolez la section « Mouse » et sélectionnez « On mouse enter ».
2. Dans « Choisir une action », sélectionnez « Masquer l’élément » et sélectionnez les deux « panneaux dynamiques » qui servent de menus déroulants pour les options « Services » et « À propos ». Cliquez sur « Ok » pour terminer la création de l’événement.

Dans la palette Événements, entre les deux options, cliquez sur la flèche et changez-la en option « AVEC précédent », afin que les deux actions soient effectuées en même temps.

Répétez l’opération pour chaque option du menu supérieur et pour la liste déroulante correspondante. Dans chaque cas, nous devons sélectionner le « panneau dynamique » que nous voulons afficher et ceux que nous voulons cacher.

Sélectionnez la cellule « Accueil » et allez dans la palette Événements, cliquez sur « Ajouter un événement ».

1. Dans la boîte de dialogue, cliquez sur « Choose Trigger », survolez la section « Mouse » et sélectionnez « On mouse enter ».
2. Dans « Choose Action », sélectionnez « Hide element » et sélectionnez les trois « Dynamic panels » parmi les options. Cliquez sur « Ok » pour terminer la création de l’événement.

Sélectionnez les « Panneaux dynamiques » de l’option « Produits » et allez dans la palette « Evénements », cliquez sur « Ajouter un événement ».

1. Dans la boîte de dialogue, cliquez sur « Choose Trigger », survolez la section « Mouse » et sélectionnez« on Mouse Leave« .
2. Dans « Choose Action », sélectionnez « Hide element » et sélectionnez le même « Dynamic panel ». De cette façon, lorsque vous quitterez le « Dynamic panel », il ne sera plus affiché. Cliquez sur « Ok » pour terminer la création de l’événement.

Répétez la même opération pour chacun des « panneaux dynamiques ».

Sélectionnez la première cellule (Item 1) de la colonne du « Panneau dynamique » de l’option « Produits », accédez à la palette Événements et cliquez sur « Ajouter un événement ».

1. Dans la boîte de dialogue, cliquez sur « Choose Trigger », survolez la section « Mouse » et sélectionnez« on Mouse Over« .
2. Dans « Choose Action », sélectionnez « Change style » et dans le menu déroulant « Select style to change », choisissez background et modifiez la couleur. De cette façon, lorsque vous survolez l’élément 1, vous obtenez un effet de rétroaction. Cliquez sur « Ok » pour terminer la création de l’événement.

La cellule (élément 1) étant toujours sélectionnée, accédez à la palette des événements et cliquez sur le bouton « Copier tous les événements ». Sélectionnez ensuite chacune des cellules et cliquez sur l’option « Coller tous les événements ». La cible sera automatiquement modifiée.

Simulez votre prototype.