Comment créer un menu déroulant dans Dreamweaver

Vous pouvez placer votre étiquette avant ou après le menu déroulant.

Clé d'accès

C'est la clé qui peut être utilisée avec les touches Alt ou Option pour accéder directement à ce champ de formulaire. Cela rend vos formulaires très faciles à utiliser sans avoir besoin d'une souris.

Index de tabulation

Il s'agit de l'ordre dans lequel le champ de formulaire doit être accessible lors de l'utilisation du clavier pour parcourir la page Web.

Lorsque vous avez mis à jour vos options d'accessibilité, cliquez sur OK.

Sélectionnez le menu

Une fois le menu déroulant affiché en mode création de Dreamweaver, vous devez y ajouter les différents éléments. Sélectionnez d'abord le menu déroulant en cliquant dessus. Dreamweaver insère une autre ligne en pointillé autour du menu déroulant pour indiquer que vous l'avez sélectionnée.

Propriétés du menu

Le menu des propriétés changera pour les propriétés de liste / menu pour ce menu déroulant. Là, vous pouvez attribuer un ID à votre menu (où il est indiqué "sélectionner"), décider si vous voulez que ce soit un menu ou un menu, attribuez-lui une classe de style à partir de votre feuille de style et attribuez des valeurs au menu déroulant.

Quelle est la différence entre la liste et le menu?

Dreamweaver appelle un menu déroulant de menu tout menu déroulant ne permettant qu'une sélection. Une "liste" permet de multiples choix dans la liste déroulante et peut contenir plusieurs éléments.

Si vous souhaitez que le menu déroulant soit haut de plusieurs lignes, changez-le en type "liste" et laissez la case "sélections" décochée.

Ajouter de nouveaux éléments de liste

Pour ajouter de nouveaux éléments à votre menu, cliquez sur le bouton "Liste des valeurs …". Cela ouvrira la fenêtre ci-dessus. Tapez votre étiquette d'article dans la première case. C'est ce qui va s'afficher sur la page. Si vous laissez la valeur vide, c'est également ce qui sera envoyé dans le formulaire.

Ajouter plus et réorganiser

Cliquez sur l'icône plus pour ajouter d'autres éléments. Si vous souhaitez les réorganiser dans la liste, utilisez les flèches vers le haut et le bas à droite.

Donner à tous les objets des valeurs

Comme mentionné à l'étape 8, si vous laissez la valeur vide, l'étiquette sera envoyée au formulaire. Mais vous pouvez donner à toutes vos valeurs des valeurs - pour envoyer des informations alternatives à votre formulaire. Vous en ferez beaucoup pour des choses comme les menus de saut et les hyperliens.

Choisissez une valeur par défaut

Les pages Web affichent par défaut l’élément de liste déroulant indiqué en premier comme élément par défaut. Mais si vous souhaitez en sélectionner un autre, mettez-le en surbrillance dans la case "Sélection initiale" du menu Propriétés.

Voir votre liste en mode conception

Une fois les propriétés modifiées, Dreamweaver affiche votre liste déroulante avec la valeur par défaut sélectionnée.

Voir votre liste en mode Code

Si vous passez en mode Code, vous pouvez constater que Dreamweaver ajoute votre menu déroulant avec un code très net. Les seuls attributs supplémentaires sont ceux que nous avons ajoutés avec les options d'accessibilité. Le code est tout en retrait et très facile à lire et à comprendre. Il ajoute même l'attribut selected = "selected" car j'ai déjà dit à Dreamweaver que j'écrivais par défaut XHTML.

Enregistrer et afficher dans le navigateur

Si vous enregistrez le document et le visualisez dans un navigateur Web, vous pouvez voir que le menu déroulant ressemble à ce que vous attendez.

Mais ça ne fait rien …

Le menu que nous avons créé ci-dessus a l'air bien, mais il ne fait rien. Pour le faire faire, vous devez définir une action de formulaire sur le formulaire lui-même.

Heureusement, Dreamweaver comporte un formulaire de menu déroulant que vous pouvez utiliser immédiatement sur votre site sans avoir besoin de vous familiariser avec les formulaires, les CGI ou les scripts. C'est ce qu'on appelle un menu de saut.

Le menu de navigation de Dreamweaver définit un menu déroulant avec des noms et des URL. Ensuite, vous pouvez choisir un élément dans le menu et la page Web se déplacera à cet emplacement, comme si vous aviez cliqué sur un lien.

Accédez au menu Insertion et choisissez Formulaire, puis Menu contextuel.

Fenêtre du menu de saut

Contrairement au menu déroulant standard, le menu Sauter ouvre une nouvelle fenêtre permettant de nommer les éléments de menu et d'ajouter des détails sur le fonctionnement du formulaire.

Pour le premier élément, remplacez le texte "untitled1" par ce que vous voulez lire, puis ajoutez une URL vers laquelle ce lien devrait aller.

Ajouter des éléments à votre menu de saut

Cliquez sur l'élément ajouté pour ajouter un nouvel élément à votre menu de saut. Ajoutez autant d'articles que vous le souhaitez.

Options du menu de saut

Une fois que vous avez ajouté tous les liens souhaités, vous devez choisir vos options:

Ouvrir les URL dans

Si vous avez un jeu de cadres, vous pouvez ouvrir les liens dans un cadre différent. Vous pouvez également modifier l’option de la fenêtre principale en une cible spéciale afin que l’URL s’ouvre dans la nouvelle fenêtre ou ailleurs.

Nom du menu

Donnez à votre menu un identifiant unique pour la page. Cela est nécessaire pour que le script fonctionne correctement. Il vous permet également d’avoir plusieurs menus de saut sous une forme - il suffit de leur donner des noms différents.

Insérer le bouton Go après le menu

J'aime bien sélectionner ceci car parfois le script ne fonctionne pas lorsque le menu change. C'est aussi plus accessible.

Sélectionner le premier élément après le changement d'URL

Sélectionnez cette option si vous avez une invite telle que "Sélectionnez-en une" comme premier élément de menu. Cela garantira que cet élément reste par défaut sur la page.

Jump Menu Design Voir

Comme avec votre premier menu, Dreamweaver configure votre menu de saut en mode Création avec l'élément par défaut visible. Vous pouvez ensuite modifier le menu déroulant comme n'importe quel autre.

Si vous le modifiez, veillez à ne changer aucun identifiant sur les éléments, sinon le script risque de ne pas fonctionner.

Menu de saut dans le navigateur

Enregistrer le fichier et appuyer sur F12 affichera la page dans votre navigateur préféré. Là, vous pouvez sélectionner une option, cliquez sur "Go" et le menu de saut fonctionne!