MenuTree

Języki programowania
HTML
DHTML
Grafika
Skrypt pochodzi z serwisu Po prostu JavaScript

Cechą charakterystyczną tego menu, jest jego relatywność w stosunku do pozostałej zawartości strony. To znaczy, niezależnie od tego w jakim miejscu dokumentu umieścimy menu, będzie się ono zachowywało w taki sposób, że rozwijanie poszczególnych elementów spowoduje automatyczne przesuwanie się w dół pozostałej części menu, jak również pozostałej zawartości strony.
Ponieważ, w przeglądarkach NS 4.x i Opera6, rozwiązanie takie wymagałoby specjalnej konstrukcji (warstwowej) nie tylko samego menu lecz również pozostałej zawartości strony (co w zależności od tej zawartości mogłoby rodzić dodatkowe problemy wymagające "indywidualnego" podejścia), zastosowano tutaj pewien kompromis.

W przeglądarkach NS4 i Opera6 (ok. 5% rynku) mamy "na sztywno" rozwinięte menu.
Rozwinięte menu otrzymamy również we wszystkich przeglądarkach, w których została wyłączona obsługa JavaScript.
W przeglądarkach IE i NS6 (ok. 95% rynku) mamy rozwijane drzewo.

W ten sposób, nie ignorujemy całkowicie użytkowników NS4 i Opery6, a tylko pozbawiamy ok. 5% internautów efektu rozwijania. W zamian za to, otrzymujemy menu o zwartym i w miarę krótkim kodzie, które łatwo jest osadzić w dowolnym miejscu nowo tworzonego lub już istniejącego dokumentu.

Całe menu, to zwykła lista <ul>. Działanie skryptu polega tylko na pokazywaniu i ukrywaniu odpowiednich fragmentów.
Pozycje podrzędne to listy zagnieżdżone (listy w liście). W ten sposób możemy uzyskać większą ilość poziomów o dowonej strukturze. Jak zagnieżdżać listy, dowiesz się analizując (w źródle tej strony) poniższy przykład, w którym menu zagłębia się do trzeciego poziomu.

Pierwszy poziom 1
- Drugi poziom 1.1
  - Trzeci poziom 1.1.1
  - Trzeci poziom 1.1.2
- Drugi poziom 1.2
  - link na 2 poz.
  - link na 2 poz.
  - Trzeci poziom 1.2.1
  - link na 2 poz.
  - link na 2 poz.
  - Trzeci poziom 1.2.2
- link na 1 poz.
- link na 1 poz.
- link na 1 poz.
Pierwszy poziom 2
Pierwszy poziom 3
link na poziomie zerowym
link na poziomie zerowym

W dokumencie, można umieścić dowolną ilość niezależnych od siebie instancji menu. Jak widać, w tym dokumencie znajdują się dwie takie instancje, przy czym każda z nich ma odmienną strukturę i wygląd (grafika, czcionki, wcięcia).

Nazwa zmiennej obiektowej, reprezentującej menu, ma taką samą nazwę jak id danej listy z przedrostkiem Obj_.
Korzystając ze zmiennej obiektowej, możemy dla każdego menu wywołać dwie metody:

unfold() - rozwija wszystkie gałęzie drzewa.
fold() - zwija wszystkie gałęzie drzewa.

Na przykład, jeżeli mamy listę <UL id="Menu1">, to wywołanie metody unfold() dla tej listy, będzie wyglądałoby następująco:

Obj_Menu1.unfold()

Jednak aby w pełni zabezpieczyć się przed błędami mogącymi wystąpić w przeglądarkach nie obsługujących tego skryptu, wywołanie takiej metody powinno wyglądać następująco:

if(isTree)Obj_Menu1.unfold()

Jak umieścić menu w dokumencie

Należy umieścić skrypt w sekcji <HEAD>. Zaraz po nim, zlinkować zewnętrzny plik menutree.js (zobacz w źródle tego dokumentu).
Dla zdarzenia onload w znaczniku <BODY> wywołać funkcję initTree().
Umieścić w dokumencie jedną lub więcej list <UL> o dowolnej strukturze i nadać im unikalne id.
W funkcji declareTree() zadeklarować tablice m[]. Ilość tych tablic odpowiada ilości instancji menu, jaką zamierzamy umieścić w dokumencie. Na przykład, w tym dokumencie znajdują się dwie instancje menu.

Kolejne elementy tablicy m[] oznaczają:
1. id listy <UL>
2. obrazek zwiniętego folderu
3. obrazek rozwiniętego folderu
4. obrazek znajdujący się przed linkiem
5. kolor czcionki
6. kolor czcionki onmouseover
7. klasę określającą wygląd linków
8. szerokość wcięć menu w pikselach

Wszystkie elementy tablicy, poza pierwszym, możemy zastąpić pustym łańcuchem ("").
Ostatni element może zostać pominięty. W takim przypadku, szerokość wcięcia będzie domyślnie wynosić 15px. Jest to minimalna szerokość wcięcia, tak więc wstawienie tutaj wartości mniejszej niż 15, nie przyniesie żadnego skutku.