Die Style- Definitionen der Sub- (Unter-) menus
Die Submenu Stylevariablen arbeiten auf dieselbe Weise wie diejenigen
für die Navigationsbar und werden global für alle Menus definiert.
Diese globale Definition kann durch die defineSubmenuProperties Arrays
übersteuert werden.
smCOLOR siehe mCOLOR
srCOLOR siehe rCOLOR
sbSIZE siehe bSIZE
sbCOLOR siehe bCOLOR
saLINK siehe aLINK
saHOVER siehe aHOVER
saDEC siehe aDEC
sfFONT siehe fFONT
sfSIZE siehe fSIZE
sfWEIGHT siehe fWEIGHT
stINDENT siehe tINDENT
svPADDING siehe vPADDING
svtOFFSET siehe vtOFFSET
shSIZE
Sie können einen DropShadow- Effekt unter den Menus erzeugen.
Verwenden Sie diese Variable, um den Offset in Pixeln nach rechts und unten
zu definieren.
Beachten Sie, dass der Schatten einen soliden Layer darstellt. Wenn
Sie also smCOLOR und sbCOLOR both transparent setzen, dann wird der DropShadow
als solider Layer darunter erscheinen auch wenn Sie diesen auf 0 setzen.
Sie können den Schatten jedoch mit der shCOLOR Variable disablen.
Negative DropShadows sind nicht möglich - shSIZE kann nicht kleiner
als 0 sein. Sie können den Schatten allerdings in beide Richtungen
definieren, so dass er das Menu komplett umfliesst. Das könnte nützlich
sein, wenn Sie einen Rahmen um das gesamte Menu, nicht aber um einzelne
Items ziehen möchten, wie bspw. bei der MSDN Demo. Sie können
diese Variable auch in Verbindung mit einem niedrigen Opacity Filtereffekt
verwenden, um einen Auraeffekt zu erzeugen.
var shSIZE = 3; erzeugt
einen DropShadow, aber
var shSIZE = "3"; erzeugt einen
durchgehenden Rahmen
shCOLOR
Definieren Sie hiermit die Farbe des DropShadow, als Hexwert, Namen
einer Farbe, als GIF oder JPEG Grafik. Disablen Sie den Layer mit shCOLOR
= "".
shOPACITY (nicht bei ie4,ns4 oder opera)
Definieren Sie hiermit einen Opacity Filter, um den Schatten transparent
zu machen. Diese Funktion wird bei Internet Explorer 4, Netscape 4, Opera
und bei Mozilla Versionen vor Build 0.9 nicht unterstützt.
keepSubLIT
Zur Wahl stehen hier true oder false. Wenn true, dann verbleibt srCOLOR
wenn Sie mit der Maus über Child- (Sub- Sub-) menus fahren.
chvOFFSET
Per Default werden Childmenus direkt neben seinem übergeordneten
Submenu angezeigt. Indem Sie diese Variable verwenden, haben Sie die Möglichkeit,
einen Versatz nach unten (+) oder oben (-) in der definierten Anzahl Pixels
zu bewirken. Sie können diesen Offset individuell für jedes Childmenu
setzen, indem Sie die Childmenu- Properties einsetzen.
chhOFFSET
Hiermit erzeugen Sie den oben beschriebenen Offset, allerdings in horizontaler
Richtung.
closeTIMER
Hiermit bestimmen Sie die Verzögerung in Millisekunden, die vergeht,
bis sich das Menu schliesst, nachdem die Maus es verlassen hat.
Beachten Sie, dass, während ein Menu geöffnet ist, die Seite
temporär mit einem transparenten Event- Handling- Layer überdeckt
ist, so dass andere Elemente Ihrer Seite unter Umständen nicht funktionieren,
solange das Menu geöffnet ist. Setzen Sie deshalb diesen Wert nicht
zu hoch.
aCURSOR (nicht ns4 oder opera)
Definieren Sie hier den Cursor, der über Links angezeigt werden
soll.
Die Browser setzen diesen CSS Wert nicht einheitlich um. IE6 erkennt
sowohl "pointer" als auch "hand", um den W3C Standard "pointer" wie auch
den IE5 proprietären Style "hand". IE5 erkennt nur "hand", während
Mozilla nur "pointer" erkennt. Dieses Script erkennt beides und wandelt
es bei Bedarf um.
Für NS4 und Opera macht der Wert dieser Variable keinen Unterschied,
weil sie gar keine Cursor Styles unterstützen.
altDISPLAY
Wenn Sie einen ALT- Text als Teil Ihrer Link- Definitionen bestimmen,
können Sie hiermit definieren, wie dieser Beschreibungstext angezeigt
wird. Die Optionen sind:
"title" - zeigt den Text als ein title Attribut
(tooltip) an, welches angezeigt wird, wenn Sie mit der Maus über einen
Link fahren. Dies funktioniert nicht bei NS4, welcher das title Attribut
nicht unterstützt.
"status" - schreibt den Beschreibungstext
in die Statusbar des Browsers.
"" - disable alt text
allowRESIZE
Mögliche Werte hier sind true, false oder mu. Bei true wird die
Seite neu geladen, sobald sich die Grösse des Browserfensters ändert.
Die Verwendung von true wird empfohlen, da die Änderung des Browserfensters
einige Auswirkungen auf die Funktionen des Menus mit sich bringt:
Wenn Sie stretchMENU oder showBORDERS
auf true gesetzt haben, setzt dieser Wert die Breite der Navigationsbar
fest.
Wenn Sie menuALIGN auf "right"
oder "center" gesetzt haben, wird dieser Wert
dazu verwendet, die Position der Navbar zu kalkulieren.
Dieser Wert bestimmt die Grösse des Eventhandling Layers.
In Netscape 4 (wieder einmal) werden absolut positionierte Layer zerhackstückelt,
wenn Sie die Fenstergrösse verändern ohne die Seite neu zu laden.
Wenn Sie also unbedingt auf den refresh der Seite verzichten wollen oder
müssen, lassen Sie es wenigstens für NS4 zu, indem Sie allowRESIZE=mu;
verwenden.
redGRID Anzeige eines roten Rahmens
gridWIDTH überschreibt Rahmenbreite
gridHEIGHT überschreibt Rahmenhöhe
documentWIDTH überschreibt Dokumentbreite
Diese variablen erlauben es Ihnen, Kontrolle über das Event- Handling des Menulayers und die zurückgegebene Dokumentbreite zu übernehmen.
Es ist ziemlich kompliziert zu beschreiben, wozu dies hilfreich ist, deshalb wird dies auf einer separaten Seite beschrieben.
Controlling des event-handling layer
hideSELECT auto-verstecken von Select Boxen, wenn Menu geöffnet ist (ie5+ only).
Zur Auswahl stehen hier true oder false. Wenn true, dann wird jedes Select Element auf der Seite auf unsichtbar
geschaltet, wenn ein Menu geöffnet ist und wieder auf sichtbar, wenn das Menu schliesst. Diese Option setzt voraus,
dass Select- Elemente explizite Visibility Eigenschaften besitzen, die vom Script überschrieben werden können.
Der Sinn dieser Variable liegt darin, dass Formularelemente sich nicht von Layern überdecken lassen, es sei denn, man schaltet sie unsichtbar.
allowForSCALING erlaubt das Skalieren von Text in Mozilla 5
Die Auswahl hier ist true oder false.
Mit allowForSCALING disabled wird der Menu Container expandieren, die internen Zellen jedoch nicht.
Menu und Link Definitionen
Menus und Links werden über array-building Funktionen erstellt, es gibt deren fünf für jedes Link/Menu/Children Set:
Die Main Links
addMainItem("http://www.domain.com/","Home",100,"left","_top","Home
page",0,0,"h","#ffdcab","#ffffcc","#007500","#ff6600");
"http://www.domain.com/" Der Link URL. Wenn sich Ihre Seite über mehrere Ordner erstreckt, wird empfohlen,
absolute Links oder Links, die relativ zum Basisverzeichnis zeigen, einzusetzen. Wenn Sie einen Link als "" definieren,
wird der Linkname kein aktiver Link sein, Sie können aber trotzdem Untermenus dazu definieren.
"Home" Der Link Name. Ich nehme an, Sie werden meistens Textlinks verwenden, Sie können hier aber auch HTML
einsetzen, mehr dazu unter Advanced Customizing.
100 Die Breite der Zelle in Pixeln. Wenn einer der Links zu gross für seinen Container wird,
wird der Text umgebrochen und die Zelle gerät aus der Synchronisation mit dem "Nav Stretching". Um eine saubere
Ausrichtung zu erreichen, sollten Sie dem Script mitteilen, wo die Zeilenumbrüche stattfinden sollen, indem Sie <br>
Tags im Linktext verwenden. Wenn Sie "free alignment" einsetzen, wird nur die betreffende Zelle in der Höhe verändert, ansonsten
wird die komplette NavBar entsprechend der höchsten Zelle erhöht.
"left" Textausrichtung, die Optionen sind "left", "right" oder "center".
Falls Sie dies als "" definieren, wird per default "left" verwendet.
"_top" Der Target (das Ziel) des Links. Die Optionen sind "_self", "_parent",
"_top", "_blank" oder "framename", wobei framename der Name eines im Frameset definierten Frames sein muss.
Der Target- Mechanismus unterstützt Frames in Standard- Framesets, iFrames sowie vorgängig per JavaScript geöffnete PopUp Fenster.
Falls Sie dies als "" definieren, wird per default "_self" verwendet.
"Home page" Der Alt Text für diesen Link. Der Text kann ein Tooltip oder eine Statusbar-
Message sein, dies wird mit der Variable "altDISPLAY" definiert. Falls Sie dies als "" definieren, wird keine Anzeige erfolgen.
0,0 Top und linke Position. Wenn Sie eine Standard- horizontale Navbar verwenden,
werden diese beiden Variablen ignoriert, wenn Sie menuALIGN="free" definiert haben, um die Navbar in einzelne Komponenten aufzuteilen,
werden hiermit die Positionen relativ zu absTOP und absLEFT definiert.
"h" spezifiziert einen "Key Trigger" für das angehängte Untermenu, falls vorhanden. Dieses
Feature ist nur in IE 5 und 6 verfügbar und erlaubt Ihnen die Navigation via Tastatur. "" schaltet dieses Feature aus.
"#ffdcab" Überschreibt die Zellen- Hintergrundfarbe. Verwenden einen Hexwert oder einen Farbnamen, Bilder sind nicht
unterstützt.
"#ffffcc" Überschreibt die Zellen- Rollover- Farbe. Verwenden einen Hexwert oder einen Farbnamen, Bilder sind nicht
unterstützt.
"#007500" Überschreibt die Link- Farbe. Verwenden einen Hexwert oder einen Farbnamen, Bilder sind nicht
unterstützt.
"#ff6600" Überschreibt die Link- Hover- Farbe. Verwenden einen Hexwert oder einen Farbnamen, Bilder sind nicht
unterstützt.
Die Submenu- Eigenschaften
defineSubmenuProperties(250,"right","center",7,-4,"filter:alpha(opacity=75)","#ffffcc","#ffdcab","#ff9600","#99cc99","#990000","#009900");
250 Die Breite des Submenus in Pixeln. Wenn eines der Submenus zu lang für den definierten Wert ist
wird der Text umgebrochenund die Synchronisation mit dem Hintergrund geht verloren. Um eine saubere Darstellung zu
erreichen, wenden Sie in diesem Falle gezielte Zeilenumbrüche an, die Sie mit <br> Tags setzen.
"right" Bestimmt, nach welcher Richtung das Submenu ausgerichtet ist und nach welcher Richtung es sich öffnet.
Die Optionen sind "left" oder "right", die Werte sind redundant, wenn Sie "virtual alignment" verwenden.
"center" Textausrichtung, die Optionen sind "left", "right" oder "center".
7 Vertikaler Offset, nach unten (+) oder oben (-) zusätzlich zu vOFFSET, in Pixeln.
Dieser Wert ist redundant, wenn Sie "virtual alignment" verwenden.
-4 Horizontaler Offset, nach links (+) oder rechts (-) zusätzlich zu hOFFSET,
in Pixeln. Menus, die sich von rechts öffnen, werden in die andere Richtung versetzt.
Dieser Wert ist redundant, wenn Sie "virtual alignment" verwenden.
"filter:alpha(opacity=75)" fügt dem Menu einen Filter oder Transition- Effekt hinzu. (IE 5.5/6 only)
"#ffffcc" Überschreibt die Zellen- Hintergrundfarbe. Verwenden einen Hexwert oder einen Farbnamen, Bilder sind nicht
unterstützt.
"#ffdcab" Überschreibt die Zellen- Rollover- Farbe. Verwenden einen Hexwert oder einen Farbnamen, Bilder sind nicht
unterstützt.
"#ff9600" Überschreibt die Rahmenfarbe. Verwenden einen Hexwert oder einen Farbnamen, Bilder sind nicht
unterstützt.
"#99cc99" Überschreibt die DropShadow- Farbe. Verwenden einen Hexwert oder einen Farbnamen, Bilder sind nicht
unterstützt.
"#990000" Überschreibt die Link- Farbe. Verwenden einen Hexwert oder einen Farbnamen.
"#009900" Überschreibt die Link- Hover- Farbe. Verwenden einen Hexwert oder einen Farbnamen.
Die Submenu Links
addSubmenuItem("/index.html","Home page","_top","Go to my home page");
"/index.html" Der Link URL, absolut oder relativ gesetzt.
Wenn Sie einen Links als "" definieren, wird er nicht als aktiver Link funktionieren, Sie können aber dennoch
Childmenus daruntersetzen. Wenn Sie einen Link als "~" (Tilde) definieren, haben Sie die Möglichkeit, Gaps oder dekorative Elemente
zu erzeugen.
"Home page" Der Linktext. Submenu Links können ebenfalls HTML enthalten, siehe auch
"Advanced Customizing".
"_top" Der Target des Links, hier gelten die gleichen Regeln wie bei den MainMenus.
"Go to my home page" Der Alt- Text des Links, hier gelten die gleichen Regeln wie bei den MainMenus.
Wiederholen Sie diese Funktion für jedes Submenu, welches Sie hinzufügen möchten.
Wenn Sie ein Childmenu an einen bestimmten Link anhängen möchten, gibt es zwei weitere Arrays, die Sie nach der
dazugehörenden Submenu- Link- Definition anfügen müssen.
Die Child Menu Eigenschaften
defineChildmenuProperties(142,"left","left",-5,4,"filter:alpha(opacity=75)","#dedeff","#bacdff","#0096ff","#cc6666","#006600","#990099");
142 Die Breite des Childmenus. Hier gelten die gleichen Regeln wie bei den Submenus.
"left" Ausrichtung und Richtung, nach der sich das Childmenu öffnet, hier gelten die gleichen Regeln wie bei den Submenus.
"left" Textausrichtung des Childmenus, hier gelten die gleichen Regeln wie bei den Submenus.
-5 Vertikaler Offset, nach unten (+) oder oben (-), in Verbindung mit chvOFFSET, in Pixeln.
4 Horizontaler Offset, nach links (+) oder rechts (-) in Verbindung mit chhOFFSET, in Pixeln.
"filter:alpha(opacity=75)" fügt dem Menu einen Filter oder Transition- Effekt hinzu (IE 5.5/6 only)
"#dedeff" Überschreibt die Zellen- Hintergrundfarbe. Verwenden einen Hexwert oder einen Farbnamen, Bilder sind nicht
unterstützt.
"#bacdff" Überschreibt die Zellen- Rollover- Farbe. Verwenden einen Hexwert oder einen Farbnamen, Bilder sind nicht
unterstützt.
"#0096ff" Überschreibt die Rahmenfarbe. Verwenden einen Hexwert oder einen Farbnamen, Bilder sind nicht
unterstützt.
"#cc6666" Überschreibt die DropShadow- Farbe. Verwenden einen Hexwert oder einen Farbnamen, Bilder sind nicht
unterstützt.
"#006600" Überschreibt die Link- Farbe. Verwenden einen Hexwert oder einen Farbnamen.
"#990099" Überschreibt die Link- Hover- Farbe. Verwenden einen Hexwert oder einen Farbnamen.
Die Child Menu Links
addChildmenuItem("/trance.shtml","Trance & Techno","_top","Killer
tunes");
"/trance.shtml" Der Link URL, , hier gelten die gleichen Regeln wie bei den Submenus.
"Trance & Techno" Der Linktext, hier gelten die gleichen Regeln wie bei den Submenus.
"_top" Target für diesen Link, hier gelten die gleichen Regeln wie bei den Submenus.
"Killer tunes" Alttext für diesen Link, hier gelten die gleichen Regeln wie bei den Submenus.
Wiederholen Sie diese Funktion, um mehr Links zum Childmenu hinzuzufügen.
Wiederholen Sie danach diese fünf Funktionen, um mehr Main-, Sub- und Childmenus zur Navigationsbar hinzuzufügen.
Achten Sie darauf, die Arrays in der korrekten Reihenfolge zu definieren, es muss immer folgende Reihenfolge eingehalten werden:
addMainItem
defineSubmenuProperties
addSubmenuItem
addSubmenuItem
defineChildmenuProperties
addChildmenuItem
addChildmenuItem
addSubmenuItem
addSubmenuItem
etc ...
Es gibt kein Limit, was die Anzahl der Menus oder Links betrifft, aber es macht Sinn, die gesamte Navbar sichtbar zu behalten,
und alle Menus im Rahmen einer Auflösung von 800 x 600 - das ergibt einen Spielraum von etwa 750 x 450 Pixeln.
Hurra!
Das wäre erstmal geschafft... ;-)
Nun möchten Sie bestimmt weitermachen und die Linkdefinitionen ausreizen, eine grafikbasierende Navbar erstellen,
Behaviors, PopUp- Fenster oder Transition- Effekte einsetzen. Das modulare Design dieses Scripts macht es leicht,
neue Features zu integrieren.
Sehen Sie unter "Advanced Customizing" nach, um mehr zu erfahren.
