Jak zrobić dynamiczne, graficzne przyciski? cz. 1

[tidesoftware]

Dziś chciałbym opisać jak zrobić graficzne przyciski menu. Gotowy przykład działa na naszej stronie TideSoftware.pl (http://www.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 (http://extensions.jomla.org/) moduł Ninja Simle Icom. Świetnie się nadawał do przeróbki.
reszta w załączonym pliku...

[inkos]

Arty warte uwagi ale ja mam prośby:
1. Na forum są odpowiednie znaczniki do kodowania fragmentów postów jak np [code] itp. Skorzystaj z nich przy wpisywaniu swoich postów a nie umieszczaj ich w mysl zasady byle szybciej byle tylko kopiuj-wklej.
2. Jak już piszesz swoje posty to przynajmniej staraj sie aby one nie rozwalaly wyglądu forum.
3. Nie zaczynaj kolejnego wątku aby dokończyć poprzedni post.
4. Większe partie kodu ktore nie są omawiane lub tez całość kodu umieszczaj na dole posta w postaci pliku do sciagniecia.

[zwiastun]

Dla mnie w ogóle nie do przyjęcia :)
To jest forum. Wszelkie dobre materiały chętnie opublikujemy w odpowiedniejszym miejscu, o czym do autora wieść już poszła!

[tidesoftware]

Koledzy, luzik oczywiście dostosuję się :) to dopiero mój trzeci post, nie zabijajcie spontaniczności :):)

[zwiastun]

Ani nam się śni, jeszcze Ci jakiegoś sosiku podlejemy :) Czekoladowy :)? Spirytusowy :)? - arty przerzucę na pomoc, reszta w kontakcie PW albo Skype.

[Rzast]

Nie będzie się walidowało:
każdy przycisk ma przypisany identyfikator "przycisk" => powinna być klasa