Navigazione orizzontale

In questo capitolo impareremo come aggiungere la navigazione orizzontale o menu items al sito web.

Step 1 - Per creare voci di menu o navigazione orizzontale, aggiungiamo il seguente codice in <div id = “top-nav”> nel file index.html, che contiene l'elenco delle voci di menu.

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

Step 2- È un semplice elenco puntato per il menu principale. Per creare un collegamento ipertestuale, vai aldesign view o code view.

Step 3 - Seleziona l'elemento che desideri utilizzare come collegamento ipertestuale e premi Ctrl + K.

Step 4 - Fare clic sul pulsante Descrizione schermata….

Step 5 - Immettere il testo che si desidera come suggerimento sullo schermo e fare clic su OK.

Step 6 - Nel Text to display campo, inserisci Home e selezionare il file index.html e quindi fare clic su OK.

Step 7 - Allo stesso modo, aggiungi collegamenti ipertestuali per altre voci di menu, come mostrato nel codice seguente.

<!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 - Per impostare lo stile per la navigazione in alto, vai a Manage Styles pannello.

Step 9 - Fare clic con il pulsante destro del mouse su “#top-nav”e seleziona Modifica stile. Seleziona la categoria "Bordo" e modifica la larghezza in sottile.

Step 10 - Seleziona la categoria Box e deseleziona la spaziatura interna "Uguale per tutti" e inserisci 10 nei campi superiore e inferiore.

Step 11 - Vai al Position categoria.

Step 12 - Rimuovere il 50 dal heightcampo e fare clic su OK. Dal pannello Applica stili, fai clic su Nuovo stile ...

Step 13 - Entra #top-nav ulnel campo Selettore e selezionare il foglio di stile esistente dal menu a discesa "Definisci in". Nella categoria Blocco, seleziona il centro dal campo di allineamento del test e vai alla categoria Elenco.

Step 14 - Seleziona none dal list-style-type campo e fare clic su OK.

Step 15 - Ancora una volta, dal Apply Styles fare clic su Nuovo stile ... Invio #top-nav ul linel campo Selector. Quindi seleziona il foglio di stile esistente dal menu a discesa "Definisci in" e vai alla categoria Layout.

Step 16 - Seleziona inline dal display campo e fare clic su OK.

Step 17 - Vai al pannello Applica stili, fai clic su Nuovo stile ... Invio #top-nav ul li a nel campo Selettore e selezionare il foglio di stile esistente dal menu a discesa "Definisci in" e selezionare il bianco come colore del carattere.

Step 18 - Vai al Background categoria.

Step 19 - Seleziona green come colore di sfondo e vai al file Box category.

Step 20 - Imposta il file padding values e fare clic su OK.

Step 21- Ora andiamo di nuovo al pannello Applica stili e fai clic su Nuovo stile. accedere#topnav ul li a:hover nel campo Selettore e selezionare il foglio di stile esistente dal menu a discesa "Definisci in" e selezionare black come la font color.

Step 22 - Adesso vai al Background category.

Step 23 - Seleziona il colore di sfondo per la tua opzione di menu quando il mouse è posizionato sulla voce di menu e vai alla categoria Bordo.

Step 24- Seleziona lo stile, la larghezza e il colore del bordo e fai clic su OK. Per controllare come appare, vai al menu File e seleziona Anteprima nel browser.

Quando passi il mouse su una voce di menu, cambierà lo sfondo e il colore del carattere.