Pomoc - Jak zrobić dynamiczne, graficzne przyciski?

Start

Rozwiązania

Jak zrobić dynamiczne, graficzne przyciski?

Redaktor: cerberus

29.07.2008.

Wstęp

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.
reszta (kod i jego opis) w załączonym pliku...

Załączniki

Opis dla graficznych przycisków.txt‎ (6.2 kb, 10 wyświetleń)

Baseline

Baseline to miejsce gdzie wprowadzam dodatkowe informacje, zmiany jaki nastąpiły od opublikowania artykułu

22.08.2008 - Uwaga z forum. W załączonym pliku zamiast ID powinienem stosować Class. Faktycznie, tam jest moja pomyłka, proszę zmieńcie to sobie na „class”. Przykład oczywiście będzie działał, jednak przy walidacji wystąpi błąd.
22.08.2008 – Przykład odwoływał się do naszej strony TideSoftware.pl. Ze względów wizualnych wczoraj zmieniliśmy układ graficzny, ale nie technologię menu przycisków graficznych.

Zmieniony ( 22.08.2008. )