NAWIGACJA GLOBALNA i LOKALNA z ZAKŁADKAMI

autor Krzysztof Gajewski

Systemy nawigacji z zakładkami opisywane są w czterech książkach, wydanych przez HELION do maja 2009r, a ich tytuły zamieszczono w prawej kolumnie. Podane tam przykłady reguł CSS w celu sygnalizacji wyróżnionej zakładki, nazywane także podświetleniem aktywnej strony, korzystają z licznej grupy selektorów potomnych typu; body#strona1 li.strona1, body#strony2 li.strona2,   itd oraz na każdej stronie z kodu XHTML <body id="strona1"> , <body id="strona2"> itd. Reguły selektorów i kod XHTML nawigacji jest rozbudowany a Pani Rachel Adrew zastrzega się że konstrukcja jest zapożyczona od Joshuy Kaufmana (vide, Analiza str.94). Rozwiązanie Pana Richard Yorka jest kompletne i nieco prostrze. Reguły selektorów Dan Cederholma są niekompletne gdyż nie spełniają warunku podświetlenia aktywnej strony. Natomiast Pan David Sawyer McFarland opisał to jeszcze krócej, albo prawie wcale.

Pani Jennifer Niederst Robbins w swej książce “Projektowanie stron internetowych” na stronie 359 w sprawie nawigacji z wykorzystaniem zakładek odsyła zainteresowanych do stron czterech autorów, dając tym samym do zrozumienia że woli nie poruszać tego tematu. Natomiast Jon Duckett w książce "XHTML i CSS" na str.297 zamieszcza rysunek 6.8 z widokiem menu i wspomina o nawigacji globalnej i lokalnej z zakładkami podając skomplikowany kod XHTML pozbawiony jednak arkusza CSS.

Zdziwiony takim potraktowaniem tego tematu przez zawodowych projektantów na stronie nawigacja pozioma podałem dwa proste projekty zakładek z sygnalizacją wybranej strony i trzeci skomplikowany. Chcąc wykorzystać zakładki w pasku globalnym i lokalnym nawigacji poziomej, tworzonej dla mojej strony autorskiej z projektami XHTML i CSS, zająłem się tym tematem. Stworzyłem bardzo prosty kod XHTML i CSS bez selektorów  body#strona1  itd, dzięki czemu układ jest prosty i zrozumiały.

OPIS KODU XHTML

Kod XHTML to dwie listy elementów o tej samej nazwie umieszczone jedna pod drugą. Różnią się nazwami linków prowadzonych do stron. Strony zakładek to czerwone przyciski stron aktywnych posiadających odwołanie do selektora klas   class="zakladka". Górne menu to nawigacja globalna, jednakowa na każdej stronie, globalna dla całej witryny. Dolne menu to nawigacja lokalna pomocnicza inna w każdej sekcji witryny ale jednakowa w danej sekcji. 

<ul class="menu6">
      <li> <a href="home.htm"> HOME     </a>  </li>
      <li> <a href="nag1.htm"> NAGŁÓWKI </a>  </li>
      <li> <a href="naw1.htm" class="zakladka"> NAWIGACJA </a> </li>
      <li> <a href="tek1.htm"> TEKSTY   </a>  </li>
      <li> <a href="kol1.htm"> KOLUMNY  </a>  </li>	
      <li> <a href="teo1.htm"> TEORIA   </a>  </li>
</ul>	
	
   <ul class="menu6"> 
	<li> <a href="naw1.htm">NAWIGACJA </a>  </li>
	<li> <a href="naw2.htm">POZIOMA   </a>  </li> 
	<li> <a href="naw3.htm">PIONOWA   </a>  </li>
	<li> <a href="naw4.htm">STOPKI    </a>  </li> 
	<li> <a href="naw5.htm" class="zakladka">GLOB.LOK.zak </a> </li> 
	<li> <a href="#">                 </a>  </li> 				 
   </ul>

ul.menu6 globalne górne i lokalne dolne, zakładki to aktywne strony mające czerwony kolor.

Prezentowane menu zapewnia dostęp do N sekcji mających po N stron co wyraża się wzorem N 2 + 1. Dla N=6, oznaczającego ilość przycisków w poziomie, całkowita ilość dostępnych stron wynosi 36 +1. Widoczne powyżej dwa poziome paski menu, górne globalne i dolne lokalne, z ostatnim wolnym - rezerwowym przyciskiem, uzyskano dzięki regułom arkusza CSS zamieszczonego poniżej z analizą każdego selektora i uwagami.

ul.menu7 globalne górne i lokalne dolne, zakładki to aktywne strony mające zielony kolor.

Ta sama wersja menu jednak z mniejszymi odstępami między przyciskami, zamiast 2px tylko 1px, oraz inny kolor aktywnych - podświetlonych stron. Jednolity kolor tła przycisków można zastąpić tzw. gradientem, co będzie kontynuowane na kolejnych stronach w dziale GRAFIKA. Zmiana wymiaru przycisków lub czcionki jest możliwa wymaga jednak zmian w arkuszu CSS.

ARKUSZ CSS, ANALIZA REGUŁ

ARKUSZ STYLI CSS, reguły tj. pięć selektorów z deklaracjami
Wszystkie pięć reguł umieszczonych w arkuszu styli CSS nazywane jest stylami.
ul.menu6 {list-style-type:none; width:600px; margin:0; padding:0; margin:0 auto;}
ul.menu6 li  {float:left; width:98px; height:15px; text-align:center; background-color:blue; border:1px solid white}
ul.menu6 a  {text-decoration:none; font:12px Arial,sans-serif; font-weight:bold; color:white}
ul.menu6 li:hover  {background-color:red}
ul.menu6 .zakladka  { background-color:red; display:block}
 
ANALIZA STYLI CSS, tj. deklaracji z ich właściwościami i wartościami
ul.menu6  wyklucza numeracje lub wypunktowanie listy, ustala szerokość obu pasków na 600px, zeruje marginesy i odstępy obu pasków, ustawia paski centrycznie na stronie
ul.menu6 li  do lewej krawędzi = poziome ustawienie przycisków, szerokość 98px, wysokość 15px, tekst centrycznie, tło niebieskie, obramowanie białe 1px zwiększa szerokość z 98px do 100px
ul.menu6 a  tekst bez podkreśleń, czcionka 12px Arial, gruba, biała
ul.menu6 li:hover  zmiana koloru tła na czerwone po wskazaniu kursorem przycisku
ul.menu6 .zakladka  sygnalizacja aktywnej strony czerwonym kolorem tła, na całej powierzchni przycisku
 

ZAKŁADKI wg. DANA CEDERHOLMA

Kod XHTML zawiera tylko jedną listę z zakładkami i działa podobnie jak górna lista globalna. Zaletą układu jest fakt że obramowanie zakładki wzrasta razem z powiększaniem tekstu. Dodatkowy wiersz <body id="intro"> oraz w każdym wierszu listy człon id="t-nazwa strony" nie spełniają żadnej funkcji gdyż w książce brak jest deklaracji dla tych selektorów. Stąd list do autora w sprawie brakującego kodu, oraz prośba o oryginale obrazki. 

<body id="intro">
<ul id="nav">
      <li id="t-intro">    <a href="/">Introduction</a>           </li>
      <li id="t-about">    <a href="about.html">About Lance</a>   </li>
      <li id="t-news">     <a href="news.html">News & Events</a>  </li>
      <li id="t-sponsors"> <a href="sponsors.html">Sponsors</a>   </li>
</ul>

ul#nav   menu wg. danych z książki Dana Cederholma na stronach 49-57. W arkuszu styli CSS brak jest także oryginalnych obrazków:   img/nav_bg.gif   img/off-bg.gif   img/on_bg.gif




Prezentowane menu wygląda jak wyżej. Wyraźnie widać brak sygnalizacji aktywnej strony także po zmianie jej nazwy z naw5.htm na intro.html. Co oznacza sygnalizacja podświelenia aktywnej strony demonstruje na samym dole tej strony, oraz na stronie   NAWIGACJA/Pozioma   przykładami;   #menu4,   #menu5,   #menu6.

ARKUSZ CSS wg, D.Cederholma, ANALIZA REGUŁ

ARKUSZ STYLI CSS, reguły tj. pięć selektorów z deklaracjami
Wszystkie pięć reguł umieszczonych w arkuszu styli CSS nazywane jest stylami.
#nav {float:left; width:720px; list-style:none; margin:0; padding:10px 0 0 46px; background:#ffcb2d url(img/nav_bg.gif) repeat-x bottom left;}
#nav li  {float:left; margin:0 1px 0 0; padding:0; font-family: "Lucida Grande", sans-serif; font-size: 80%}
#nav a  {float:left; display:block; margin:0; padding:4px 8px; color:#333; text-decoration:none; border:1px solid #9b8748; border-bottom:none; background:#f9e9a9 url(img/off_bg.gif) repeat-x top left;}
#nav a:hover  {color:#333; padding-bottom:5px; border-color:#727377; background:#fff url(img/on_bg.gif) repeat-x top left;}
#nav a:hover, body#intro #t-intro a
 
ANALIZA STYLI CSS, tj. deklaracji z ich właściwościami i wartościami
#nav  ul jako pływający rozciąga w dół tło, o szerokości 720px, wyklucza numeracje lub wypunktowanie listy, zeruje marginesy, ustala odstępy napisów G=10px P=D=0 L=46px ustala tło żółte
#nav li  do lewej krawędzi = poziome ustawienie przycisków, margines P=1px = odległość zakładek, odstępy zerowane, czcionka Lucida Grande, wielkość 80%
#nav a  do lewej krawędzi, cały obszar zakładki aktywny, zerowanie marginesów, odstępy napisów od obramowania G=D=4px P=L=8px, kolor czcionki ciemny, tekst bez podkreśleń, obramowanie zakładki 1px, usunięcie dolnego obramowania, tło w zakładce jaśniejsze
#nav a:hover  zmiany w zakładce po wskazaniu kursorem to: kolor czcionki bez zmian, obniżenie tła o 5px, b.mała zmiana koloru obramowania, zmiana tła na białe
#nav a:hover, body#intro #t-intro a   { tutaj czegoś brakuje ! ? ? ? }
 
INNE ROZWIĄZANIA
Reguły CSS dla zamieszczonego poniżej menu są identyczne z regułami Dan Cederholma. Mają tylko inne wartości zwłaszcza koloru tła oraz czcionki, która ma stałą wielkość 12px. Główna różnica polega na dodaniu zamieszczonych poniżej trzech selektorów z deklaracjami. Dla górnego menu #nav1 .zakladka1 dla dolnego menu #nav2 .zakladka2. .
 
#nav1 .zakladka1 { background:blue}
#nav1 .zakladka1a { background:#2F4F4F}
#nav2 .zakladka2 { background:#fff; color:black}
 
Zadaniem tych selektorów jest podświetlenie aktywnej zakładki kolorem niebieskim górnej i białym dolnej. Trzeci selektor #nav1 .zakladka1a wyróżnia kolorem zielonym powrót do strony głównej TelePrawa. Kompletny zestaw reguł CSS znajduje się w osadzonym arkuszu styli tej strony. Wygląd menu można zmienić nadając inne wartości background zwłaszcza rozwijane z obrazka tło gradientowe. O tym będzie mowa w dziale GRAFIKA na kolejnych stronach BIBLIOTEKI będących w opracowaniu.