Proste trzypoziomowe rozwijalne menu w CSS i JavaScript

Jakiś czas temu potrzebowałem stworzyć skrypt generujący dowolne menu (najlepiej trzypoziomowe), gdzie zawartość tego menu byłaby tworzona dynamicznie (w kodzie skryptu), a nie tworzona ręcznie jako część kodu HTML. I żeby to menu wyglądało podobnie jak to w większości programów dla Windows (nie uwzględniając wstążki).
Takie menu ma panel zarządzania systemem Joomla. Jego menu jest generowanie w PHP na podstawie danych przechowywanych w bazie danych (MySQL), ale najfajniejszą sprawą jest to, że całe menu jest oparte tylko i wyłącznie na CSS (tj. jego wygląd i zachowanie).

Oczywiście samo wybranie jakiejś opcji z tego menu powoduje odświeżenie strony i otwarcie stosownego linka (parametry są przesyłane GET-em), co w przypadku moich aplikacji (opartych głównie na JavaScripcie i nie przeładowujące całej strony) jest niedopuszczalne i wymaga podpięcia pod takie wywołanie stosownej akcji JavaScript, ale sam wygląd (i budowa) takiego menu jest jak najbardziej do wykorzystania.

Przeanalizowałem zatem budowę tego menu (wraz jego ostylowaniem w CSS) i napisałem swoje własne funkcje (w JavaScripcie) tworzące na podstawie podanych parametrów takie trzypoziomowe menu. Ponieważ byłem przyzwyczajony (z Turbo/Borland Pascala) do tworzenia takiego drzewiastego menu poprzez stosowne zagnieżdzanie funkcji budującej menu odpowiedniego poziomu, to tak też to zrealizowałem w JavaScipcie - możesz zobaczyć tutaj jak takie wywołanie budowania drzewa menu wygląda.

Zobacz demo przykładowego menu oraz kod źródłowy strony głównej w HTML wraz z towarzyszącym mu właściwym skryptem w JavaScript generującym to menu.

Tworząc później internetowy arkusz kalkulacyjny przerobiłem to menu tak, by jego definicja była zawarta w pliku XML. Dodatkowo przygotowałem wiele wersji językowych takiego menu, każda z tych wersji znajduje się w osobnym pliku XML i może być dynamicznie zmieniona w czasie pracy aplikacji (opcja Narzędzia -> Język). Możesz zobaczyć tę aplikację w działaniu tutaj.

Powrót do strony z wykazem projektów

Valid HTML 4.01 TransitionalValid CSS