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.