testblog

Naszym celem będzie dalsza modyfikacja archiwum w celu jego minimalizacji. Otrzymana postać archiwum, choć nie posiadającego jeszcze pełnej funkcjonalności, będzie stanowić ćwiczenie przed jego końcową modyfikacją, którą przedstawię w następnym poście.

Zmiana stylu wyświetlania listy

Pierwszą czynnością jaką należy wykonać jest pozbycie się wypunktowania (patrz rys. 1) oraz wcięcia elementów listy przedstawiającej Archiwum. Po uzyskaniu prostej listy zajmiemy się ukryciem oraz wyświetlaniem podmenu zawierających listy miesięcy. Otrzymane w ten sposób proste menu poddamy kilku zabiegom zmieniającym wygląd jego elementów, co pozwoli Ci później na samodzielne dokonanie adaptacji do własnego szablonu.

Rys. 1. Struktura archiwum po zastosowaniu samego skryptu.

Usunięcie wypunktowania

Aby usunąć wypunktowanie odwołujemy się do listy głównej o id="nav" oraz zagnieżdżonej w niej listy z miesiącami. Odpowiednia deklaracja wygląda następująco:

#nav, #nav ul{list-style-type: none}

Usunięcie wcięć elementów listy

Podobnie jak dla wypunktowania, wcięcia eliminujemy dla obu poziomów menu, a odpowiedni rezultat uzyskujemy następującą deklaracją:

#nav, #nav ul{padding: 0; margin:0}

Po zastosowaniu powyższych wskazówek otrzymamy następujący wygląd archiwum:

Rys. 2. Archiwum po usunięciu wypunktowania i wcięć.

Ukrywane list miesięcy

Najistotniejszym punktem naszej operacji jest ukrycie pod poziomu archiwum zawierającego listy miesięcy, gdyż to właśnie pozwala na znaczne zmniejszenie jej długości.

Ukrycie elementów podmenu

Ponieważ zależy nam na zmniejszeniu rozmiarów archiwum, to jako wyjściową przyjmiemy sytuację ze schowanymi listami miesięcy.

#nav ul{display: none}

Tak zmodyfikowane menu dla lat 2005-2007 przedstawia rysunek 3.

Rys. 3. Archiwum z ukrytymi listami miesięcy.

Wyświetlenie listy miesięcy po wskazaniu roku

Idealnym rozwiązaniem jest wyświetlenie listy miesięcy po wskazaniu myszką odpowiadającego jej roku. Efekt ten w nowoczesnych przeglądarkach zapewni deklaracja:

#nav li:hover ul{display: block}

Najechanie myszką na rok spowoduje wówczas wyświetlenie odpowiadającej mu listy miesięcy (rys. 4).

Rys. 4. Archiwum po wskazaniu roku myszką - widoczna lista miesięcy.

Wyświetlanie list miesięcy - starsze wersje IE

Internet Explorer (wersje < 7) nie obsługuje pseudo klasy hover. Brak ten jest jednak niwelowany przez skrypt, który nadaje wskazanemu myszką elementowi listy klasę over. Dostosowanie naszego arkusza CSS do IE sprowadzi się do modyfikacji ostatniej deklaracji do następującej postaci:

#nav li:hover ul, #nav li.over ul{display: block}

Przykład formatowania archiwum

Po dokonaniu powyższych modyfikacji otrzymaliśmy zminimalizowane archiwum, które jednak nie prezentuje się ciekawie. Aby zmienić tą sytuację należy znów posłużyć się arkuszem CSS.

Nagłówki lat

Nagłówki z numerami lat są pierwszym elementem, który zobaczy użytkownik, dlatego też od nich rozpoczniemy formatowanie. Tu jedynie zmienimy czcionkę na pogrubioną i dodamy margines:

#nav li {font-weight: bold; margin-bottom: 5px}

Należy pamiętać, że tak wprowadzone zmiany będą dotyczyły także nazw miesięcy zatem jeżeli nie chcemy by były one wyświetlane pogrubioną czcionką, to musimy zastosować dodatkową deklarację:

#nav li ul li{font-weight: normal}

Obramowanie rozwiniętej listy

Możemy chcieć wyróżnić rozwiniętą listę miesięcy, np. za pocą kolorowego tła. Otrzymamy je dodając do arkusza CSS poniższą linię:

#nav li ul{background-color: silver}

Formatowanie tekstu odnośników

Zmiana formatu tekstu odnośników również nie stanowi większego problemu. Usunięcie domyślnego podkreślenia osiągniemy następującą deklaracją:

#nav ul a{text-decoration: none}

Co dalej

Opisałem tu proste przekształcenie archiwum, które miało na celu zapoznanie ze sposobem odwoływania się do poszczególnych elementów z poziomu arkusza CSS. Mimo swej prostoty, po dodatkowych zabiegach (ja zaprezentowałem tylko przykłady formatowań), stanowi ono całkiem funkcjonalną całość. Dalsze usprawnienie naszego archiwum pozwalające przekształcić je w pełni funkcjonalne menu zostanie przedstawione w kolejnej (ostatniej) części cyklu.