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:
Rozwiązanie:
- 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ę
Musimy utworzyć następujące pliki:
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.
- 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)
reszta w załączonym pliku...
Cytuj
