Création de Barres de menus avec Spry
Lorsque le pointeur de la souris survole une barre de menus, un sous-menu apparaît. Les barres de menu permettent d’accéder à de nombreuses options de menu à partir d’un menu principal propre et épuré. L’interactivité qu’ils fournissent lorsqu’un visiteur passe le pointeur de la souris sur une option de menu ajoute un élément dynamique à une page Web.
Les widgets de la barre de menus peuvent être horizontaux ou verticaux:
- Les barres de menu verticales sont généralement alignées dans le cadre, la colonne de table ou d’autres objets de mise en page (tels qu’un DIV ou un DIV AP) sur le côté gauche de la page.
- Les barres de menu horizontales sont généralement alignées en haut de la page et peuvent y être placées sans être insérées dans un objet de mise en page.
Le widget Spry pour insérer des widgets de barre de menus vous permet de générer des barres de menus avec deux niveaux de sous-menus. Par conséquent, un utilisateur peut cliquer sur une option de menu, voirun sous-menu avec un nouvel ensemble d’options, choisir l’une de ces options et choisir parmi un deuxième sous-menu.
Pour générer un widget de barre de menus, procédez comme suit:
- Enregistrez la page dans laquelle le widget sera inséré.
- Choisissez Insérer > Spry > Barre de menus Spry. Lorsque la boîte de dialogue de la barre de menus Spry apparaît, choisissez le format horizontal ou vertical.
- Après avoir généré un widget barre de menus, vous pouvez définir certaines propriétés de base de la barre de menus dans l’inspecteur de propriétés. Sélectionnez des éléments de menu ou des éléments de sous-menu du côté gauche de l’inspecteur de propriétés; puis modifiez-les à votre guise (voir Figure4) :
- Dans la zone de texte, entrez le texte qui apparaîtra dans le menu.
- Dans la zone Lien, entrez le lien qui s’ouvrira lorsque l’élément sera sélectionné.
- Dans la zone Titre, entrez le texte d’accessibilité qui apparaîtra dans la fenêtre du navigateur lorsqu’un utilisateur passe le pointeur de la souris sur une option de menu.
- Laissez la case Cible vide pour ouvrir le lien dans la même fenêtre de navigateur, ou entrez _blank pour ouvrir le lien dans une nouvelle fenêtre de navigateur.
- Utilisez les boutons plus (+) et moins (-) au-dessus des colonnes menu ou sous-menu (ou sous-sous-menu) pour ajouter ou supprimer de nouveaux éléments de menu. Utilisez les boutons Déplacer l’élément vers le haut et déplacer l’élément vers le bas au besoin pour modifier l’ordre des éléments de menu.
Figure 4 Définition des niveaux des options de la barre de menus dans l’inspecteur de propriétés.
Lorsque vous créez ou sélectionnez un widget de barre de menus, un bouton Désactiver les styles apparaît dans l’inspecteur de propriétés. Désactiver les styles n’affecte pas le rendu du style dans un navigateur, mais désactive plutôt le formatage dans la fenêtre de document. Vous pouvez ajuster le formatage des différentes propriétés de la barre de menus d’une barre de menus sélectionnée à l’aide du panneau Styles CSS.
Chaque barre de menus génère au moins une douzaine de styles CSS. La plupart de ces styles de CSS définissent le positionnement et la taille des menus et des sous-menus qui apparaissent lorsque auser passe le pointeur de la souris sur une option de menu. Le positionnement par défaut de ces menus est généralement correct et n’a pas besoin d’être ajusté. Vous pouvez créer une barre de menu personnalisée en définissant vos propres liens et texte, et lui donner un format attrayant en personnalisant les couleurs du texte et de l’arrière-plan.
Certaines options de style CSS contrôlent des éléments relativement discrets de la barre de menus, mais elles peuvent toutes être modifiées dans le panneau Styles CSS. Pour modifier les styles associés à un widget de barre de menus, développez SpryMenuBarHorizontal pourafficher une liste de styles de classe associés à cette feuille de style. En sélectionnant l’un de ces styles de classe dans la partie supérieure du panneau Styles CSS, vous pouvez modifier les propriétés de ce style dans la moitié inférieure du panneau Styles CSS.
Pour modifier la couleur d’arrière-plan ou de texte de la barre de menus, sélectionnez le style.MenuBarHorizontal a (pour une barre de menu verticale, ul.MenuBarVertical a). Lorsque le style est sélectionné dans le panneau Styles CSS, utilisez la boîte d’échantillon de couleur d’arrière-plan dans la moitié inférieure du panneau Styles CSS pour choisir une nouvelle couleur d’arrière-plan, et utilisez l’échantillon de couleur pour changer la couleur de la police (voir Figure 5).
Figure 5 Modification de la couleur du texte d’une barre de menus.
Une autre option consiste à modifier la couleur d’arrière-plan et de texte d’une option de menu survolée, en utilisant ces éléments:
- ul.MenuBarHorizontal a. MenuBarItemHover
- ul.MenuBarHorizontal a. MenuBarItemSubmenuHover
- ul.MenuBarHorizontal a. MenuBarSubmenuVisible
Le style des barres de menu verticales est similaire, mais avec Vertical à la place deHorizontal dans le nom du style.
Comme vous commencez à le voir, les barres de menus Spry offrent de nombreux éléments personnalisables. Pour les meilleurs résultats, expérimentez. Essentiellement, vous éditez le contenu des barres de menus soit dans l’inspecteur de propriétés, soit en sélectionnant l’un des nombreux styles CSS générés et en le modifiant dans le Stylespanel CSS.
D’accord, vous êtes seul maintenant! Amusez-vous avec ceux-ci et d’autres Sprywidgets. Et n’oubliez pas de rester en contact et de me faire savoir comment ils travaillent sur vos sites.