KOD XHTML W NAWIGACJI

Znane są trzy metody formatowania menu nawigacyjnego
1. Oparta na pełnej liście elementów z wszystkiemi możliwymi wyróżnikami

<div id="menu1">
   <ul>
     <li id="wyroznik1"> <a href="strona1" class="wyroznik2">STRONA 1</a></li>
   </ul>
</div>

2. Oparta na liście elementów, stosowana powszechnie z uwagi na oszczędność kodu.

<ul id="menu2">   
     <li> <a href="strona1">STRONA 1</a></li>   
</ul>

3. Bez listy stosowana w małych wyłącznie poziomych menu, zawyczaj w stopce.

<div id="menu3">   
     <a href="strona1">STRONA 1</a> 
</div>

Każda z podanych metod zamiast atrybutu id może stosować atrybut class w wypadku gdy występuje na stronie co najmniej dwukrotnie. Metody 2 i 3 mogą zawierać wyróżniki z atrybutami id lub class, jak w metodzie 1. Wyróżniki używane są w systemach nawigacji z zakładkami. Zakładka oznacza system menu sygnalizujący aktywną stronę. Może to być realizowane innym kolorem tła lub czcionki względnie przez oba te elementy jednocześnie. Lansowana jest zmiana tła zakładki na kolor strony, na ogół biały z usunięciem dolnego obramowania.

REGUŁY i SELEKTORY CSS w NAWIGACJI

Przedstawione powyżej kody XHTML dzięki techologii CSS mogą być prezentowane na ekranie monitora w formie menu; pionowego lub poziomego bez i z zakładkami. Wygląd menu zależy od zastosowanych reguł. Na poprawny obraz menu składa się od 3 do 5-7 reguł z których każda ma selektor z deklaracjami. Deklaracja składa się z właściwości i wartości. Pierwsza trudność to określenie ilości i nazw selektorów a następna to jakie deklaracje wpisać do określonych selektorów.

Pierwszy selektor o postaci  ul#menu2  jest połączeniem elementu ul z identyfikatorem #menu2 i zawiera deklaracje określające pozycje menu na stronie. Selektory mające postać ul#menu2 li, ul#menu2 a,   to selektory potomne, nazywane także kontekstowymi, połączone z elementami li i a. Selektor o postaci  ul#menu2 li:hover  to połączenie znanego już selektora potomnego  ul#menu2 li  z elementem pseudoklasy  :hover. Jakie deklaracje należy umieszczać w właściwych selektorach opisuje poniżej.

DEKLARACJE CSS W NAWIGACJI

Przejście z układu pionowego łączy, który zapewnia lista elementów, do układu poziomego uzyskuje się dzięki deklaracji {display:inline;} lub {float:left;}. Pierwsza deklaracja dostosowuje szerokość przycisku do długości napisów a druga pozwala dodatkowo na podanie szerokości, która jest jednakowa dla wszystkich przycisków. Stosując metodę 1 lub 2 z użyciem listy zawsze usuwamy punktory deklaracją {list-style-type:none;}. Typowy zestaw selektorów dla kodu XHTML, opisanego w metodzie 2 jako menu2 zamieszczono poniżej.

ARKUSZ STYLI CSS, reguły tj. cztery selektory z deklaracjami
Wszystkie cztery reguły umieszczone w arkuszu styli CSS nazywane są stylami.
ul#menu2  {list-style-type:none; margin:0; padding:0}
ul#menu2 li  {display:inline; background-color:blue; border:1px solid white; padding:5px 10px}
ul#menu2 a  {text-decoration:none; font:12px Verdana; color:white}
ul#menu2 li:hover  {background-color:red}

Efekt prezentacji ul#menu2 uzyskany dzięki tym selektorom z deklaracjami zamieszczono poniżej.


ANALIZA STYLI CSS tj. deklaracji z ich właściwościami i wartościami
ul#menu2  {usuwa punktory; ustawia marginesy i odstępy menu na zero; przesuwając menu do lewej krawędzi}
ul#menu2 li   {ustawia poziomo przyciski; tło niebieskie; biała ramka 1px; odstępy napisów od krawędzi G P D L białej ramki przycisku, wynoszące G=D=5px i P=L=10px}
ul#menu2 a   {tekst bez podkreśleń; czcionka 12px Verdana; kolor biały}
ul#menu2 li:hover  {po wskazaniu kursorem zmiana tła na czerwone}
 
Użycie w deklaracji CSS elementu listy ul przed identyfikatorem #menu2 ma na celu sygnalizacje istnienia w kodzie XHTML zależności <ul   id="menu2"> łączącej element ul z identyfikatorem #menu2 co wyklucza stosowanie samego #menu2 bez listy nieuporządkowanej np w postaci <div id="menu2">.