Vidéo: Création d'un menu horizontal simple en HTML et CSS 2025
Voici un excellent truc CSS pour transformer une liste à puces en une barre de navigation dans Dreamweaver avec un simple effet de survol. L'utilisation d'une liste à puces pour les barres de navigation est une convention bien acceptée pour les sites Web qui répondent aux normes d'accessibilité actuelles.
Les mêmes liens sont toujours contenus dans la liste non ordonnée, mais l'application des styles change radicalement leur apparence.
Pour créer une barre de navigation en utilisant CSS pour redéfinir la liste non ordonnée et les balises de liaison, procédez comme suit:
-
Cliquez pour placer votre curseur à l'endroit où vous souhaitez créer votre barre de navigation dans la page.
-
Entrez le texte que vous souhaitez utiliser comme liens, en les séparant en appuyant sur la touche Retour ou Entrée pour créer un retour de paragraphe.
Pour formater les liens en tant que liste non ordonnée, séparez chaque ligne de texte que vous voulez lier avec une balise
-
Créez des liens en sélectionnant successivement chaque partie de texte, en cliquant sur l'icône Lien hypertexte dans le panneau Insertion commune, puis en sélectionnant la page que vous souhaitez lier ou en entrant une URL.
-
Faites glisser pour sélectionner l'ensemble des liens, puis cliquez sur l'icône Liste non ordonnée dans l'inspecteur des propriétés.
Une puce apparaît au début de chaque lien. Si aucun lien n'est défini avec une puce distincte, cliquez sur pour supprimer l'espace entre elle et le lien avant elle, puis appuyez sur Retour ou Entrée pour séparer les liens avec un retour de paragraphe.
-
Pour ajouter un tag autour d'une liste de liens (ou de tout autre contenu déjà présent sur une page), sélectionnez le contenu, puis cliquez sur l'icône Div dans le panneau Insertion commune.
La boîte de dialogue Insérer une division s'ouvre.
L'ajout d'un tag autour de la liste de liens non ordonnée est utile si vous souhaitez ajouter du format.
-
Choisissez Sélection de l'enveloppe dans la liste déroulante Insérer.
Pour un contrôle plus précis de l'endroit où vous ajoutez une nouvelle balise, vous pouvez choisir des options dans la liste déroulante Insérer en haut de la boîte de dialogue Insérer une div.
-
Entrez un nom dans le champ Classe ou le champ ID.
Une balise portant le nom de la classe ou de l'ID que vous avez entré est ajoutée automatiquement à la page entourant la liste des liens.
-
Au bas de la boîte de dialogue Insérer une division, cliquez sur le bouton Nouvelle règle CSS.
Le nouveau nom de la règle CSS est ajouté à la liste des noms de style dans le panneau CSS Designer.
-
Dans le panneau Propriétés, spécifiez les paramètres souhaités pour la couleur, l'arrière-plan, la taille, les marges et le remplissage.
La mise en forme du style est automatiquement appliquée au contenu de la balise, car vous avez appliqué le style tel que vous l'avez créé aux étapes 5 à 7.
-
Pour créer un style composé qui formatera la liste non ordonnée uniquement lorsqu'elle est utilisée dans la barre de navigation, créez un style composé qui inclut le nom de la classe. navbar:
-
Placez votre curseur n'importe où dans la liste à puces.
-
Cliquez sur le signe plus (+) en haut du panneau Sélecteurs.
-
Dans le champ Nom du sélecteur, assurez-vous que Dreamweaver est entré automatiquement. navbar ul comme nom d'un nouveau style dans le panneau Sélecteurs.
-
Dans le panneau Propriétés, définissez les marges et le remplissage à 0.
-
-
Créez un style composé pour redéfinir les balises d'élément de liste:
-
Placez votre curseur n'importe où dans la liste à puces.
-
Cliquez sur le signe plus en haut du panneau Sélecteurs.
-
Dans le champ Nom du sélecteur, assurez-vous que Dreamweaver est entré automatiquement. navbar ul li comme nom d'un nouveau style dans le panneau Sélecteurs.
-
Dans le panneau Propriétés, définissez l'affichage sur Inline.
-
Modifiez le type de style de liste sur Aucun pour supprimer la puce.
-
Définissez les marges gauche et droite sur 20 pixels.
Cette étape sépare les éléments de la liste les uns des autres dans la liste horizontale. Vous pouvez modifier le paramètre pour créer la quantité d'espace entre les liens qui correspond le mieux à votre conception.
-
-
Créez un style pour redéfinir la balise de lien:
-
Cliquez pour placer votre curseur dans un lien dans la barre de navigation.
-
Cliquez sur le signe plus en haut du panneau Sélecteurs.
-
Si vous souhaitez modifier le nom du style, double-cliquez sur le nom dans le panneau Sélecteurs et entrez le nom que vous souhaitez utiliser.
-
Dans la section Texte du panneau Propriétés, définissez Text-Decoration sur None.
-
Toujours dans la section Texte, choisissez une couleur dans le puits de couleur pour spécifier la couleur des liens lorsqu'ils sont chargés sur une page.
-
-
Créez un nouveau style pour redéfinir la balise hover-link afin que la couleur du lien change lorsqu'un utilisateur passe un curseur sur le lien:
-
Cliquez sur le signe plus en haut du panneau Sélecteurs.
-
Dans le champ Nom du sélecteur, entrez. navbar a: hover.
-
Dans la section Texte du panneau Propriétés, définissez Text-Decoration sur None.
-
Toujours dans la section Texte, choisissez une couleur dans le puits de couleur pour spécifier la couleur du lien lorsque les utilisateurs placent leur curseur sur le lien.
-
-
Créez un nouveau style pour redéfinir la balise de lien visité afin que la couleur du lien change après qu'un utilisateur clique sur un lien:
-
Cliquez sur le signe plus en haut du panneau Sélecteurs.
-
Dans le champ Nom du sélecteur, entrez. navbar a: visité.
-
Dans la section Texte du panneau Propriétés, définissez Text-Decoration sur None.
-
Toujours dans la section Texte, choisissez une couleur dans le puits de couleur pour spécifier la couleur du lien après sa visite.
-
-
Cliquez sur le bouton En direct en haut de l'espace de travail ou cliquez sur le bouton Aperçu pour afficher la page dans un navigateur afin de voir l'effet des styles de lien.
