TideSoftware.pl -

Jak zrobić dynamiczne, graficzne przyciski?

Dziś chciałbym opisać jak zrobić graficzne przyciski menu. Gotowy przykład działa na naszej stronie TideSoftware.pl (to są te przyciski pod głównym menu). Właściwie jest to bardziej przykład zastosowania HTML i CSS, jednak osadzone jest w Joomla! (w naszym przypadku wersja 1.5). Co więcej na końcu znajduje się kawałek kodu PHP ułatwiającego stworzenie własnego modułu Joomla!. A zatem do dzieła (cały przykład oparty jest na kodzie naszego portalu, jednak przytoczony przykład możesz swobodnie zastosować u siebie).

Wyzwanie:

Menu poziome budowane z ul\li (dla potrzeb robotów indeksujących)
Grafika przycisku „podświetlająca” się po najechaniu myszką
Przycisk zawierający jednocześnie treść i ikonkę

Rozwiązanie:

Musimy utworzyć następujące pliki:

Indeks.html (Kod HTM naszego menu, nazwa pliku oczywiście dowolna. Poniżej w kodzie PHP jest pętla, budująca dynamicznie ten kod HTML.)
Template.css (Szablon styli. W przykładzie osobny plik, kod poniżej. W Jommla! Można także zrobić osobny plik i dołączyć go do głównego pliku template, lub wprost wstawić do template własnej strony.)
PrzyciskG.png (grafika przycisków, może być też .gif czy .jpg. W przykładzie grafika, dla ułatwienia pobierana jest wprost z naszej strony.)
PrzyciskD.png (grafika aktywnego przycisku. W przykładzie grafika, dla ułatwienia pobierana jest wprost z naszej strony.)
Ikona.png (przykładowa ikona dla przycisku, w tym przykładzie ikony pobierane są wprost ze strony TideSoftware.pl, więc plik nie jest obowiązkowy)

W części dotyczącej PHP i modułu do budowy menu wykorzystałem dostępny na http://extensions.jomla.org/ moduł Ninja Simle Icom. Świetnie się nadawał do przeróbki.

Kod HTML

Interesuje nas głównie blok <body></body>.

<div id=”menu”></div> - Całe menu dla potrzeb CSS traktujemy jako jeden blok o id=”menu”. W sumie nie będziemy tego za bardzo w tym przykładzie wykorzystywać.
<ul></ul> i <li></li> - Tutaj realizujemy założenie ułatwienia czytania treści przez roboty do pozycjonowania (np. Google). Ponadto pozwala to usystematyzować kod w logiczną całość. Alternatywnie można zrobić całość na blokach (<div>) lub nawet na tabelach. Każdy <li></li> jest jednym przyciskiem naszego menu.
<div id=”przycisk”></div> - Główny obszar (moduł) do naszej definicji stylu w CSS. W tym obszarze jest też całą „treść” przycisku.
<a></a> - To jest link, który obejmie zarówno naszą ikonę jak i sam tekst. Potraktujemy go jako blok dzięki czemu „stanie się” przyciskiem. Jednocześnie wykorzystamy właściwość a:hover (najechanie myszką) na potrzeby „podświetlenia” grafiki.
<img> - Zawiera naszą ikonę. Posiada właściwości:
- Src – Źródło ikony.
- Alt – Opis ikony (pomaga w pozycjonowaniu, zwłaszcza Dy zezwolimy Google indeksować grafikę z naszej strony).
- Height i width – Ustalenie stałego rozmiaru ikony (można to też przenieść do szablonu CSS).
<br/> Przeniesienie do kolejnej linii i wpisanie tam treści przycisku.

I to w zasadzie najważniejsze z kodu HTML. Cała „magia” jest w szablonie CSS. Poniżej pełny kod.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>

<HEAD>
<link rel="stylesheet" href="/template.css" mce_href="/template.css" type="text/css" />
</HEAD>
<BODY>
<div id="menu">
<ul>
<li>
<div id="przycisk">
<a href="/http://www.tidesoftware.pl/index.php/lang-pl/oferta/korzyci-biznesowe"><img src="/http://tidesoftware.pl//modules/mod_nj_simple_icon/mod_nj_simple_icon/images/0098.png" alt="Korzyści biznesowe" height="32px" width="32px" /><br/>Korzyści<br/>biznesowe</a>
</div>
</li>
<li>
<div id="przycisk">
<a href="/http://www.tidesoftware.pl/index.php/lang-pl/oferta/branze"><img src="/http://tidesoftware.pl//modules/mod_nj_simple_icon/mod_nj_simple_icon/images/0225.png" alt="Branże" height="32px" width="32px" /><br/>Branże</a>
</div>
</li>
<li>
<div id="przycisk">
<a href="/http://www.tidesoftware.pl/index.php/lang-pl/oferta/rodzaj-dziaalnosci"><img src="/http://tidesoftware.pl//modules/mod_nj_simple_icon/mod_nj_simple_icon/images/0076.png" alt="Rodzaj działalności" height="32px" width="32px" /><br/>Rodzaj<br/>działalności</a>
</div>
</li>
<li>
<div id="przycisk">
<a href="/http://www.tidesoftware.pl/index.php/lang-pl/oferta/procesy-biznesowe"><img src="/http://tidesoftware.pl//modules/mod_nj_simple_icon/mod_nj_simple_icon/images/0022.png" alt="Procesy biznesowe" height="32px" width="32px" /><br/>Procesy<br/>biznesowe</a>
</div>
</li>
<li>
<div id="przycisk">
<a href="/http://www.tidesoftware.pl/index.php/lang-pl/oferta/platforma-i-technologia"><img src="/http://tidesoftware.pl//modules/mod_nj_simple_icon/mod_nj_simple_icon/images/0044.png" alt="Platforma i technologia" height="32px" width="32px" /><br/>Platforma<br/>i technologia</a>
</div>
</li>
<li>
<div id="przycisk">
<a href="/http://www.tidesoftware.pl/index.php/lang-pl/oferta/cennik-i-licencjonowanie"><img src="/http://tidesoftware.pl//modules/mod_nj_simple_icon/mod_nj_simple_icon/images/0013.png" alt="CCennik i licencjonowanie" height="32px" width="32px" /><br/>Cennik<br/>i licencjonowanie</a>
</div>
</li>
</ul>
</div>
</BODY>

</HTML>

Kod CSS

Body i img – To ustawienia dodatkowe, możesz je pominąć.
#menu ul – Zerujemy wszelkie marginesy (wewnętrzne – padlin i zewnętrzne – margin) dla całego menu. Tu możecie sobie poeksperymentować z np. dodatkowym tłem.
#menu li – Tutaj ustawiamy parametry (zmieniamy standardowe ustawienia) samej listy. Najważniejsze to (reszta służy bardziej dekoracji niż samemu działaniu):
List style type: none; - Usuwamy „znaczki” listy a także ewentualne wcięcia.
Margin i pudding – Tak jak wyżej.
Float: left; - To jest dość ważne bo powoduje, że menu będzie w poziomie a nie w pionie.
#przycisk a – Tu „zbudujemy nasz przycisk. Najważniejsze elementy to:
Display: Block – Od teraz cały link (i ikona i tekst) staną się blokiem – prostokątem i zadziałają jak link (url) np. na grafice.
Width i height – Zgodnie z rozmiarami przygotowanych przez nas grafik ustawiamy rozmiar przycisku.
Background – Tu ustawiamy grafikę naszego przycisku.
Float: left – Powoduje, że menu wyświetla się w poziomie.
#przycisk a:hover – tu dodamy akcję „podświetlania” przycisku. Najważniejsze to:
Background – grafika „podświetlenia”.

I to już wszystko. Mamy gotowe menu. Poniżej pełny kod, a dalej pokazałem jeszcze prostą pętlę PHP do utworzenia własnego menu.

body {font-family: Verdana,Arial; line-height: 1.3em; margin: 0px 0px 0px 0px; font-size: 11px; color: #000000;}

img {border-width: 0px; border-style: none;}

#menu ul{

padding: 0px;
margin: 0px;

}

#menu li{

list-style-type: none;
marker-offset: 0px;
float: left;
padding: 0px;
margin: 0px;

}

#przycisk a{

display: block;
width: 130px;
height: 70px;
padding: 0px;
margin: 0;
background: url(http://tidesoftware.pl//templates/tidesoftware/images/PrzyciskG.png) no-repeat;

padding-top: 4px;
text-align: center;
float: left;
text-decoration: none;
font-weight: normal;
color: #215868;

}

#przycisk a:hover {

background : url(http://tidesoftware.pl//templates/tidesoftware/images/PrzyciskD.png) no-repeat;
color: #215868;
text-decoration: none;
font-weight: normal;
color: #E36C0A;

}

Kod PHP (fragment do modułu)

Prosta pętla w PHP łącząca kod HTML i PHP (także generujący kod PHP). Poniższy przykład wkleiłem wprost do definicji modułu Ninja Simple Icon, dzięki czemu nie musiałem definiować wszystkich parametrów itp. Zachęcam do napisania własnego modułu .

<div id="menu">

<ul>
<?php for ($i=0; $i<10; $i++){
if ($iconParams[$i][0] == 1) {?>
<li>
<div id="przycisk">
<a href="/<?php echo $iconParams[$i][3]; ?>"><img src="/<?php echo JURI::Base(); ?>/modules/mod_nj_simple_icon/mod_nj_simple_icon/images/<?php echo $iconParams[$i][1]; ?>" alt="<?php echo $iconParams[$i][4]; ?>" height="<?php echo $icon_height; ?>" width="<?php echo $icon_width; ?>" /><br/><?php echo $iconParams[$i][2]; ?></a>
</div>
</li>
<?php }
}?>
</ul>

</div>