Nawigacja pionowa

W tym rozdziale dowiemy się, jak dodać do witryny nawigację pionową lub elementy menu. Chodźmy krok po kroku.

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

<div id = "left-nav"> 
   <p>Site Navigation</p> 
   <ul> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
   </ul> 
</div>

Step 2- To prosta lista wypunktowana do Twojego górnego 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…. Wprowadź żądany tekst jako plikscreentip i kliknij OK.

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

Na tym etapie nasza strona index.html wygląda następująco -

Step 6 - Dodaj więcej hiperłączy 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">
<!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- Aby ustawić styl górnej nawigacji, przejdź do panelu Zarządzaj stylami. Kliknij prawym przyciskiem myszy#left-nav i wybierz Zmień styl…

Step 8 - Wprowadź wartość 0,9 w polu rozmiaru czcionki i wybierz em z listy rozwijanej obok rozmiaru czcionki i przejdź do kategorii Box.

Step 9- Zaznacz dopełnienie „To samo dla wszystkich” i wpisz 5 w górnym polu i kliknij OK. W panelu Zastosuj style kliknij opcję Nowy styl…

Step 10 - Wejdź #left-nav ulw polu Selector. Wybierz Istniejący arkusz stylów z menu rozwijanego „Zdefiniuj w” iw kategorii Lista, nie wybieraj żadnego z pola typu stylu listy i kliknij OK.

Step 11 - Znowu z Apply Styles kliknij New Style. Odznacz dopełnienie „Jednakowe dla wszystkich”. Wpisz 0.2 w dolnym polu i kliknij OK.

Step 12 - Wejdź #left-nav ul li w polu Selector i wybierz Istniejący arkusz stylów z listy rozwijanej „Define in” i przejdź do kategorii Box.

Step 13 - Przejdź do panelu Zastosuj style i kliknij Nowy styl.

Step 14 - Wejdź #left-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 15- Przejdź do kategorii Tło. Wybierz kolor jako kolor tła

Step 16 - Idź do Box category i ustaw wartości dopełnienia.

Step 17 - Idź do LayoutKategoria. Wybierzblock z display i kliknij OK.

Step 18- Teraz przejdźmy ponownie do panelu Zastosuj style i kliknij Nowy styl. Wchodzić#left-nav ul li a:hoverw polu Selektor i wybierz Istniejący arkusz stylów z listy rozwijanej „Zdefiniuj w”. Wybierz czarny jako kolor czcionki.

Step 19- Teraz przejdź do kategorii Tło. Wybierz kolor tła dla opcji menu, gdy wskaźnik myszy znajduje się na elemencie menu, i kliknij przycisk OK.

Step 20 - Aby sprawdzić, jak to wygląda, przejdź do menu Plik i wybierz Podgląd w przeglądarce.

Gdy najedziesz myszą na dowolną pozycję menu, zmieni się jej tło i kolor czcionki.