Navigation horizontale

Dans ce chapitre, nous allons apprendre comment ajouter une navigation horizontale ou menu items sur le site Web.

Step 1 - Pour créer des éléments de menu ou une navigation horizontale, ajoutons le code suivant dans <div id = “top-nav”> dans le fichier index.html, qui contient la liste des éléments de menu.

<div id = "top-nav"> 
   <ul> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
   </ul> 
</div>

Step 2- C'est une simple liste à puces pour le menu supérieur. 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….

Step 5 - Saisissez le texte souhaité comme info-bulle et cliquez sur OK.

Step 6 - Dans le Text to display champ, entrez Home et sélectionnez le fichier index.html, puis cliquez sur OK.

Step 7 - De même, ajoutez des 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"> 
<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"> </div> 
         <div id = "main-content"> </div> 
         <div id = "footer"> </div> 
      </div> 
   </body>  
</html>

Step 8 - Pour définir le style de la navigation supérieure, accédez à la Manage Styles panneau.

Step 9 - Faites un clic droit sur “#top-nav”et sélectionnez Modifier le style. Sélectionnez la catégorie «Bordure» et changez la largeur en mince.

Step 10 - Sélectionnez la catégorie Boîte et décochez le remplissage «Identique pour tous» et entrez 10 dans les champs du haut et du bas.

Step 11 - Allez au Position Catégorie.

Step 12 - Retirez le 50 du heightchamp et cliquez sur OK. Dans le panneau Appliquer les styles, cliquez sur Nouveau style…

Step 13 - Entrez #top-nav uldans le champ Sélecteur et sélectionnez la feuille de style existante dans la liste déroulante «Définir dans». Dans la catégorie Bloc, sélectionnez centre dans le champ d'alignement de test et accédez à la catégorie Liste.

Step 14 - Sélectionnez none du list-style-type champ et cliquez sur OK.

Step 15 - Encore une fois, du Apply Styles panneau, cliquez sur Nouveau style… Entrez #top-nav ul lidans le champ Sélecteur. Sélectionnez ensuite la feuille de style existante dans la liste déroulante «Définir dans» et accédez à la catégorie Disposition.

Step 16 - Sélectionnez inline du display champ et cliquez sur OK.

Step 17 - Allez dans le panneau Appliquer les styles, cliquez sur Nouveau style… Entrée #top-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 18 - Allez au Background Catégorie.

Step 19 - Sélectionnez green comme couleur d'arrière-plan et accédez à la Box category.

Step 20 - Réglez le padding values et cliquez sur OK.

Step 21- Revenons maintenant au panneau Appliquer les styles et cliquez sur Nouveau style. Entrer#topnav ul li a:hover dans le champ Sélecteur et sélectionnez la feuille de style existante dans la liste déroulante «Définir dans» et sélectionnez black comme le font color.

Step 22 - Allez maintenant au Background category.

Step 23 - Sélectionnez la couleur d'arrière-plan de votre option de menu lorsque la souris survole l'élément de menu et accédez à la catégorie Bordure.

Step 24- Sélectionnez le style, la largeur et la couleur de la bordure, puis cliquez sur OK. Pour vérifier à quoi il ressemble, allez dans le menu Fichier et sélectionnez Aperçu dans le navigateur.

Lorsque vous passez la souris sur un élément de menu, cela changera la couleur de fond et de police.