UWAGA: Strona zawiera materiały archiwalne. Większość artykułów dotyczy Joomla! 1.0
Start arrow Rozwiązania arrow Jak zrobić dynamiczne, graficzne przyciski?
Jak zrobić dynamiczne, graficzne przyciski? Drukuj Email
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
Typ pliku: txtOpis 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. )
 
« poprzedni artykuł   następny artykuł »