Graficzne menu CSS w Joomla cz.1

Czyli jak przygotować efektowne i lekkie menu Joomla bez stosowania dodatkowych modułów. Z pomocą przyjdzie nam CSS i technika zwana CSS Sprites. Wykorzystamy także klasy dostępne w domyślnym ustawieniu menu Joomla.






Wymagania: podstawa znajomość CSS i HTML

Na początek potrzebne będzie do tego obrazek menu w którym zawarte są 2 widoki menu: normalnego i aktywnego. Dlaczego właśnie taki? Potrzebny będzie nam żeby skorzystać z sprite-ów dzięki czemu obrazek będzie wczytywał się szybciej a wszelkie zmiany będzie można przeprowadzić w jednym pliku. Pod spodem przykładowy obrazek menu:

Kod HTML domyślnego menu Joomla

Podstawowe ustawienia Joomla wyświetlają menu jako listę wypunktowaną (przykład 1). Dla każdego elementu menu system dodaje klasę "item" a następnie numer id pozycji menu np. "item2" - wykorzystamy tą właściwość przy ustawianiu poszczególnych elementów menu.

Przykład 1:
<ul class="menu">
<li id="current" class="item1"><a href="javascript::void(0)"><span>Home</span></a></li>
<li class="item2" ><a href="javascript::void(0)"><span>About</span></a></li>
<li class="item3" ><a href="javascript::void(0)"><span>Services</span></a></li>
<li class="item4"><a href="javascript::void(0)"><span>Clients</span></a></li>
<li class="item5"><a href="javascript::void(0)"><span>Contacts</span></a></li>
</ul>

Styl CSS menu

Pewnie zadajecie sobie pytanie jak wykorzystać jeden obrazek skoro mamy kilka pozycji, dla których potrzebne są obrazki? Skorzystamy z CSS Sprites. Technika ta wykorzystuje właściwość CSS o nazwie "background-position". Pozwala ona na ustawienie tłu danego elementu na odpowiedniej pozycji. W połączeniu z ustawieniem odpowiedniej wielkości elementu możliwe staje się pokazanie tylko kawałka obrazka zamiast całości.

Jak to wykorzystać w praktyce? W przykładzie 2 znajduje się kod CSS naszego menu graficznego:

Przykład 2:
1: .menu {display:block;background:url('menu_sprites.png');width:600px;height:29px}
2: .menu li {height:29px;display:block;float:left}
3: .menu a {display:block;height:100%}
4: .menu a:hover, .menu #current a {background:url('menu_sprites.png')}
5: .menu span {display:none}
6: .item1 {width:66px}
7: .item2 {width:60px}
8: .item3 {width:75px}
9: .item4 {width:68px}
10: .item5 {width:80px}
11: .item1 a:hover, .item1#current a {background-position:0px -30px}
12: .item2 a:hover, .item2#current a {background-position:-66px -30px}
13: .item3 a:hover, .item3#current a {background-position:-126px -30px}
14: .item4 a:hover, .item4#current a {background-position:-201px -30px}
15: .item5 a:hover, .item5#current a {background-position:-269px -30px}
Klasie "menu" (linia 1) czyli naszemu elementowi UL który zawiera całe menu nadajemy właściwość "display:block". Dzięki temu będzie się zachowywała jak element blokowy np. DIV. Następnie dodajemy do właściwości "background" adres naszego obrazka. Dlaczego? Dzięki temu nie będziemy musieli każdemu z naszych elementów menu nadawać osobnych właściwości dla menu nieaktywnego - zaoszczędzimy na czasie i wielkości kodu. Następnie ustawiamy odpowiednią wielkość naszego menu.

Dla elementu listy w klasie "menu" (linia 2) nadajemy odpowiednią wysokość, sposób wyświetlania jako blokowy podobnie jak z całym menu oraz właściwość "float:left" dzięki czemu nasze bloki ułożą się koło siebie (domyślnie bloki ustawione są jeden pod drugim)

Dla każdego linku w naszej klasie "menu" (linia 3) ustawiamy właściwość "display:block", dzięki temu link w każdym elemencie menu będzie wypełniał cały element, łatwiej na niego będzie trafić i dodatkowo pomoże nam przy ustawianiu obrazków po najechaniu na pozycję menu.

Dla każdego najechanego linku w klasie "menu" (linia 4) ustawiamy tło na nasz obrazek. Dlaczego dopiero teraz a nie wcześniej? Dla wszystkich linków nie najechanych mamy już tło - pokazywać się będzie tło główne menu, które ustawiliśmy w pierwszej linii. Przy okazji ustawiamy to samo tło dla linku aktualnie przeglądanego

Dla każdego elementu span w klasie "menu" wyłączamy wyświetlanie - dzięki temu teksty które są w menu nie będą widoczne i zastąpią je obrazki. Równie dobrze skorzystać możemy z właściwości "text-indent" ale ta nie jest obsługiwana w IE6 a niestety nadal co 10 internauta korzysta z tej dziurawej przeglądarki.

Teraz wykorzystamy właściwość, że każdy element menu ma swoją klasę (nie ma 2 pozycji menu o tym samym numerze, chyba że mamy zdublowane menu na stronie). Dla każdej klasy elementu menu (linie od 6-10) ustawiamy odpowiednią szerokość, inaczej będziemy mieli problemy z wyświetlaniem i ustawieniem tła. Wysokością się już nie martwimy bo ustaliliśmy ją w linii 2.

Teraz najważniejsze, skorzystamy z tej właściwość "background-position". Dzięki temu że każdy element menu ma inną klasę (np. item2) możemy dostać się do każdego linku menu oddzielnie. Ustalamy więc w jakiej pozycji znajduje się nasz obrazek, który chcemy ustawić jako tło (przykład 3)

Przykład 3:

Dla każdego najechanego linku (w liniach od 11 do 15 w przykładnie 2) ustalamy pozycję obrazka wg schematu z przykładu 3. Żeby nasz link pokazywał tylko potrzebny nam kawałek obrazka wartości podajemy ujemnie czyli np. "background-position: -66px -30px".

Podsumowanie

To już wszystko. Dzięki zastosowaniu CSS i jednego tylko obrazka klient nie czeka na pobranie kilku obrazków co spowolniło by ładowanie całej strony. Oczywiście menu takie nie ma sensu dla stron, w których ilość i treść pozycji menu będzie się często zmieniała. Natomiast jest idealnym zastosowaniem dla małych stron w których zmienna będzie tylko treść.

Zobacz demo: Menu CSS Sprites Demo