Navigation verticale
Dans ce chapitre, nous allons apprendre comment ajouter une navigation verticale ou des éléments de menu au site Web. Allons-y étape par étape.
Step 1 - Pour créer des éléments de menu ou une navigation verticale, ajoutons le code suivant dans <div id = “left-nav”> dans le fichier index.html qui contient la liste des éléments de menu.
<div id = "left-nav">
<p>Site Navigation</p>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>Step 2- C'est une simple liste à puces pour votre menu principal. Pour créer un lien hypertexte, accédez à ladesign view ou code view.
Step 3 - Sélectionnez l'élément que vous souhaitez utiliser comme lien hypertexte et appuyez sur Ctrl + K.
Step 4- Cliquez sur le bouton Info-bulle…. Entrez le texte souhaité commescreentip et cliquez sur OK.
Step 5 - Dans le Text to display champ, entrez Home et sélectionnez le fichier index.html, puis cliquez sur OK.
À ce stade, notre page index.html se présente comme suit -
Step 6 - Ajoutez plus d'hyperliens pour d'autres éléments de menu, comme indiqué dans le code suivant.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" />
<style type = "text/css"></style>
<link href = "sample.css" rel = "stylesheet" type = "text/css" />
</head>
<body>
<div id = "container">
<div id = "header"></div>
<div id = "top-nav">
<ul>
<li><a href = "index.html" title = "Site Home Page">Home</a></li>
<li><a href = "index.html" title = "Menu Item 1.">Menu Item 1</a></li>
<li><a href = "index.html" title = "Menu Item 2.">Menu Item 2</a></li>
<li><a href = "index.html" title = "Menu Item 3.">Menu Item 3</a></li>
</ul>
</div>
<div id = "left-nav">
<p>Site Navigation</p>
<ul>
<li><a href = "index.html" title = "Site Home Page">Home</a></li>
<li><a href = "index.html" title = "Navigation Item 1.">Navigation Item 1</a></li>
<li><a href = "index.html" title = "Navigation Item 2.">Navigation Item 2</a></li>
<li><a href = "index.html" title = "Navigation Item 3.">Navigation Item 3</a></li>
</ul>
</div>
<div id = "main-content"></div>
<div id = "footer"></div>
</div>
</body>
</html>Step 7- Pour définir le style de la navigation supérieure, accédez au panneau Gérer les styles. Faites un clic droit sur#left-nav et sélectionnez Modifier le style…
Step 8 - Entrez la valeur 0,9 dans le champ Taille de la police et sélectionnez em dans la liste déroulante à côté de la taille de la police et accédez à la catégorie Boîte.
Step 9- Cochez le remplissage «Même pour tous» et entrez 5 dans le champ supérieur et cliquez sur OK. Dans le panneau Appliquer les styles, cliquez sur Nouveau style…
Step 10 - Entrez #left-nav uldans le champ Sélecteur. Sélectionnez la feuille de style existante dans la liste déroulante «Définir dans» et dans la catégorie Liste, n'en sélectionnez aucune dans le champ de type de style de liste et cliquez sur OK.
Step 11 - Encore une fois, du Apply Styles panneau, cliquez sur New Style. Décochez le remplissage «Identique pour tous». Entrez 0,2 dans le champ du bas et cliquez sur OK.
Step 12 - Entrez #left-nav ul li dans le champ Sélecteur et sélectionnez la feuille de style existante dans la liste déroulante «Définir dans» et accédez à la catégorie Boîte.
Step 13 - Accédez au panneau Appliquer les styles et cliquez sur Nouveau style.
Step 14 - Entrez #left-nav ul li a dans le champ Sélecteur et sélectionnez la feuille de style existante dans la liste déroulante «Définir dans» et sélectionnez le blanc comme couleur de police.
Step 15- Allez dans la catégorie Arrière-plan. Sélectionnez la couleur comme couleur d'arrière-plan
Step 16 - Allez au Box category et définissez les valeurs de remplissage.
Step 17 - Allez au LayoutCatégorie. Sélectionnerblock du display liste déroulante et cliquez sur OK.
Step 18- Revenons maintenant au panneau Appliquer les styles et cliquez sur Nouveau style. Entrer#left-nav ul li a:hoverdans le champ Sélecteur et sélectionnez la feuille de style existante dans la liste déroulante «Définir dans». Sélectionnez le noir comme couleur de police.
Step 19- Allez maintenant dans la catégorie Arrière-plan. Sélectionnez la couleur d'arrière-plan de votre option de menu lorsque la souris survole l'élément de menu et cliquez sur OK.
Step 20 - Pour vérifier à quoi il ressemble, allez dans le menu Fichier et sélectionnez Aperçu dans votre navigateur.
Lorsque vous passez la souris sur un élément de menu, il changera sa couleur d'arrière-plan et de police.