bMenu

To wszystko :)

Plik "BlaTekCSMenu.js" to czarna skrzynka - nie edytuj!
Natomiast plik "Declare_bMenu.js" to deklaracja struktury menu. Ten plik poddajesz edycji (zobacz następny rozdział). Od zawartości tego pliku, zależy zarówno wygląd, jak i struktura menu.

Czyli kilka uwag na temat zmiennych umieszczonych w pliku "Declare_bMenu.js". Czytając ten rozdział, otwórz sobie ten plik w dowolnym edytorze tekstowym i porównuj jego zawartość z poniższym opisem.

zIndex - w większości przypadków ustawia się wartość o jeden wyższą niż największy z-index użyty w dokumencie.

APC - Auto Position by Client (1 - on, 0 - off). Utrzymuje poszczególne pozycje menu (nadrzędne i podrzędne) w obszarze okna przeglądarki, niezależnie od aktualnej wielkości okna oraz od miejsca wywołania menu.

waitDelay - Czas oczekiwania w milisekundach. Menu wywołane, lecz nie użyte (czyli nie najechane myszką;), zostanie automatycznie ukryte po tym czasie.

hideDelay - Opóźnienie ukrycia. Czas, po którym menu zostanie ukryte, od momentu opuszczenia menu przez myszkę.

Wygląd menu określają zmienne:
globalPanel={wlasnosc:wartosc, wlasnosc:wartosc,...}
globalItem={wlasnosc:wartosc, wlasnosc:wartosc,...}

Nazwy własności są tak sugestywne, że właściwie nie trzeba tłumaczyć ich przeznaczenia. Wystarczy tylko nadmienić, że wartość 0 (zero) dla kolorów oznacza przezroczystość, dla wymiarów (width, height) oznacza automatyczne dopasowanie, natomiast dla własności takich jak border, image oznacza brak tych elementów.
Jeśli menu ma mieć jednolity wygląd, to wystarczą tylko te dwa wzory globalne. Jeżeli natomiast menu ma być w stylu mieszanym, to należy zadeklarować wzory indywidualne (o dowolnych nazwach), które będą "nadpisywały" własności wzorów globalnych dla poszczególnych paneli i poszczególnych pozycji (items) umieszczonych na panelach. Kolejność określanych własności jest dowolna. Można nadpisać zarówno wszystkie, jak i tylko niektóre własności. Obowiązuje tutaj zasada dziedziczenia. Własności, które nie są nadpisane, określane będą według wzoru globalnego.
Klasy czcionek i obramowań mogą być określone w dowolnym arkuszu, wewnętrznym lub zewnętrznym dołączonym do dokumentu (tutaj Style_bMenu.css)

with(Panel('nazwa_panela', wzorPanela)){
Item('adresURL', 'tekst widoczny')
Item('adresURL', 'tekst widoczny', wzorPozycji)
Item('adresURL', 'tekst', 0, 'tekst onmouseover')
Item(0, 'tekst widoczny').expand('nazwa_innego_panela')
}

W powyższym przykładzie zadeklarowany jest panel, zawierający cztery pozycje. Zmienna wzorPanela, to wzór indywidualny określający wygląd tego panela. Jeśli metoda Panel zostanie wywołana bez tego parametru, to wygląd zostanie określony na podstawie wzoru globalPanel.
Przyjrzyjmy się poszczególnym pozycjom. Wygląd pierwszej pozycji zostanie określony na podstawie wzoru globalnego globalItem. Druga pozycja będzie formatowana na podstawie wzoru indywidualnego wzorPozycji. Wygląd trzeciej pozycji będzie się opierał na wzorze globalnym, ponieważ wartość trzeciego parametru wynosi 0. Ponadto trzecia pozycja będzie miała inny tekst po najechaniu na nią myszką. Jeśli chodzi o czwartą pozycję, to kliknięcie na niej nie spowoduje przejścia do innej strony (wartość pierwszego parametru 0), natomiast najechanie na nią spowoduje wywołanie panela podrzędnego (dzięki metodzie expand). W ten sposób możemy tworzyć dowolną ilość poziomów struktury hierarchicznej menu kaskadowego.
Jeśli chodzi o 'tekst widoczny', to może on zawierać znaczniki HTML, tak więc można tu również umieścić grafikę (np. ikonkę z lewej lub strzałeczkę z prawej strony).
W dokumencie można zadeklarować dowolną ilość takich paneli i poukładać je w dowolną strukturę hierarchiczną. Tak więc, edytując plik "Declare_bMenu.js", możesz usunąć lub dodać dowolną ilość własnych paneli.

Metoda podstawowa
bMenu.show('nazwa_panela',x,y)
wywołująca menu na współrzędnych, określanych w stosunku do początku strony.
Przykład wywołania za pomocą tej metody, znajduje się na samym początku tego dokumentu.

Metody wywołujące menu w obszarze klienta przeglądarki, niezależnie od aktualnej wielkości okna i niezależnie od aktualnego stopnia przewinięcia strony (zarówno w pionie jak i w poziomie). Menu można wywołać na współrzdnych określonych w stosunku do dowolnej krawędzi okna (w przykładach po 20px):
bMenu.showLT('panel',left,top) - zobacz
bMenu.showRT('panel',right,top) - zobacz
bMenu.showLB('panel',left,bottom) - zobacz
bMenu.showRB('panel',right,bottom) - zobacz
Powyższe metody mogą być szczególnie przydatne w przypadku wywoływania menu z innej ramki

Metoda pozycjonująca menu w stosunku do kursora myszy:
bMenu.showByCursor('panel',x,y) - zobacz

Metody wywołujące menu na współrzędnych, w stosunku do określonego elementu HTML. Może to być szczególnie przydatne w przypadku wywoływania menu na graficznych klawiszach, wszelkiego rodzaju toolbarach, których położenie na stronie nie jest stałe i nie jest z góry określone. Taka sytuacja może mieć miejsce w przypadkach, gdy elementy strony zmieniają swoje położenie pod wpływem zmiany rozdzielczości ekranu lub zmiany rozmiarów okna, na wskutek zwijania, centrowania, pozycjonowania procentowego itd. itp.
bMenu.showByElement('panel',x,y,element_reference)
bMenu.showByImg('panel',x,y,'imgname')

Metoda showByElement, może być o tyle trudna (dla mniej doświadczonego webmastera), że wymaga podania referencji do określonego elementu HTML. W przypadku browserów IE, NS6/Mozilla, może być to dowolny element dokumentu. Natomiast w przypadku NS4.x, trzeba sobie zdawać sprawę z ograniczeń jakie stawia ta przeglądarka. Natomiast metoda showByImg jest bardziej "przyjazna", ponieważ wymaga tylko podania nazwy obrazka (atrybut name),w stosunku do którego określamy współrzędne wywołania menu.

W menu zostały zaimplementowane Filtry Internet Explorera, dzięki którym można wykonać różnego rodzaju animacje. Filtry zostały zaimplementowane w taki sposób, że nie powodują błędów w innych przeglądarkach.

Zobacz przykłady animacji

Szablony, to puste strony z gotowymi przykładami menu, w różnych stylach. Szablony zawierają toolbar na tyle uniwersalny, że powinien działać w każdej przeglądarce. Ponadto, toolbar nie pozycjonuje poszczególnych pozycji absolutnie, tylko względem samego siebie. Tak więc, menu będzie wyświetlane w odpowiednim miejscu, niezależnie od tego w jakim punkcie strony zostanie umieszczony toolbar.

BlaTek Cascading Menu	version 3.0 beta
72 przykłady \| obsługa zdarzeń \| filtry IE \| menu graficzne