NAWIGACJA ROZWIJANA TYLKO Z POMOCĄ CSS

autor Krzysztof Gajewski

Pierwsze systemy nawigacji rozwijanej były realizowane w języku JavaScript. Kolejne realizowane tylko z użyciem kaskadowych arkuszy stylów nie działały w przeglądarce Internet Explorer nie nadążającej za rozwojem CSS. Opis takiego menu podaje Rachel Andrew w książce CSS.Antalogia na stronach 304-308. W celu działania takich systemów nawigacji w przeglądarce IE, tworzono specjalne biblioteki jak pliki zachowań IE autorstwa Petera Nederlofa lub pliki w języku JavaScript IE7 autorstwa Deana Edwardsa. Źródła opisów takich systemów nawigacji podaję w bocznej kolumnie.

Pani Rachel Adrew pierwsza wpadła na pomysł bardzo prostej konstrukcji arkusza stylów zapewniającego realizację rozwijalnego menu także w Internet Eksplorer bez stosowania wspomnianych bibliotek. Oryginalny szczegółowy opis rozwiązania w języku angielskim jest dostępny w artykule "Nifty Navigation Tricks Using CSS" z dnia 26.06.2008r na stronie www.sitepoint.com/articlelist/316/   Poniżej skrót opisu z oryginalnym kodem XHTML o zmienionych linkach i znacznie prostrzym arkuszem stylów dostosowanym do potrzeb BIBLIOTEKI.

OPIS KODU XHTML

Kod XHTML to lista nadrzędna trzech elementów z łączami; KOLUMNY, GRAFIKA TŁA, NAWIGACJA umieszczonych jedna pod drugą. Każda lista nadrzędna posiada zagnieżnieżdzoną w niej listę podrzędną trzech elementów z kolejnymi łączami. Arkusz CSS powinien usunąć z list punktory, wcięcia, wyświetlić elementy nadrzędne w poziomie, ukryć zagnieżdżone listy podrzędne trzech elementów i ujawnić je po najechaniu kursorem na łącze listy nadrzędnej. Kod XHTML takiego wielopoziomowego menu nawigacji jest omawiany na stronie Nawigacja pionowa jako menu5. W prezentowanym tam przykładzie nie rozwiązano problemu ukrycia zagnieżdżonej podrzędnej listy elementów z trzema łączami, co rozwiązała Pani R.Andrew w cytowanym wyżej artykule. 

<ul id="nav3">
   <li><a href="kolumny.htm">KOLUMNY</a>
      <ul>
         <li><a href="kolumny-2stale.htm"> 2-Stałe </a></li>
         <li><a href="kolumny-2plynne.htm"> 2-Płynne </a></li>
         <li><a href="kolumny-2elastyczne.htm"> 2-Elastyczne </a></li>
      </ul>
   </li>
   <li><a href="grafika.htm">GRAFIKA TŁA</a>
      <ul>
         <li><a href="grafika-tla-wybor.htm"> Wybór tła </a></li>
         <li><a href="grafika-tla-2kolumny.htm"> Tła 2-kolumn </a></li>
         <li><a href="grafika-tla-3kolumny.htm"> Tła 3-kolumn </a></li>
      </ul>
   </li>
   <li><a href="nawigacja.htm">NAWIGACJA</a>
      <ul>
         <li><a href="nawigacja-pozioma.htm"> Pozioma </a></li>
         <li><a href="nawigacja-pionowa.htm"> Pionowa </a></li>
         <li><a href="nawigacja-stopki.htm"> Stopki </a></li>
      </ul>
   </li>
</ul>

Widoczny powyżej kod XHTML bez arkusza stylów CSS jest realizowany na ekranie w formie jak niżej.

Po dodaniu arkusza styli CSS, prezentacja na ekranie powyższego kodu XHTML wygląda jak niżej. Chcąc zmienić kolor przycisków wystarczy w drugim selektorze słowo blue zastąpić słowem red.







ARKUSZ CSS, ANALIZA REGUŁ

ARKUSZ STYLI CSS, reguły tj. sześć selektorów z deklaracjami
Wszystkie sześć reguł umieszczonych w arkuszu styli CSS nazywane jest stylami.
#nav, #nav ul  {list-style-type:none; margin:0; padding:0}
#nav li  {float:left; width:180px; background-color:blue; margin-right:2px}
#nav a:link, #nav a:visited   {display block; text-decoration:none; font-size:12px; font-weight:bold; color:white; padding-left:20px}
#nav ul  {display:none; padding:0}
#nav ul li  {background-color:#0099cc; border-top:5px solid #0099cc; border-top:1px solid white; padding:0}
#nav li:hover ul  {display: block}
ANALIZA STYLI CSS, tj. deklaracji z ich właściwościami i wartościami
#nav, #nav ul  {wyklucza numeracje - wypunktowanie listy, zeruje marginesy i odstępy, -dotyczy wszystkich selektorów}
#nav li  {do lewej krawędzi = poziome ustawienie przycisków, szerokość 180px, tło niebieskie, margines prawy =odstęp między przyciskami poziomymi 2px, -dotyczy menu poziomego nadrzędnego}
#nav a:link, #nav a:visited  {wyświetlanie pudełka-bloku, tekst bez podkreśleń, czcionka 12px, gruba, kolor biały, odstęp tekstu lewy 20px, -dotyczy treści wszystkich przycisków poziom i pion}
#nav ul  {ukrycie pionowego menu, zerowanie odstępów, - dotyczy menu podrzędnego pionowego}
#nav ul li  {tło jasne-blue, obramowanie górne 5px jasne-blue, obramowanie górne 1px białe, zerowanie odstępów -dotyczy tylko menu podrzędnego pionowego}
#nav li:hover ul  {po wskazaniu kursorem poziomego przycisku, pojawia się pionowe menu}