Nawigacja pozioma

W tym rozdziale dowiemy się, jak dodać nawigację poziomą lub menu items do witryny.

Step 1 - Aby utworzyć pozycje menu lub nawigację poziomą, dodajmy następujący kod w <div id = “top-nav”> w pliku index.html, który zawiera listę pozycji menu.

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

Step 2- To prosta lista wypunktowana w górnym menu. Aby utworzyć hiperłącze, przejdź dodesign view lub code view.

Step 3 - Wybierz element, którego chcesz użyć jako hiperłącza i naciśnij Ctrl + K.

Step 4 - Kliknij przycisk ScreenTip….

Step 5 - Wprowadź tekst, który ma być wskazówką ekranową, i kliknij przycisk OK.

Step 6 - W Text to display wprowadź Home i wybierz plik index.html, a następnie kliknij OK.

Step 7 - Podobnie, dodaj hiperłącza do innych pozycji menu, jak pokazano w poniższym kodzie.

<!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 - Aby ustawić styl górnej nawigacji, przejdź do Manage Styles płyta.

Step 9 - Kliknij prawym przyciskiem myszy “#top-nav”i wybierz Zmień styl. Wybierz kategorię „Obramowanie” i zmień szerokość na cienką.

Step 10 - Wybierz kategorię Box i odznacz wypełnienie „Same for all” i wpisz 10 w górnych i dolnych polach.

Step 11 - Idź do Position Kategoria.

Step 12 - Usuń 50 z heighti kliknij OK. W panelu Zastosuj style kliknij opcję Nowy styl…

Step 13 - Wejdź #top-nav ulw polu Selektor i wybierz Istniejący arkusz stylów z listy rozwijanej „Zdefiniuj w”. W kategorii Blok wybierz środek z pola test-wyrównanie i przejdź do kategorii Lista.

Step 14 - Wybierz none z list-style-type i kliknij OK.

Step 15 - Znowu z Apply Styles kliknij opcję Nowy styl… Enter #top-nav ul liw polu Selector. Następnie wybierz Istniejący arkusz stylów z menu „Definiuj w” i przejdź do kategorii Układ.

Step 16 - Wybierz inline z display i kliknij OK.

Step 17 - Przejdź do panelu Zastosuj style, kliknij Nowy styl… Enter #top-nav ul li a w polu Selector i wybierz Istniejący arkusz stylów z listy rozwijanej „Define in” i wybierz biały jako kolor czcionki.

Step 18 - Idź do Background Kategoria.

Step 19 - Wybierz green jako kolor tła i przejdź do Box category.

Step 20 - Ustaw padding values i kliknij OK.

Step 21- Przejdźmy teraz ponownie do panelu Zastosuj style i kliknij Nowy styl. Wchodzić#topnav ul li a:hover w polu Selektor i wybierz Istniejący arkusz stylów z listy rozwijanej „Zdefiniuj w” i wybierz black jako font color.

Step 22 - Teraz idź do Background category.

Step 23 - Wybierz kolor tła dla opcji menu, gdy wskaźnik myszy znajduje się na elemencie menu, i przejdź do kategorii Obramowanie.

Step 24- Wybierz styl, szerokość i kolor obramowania i kliknij OK. Aby sprawdzić, jak to wygląda, przejdź do menu Plik i wybierz Podgląd w przeglądarce.

Najechanie myszą na dowolną pozycję menu spowoduje zmianę tła i koloru czcionki.