Das Navigationsmenu von Milonic ist eines der vielfältigst konfigurierbaren seiner Art. Der Wandlungsvielfalt und Flexibilität auf der einen Seite steht allerdings eine gewisse Komplexität gegenüber, so dass die Konfiguration des Menus nicht gerade einfach ist. Auf den folgenden Seiten bieten wir Ihnen einen Einblick in die Funktionsweise des Menus und zeigen Ihnen auf, welche Einsatzmöglichkeiten das Menu zu bieten hat und worauf zu achten ist, damit es reibungslos funktioniert.
Die Navigation kann sowohl innerhalb von Framesets als auch in framelosen Seiten eingebaut werden. Dazu werden jedoch unterschiedliche arrays benötigt, dazu jedoch später mehr. Grundsätzlich wird empfohlen, die Navigation aus Stabilitätsgründen in framelosen Seiten zu verwenden.
In jede Seite, die das Menu beinhalten soll, muss folgender Code im Bodybereich, am besten direkt nach dem <BODY> Tag eingebaut werden: <SCRIPT language=JavaScript> /* Milonic DHTML Website Navigation Menu Written by Andy Woolley Copyright 2002 (c) Milonic Solutions Ltd. All Rights Reserved. Plase vist http://www.milonic.co.uk/menu/ or e-mail menu3@milonic.com You may use this menu on your web site free of charge as long as you place prominent links to http://www.milonic.co.uk/menu and you inform us of your intentions with your URL AND ALL copyright notices remain in place in all files including your home page. Comercial support contracts are available on request if you cannot comply with the above rules. */ </SCRIPT> <SCRIPT language=JavaScript src="milonicmenu/menu_array.js" type=text/javascript></SCRIPT> <SCRIPT language=JavaScript src="milonicmenu/mmenu.js" type=text/javascript></SCRIPT>
<SCRIPT language=JavaScript> /* Milonic DHTML Website Navigation Menu Written by Andy Woolley Copyright 2002 (c) Milonic Solutions Ltd. All Rights Reserved. Plase vist http://www.milonic.co.uk/menu/ or e-mail menu3@milonic.com You may use this menu on your web site free of charge as long as you place prominent links to http://www.milonic.co.uk/menu and you inform us of your intentions with your URL AND ALL copyright notices remain in place in all files including your home page. Comercial support contracts are available on request if you cannot comply with the above rules. */ </SCRIPT>
<SCRIPT language=JavaScript src="milonicmenu/menu_array.js" type=text/javascript></SCRIPT> <SCRIPT language=JavaScript src="milonicmenu/mmenu.js" type=text/javascript></SCRIPT>
Die Datei menu_array.js enthält die Konfiguration des Menus. Mit dieser Datei werden wir uns in der Folge näher beschäftigen. Die Datei mmenu.js enthält den Code, der für die Umsetzung der Konfiguration zuständig ist, an dieser Datei gibt es weiter nichts zu tun.
Als ersten Schritt sehen wir uns eine Standardkonfiguration an, in späteren Beispielen nehmen wir spezielle Konfigurationen unter die Lupe.
Der folgende Code stellt den Urheberrechtshinweis dar und sollte nicht aus der Datei entfernt werden. Bringen Sie, sollten Sie die Navigation auf Ihren Seiten einsetzen, auch einen gut sichtbaren Link oder ein Banner zur Webseite von Milonic an. Bedenken Sie, in der Entwicklung einer so komplexen Navigation steckt viel Arbeit, ein Link ist das Mindeste, was man als Gegenleistung erbringen muss. /* DHTML Menu version 3.3.19 Written by Andy Woolley Copyright 2002 (c) Milonic Solutions. All Rights Reserved. Plase vist http://www.milonic.co.uk/menu or e-mail menu3@milonic.com You may use this menu on your web site free of charge as long as you place prominent links to http://www.milonic.co.uk/menu and your inform us of your intentions with your URL AND ALL copyright notices remain in place in all files including your home page Comercial support contracts are available on request if you cannot comply with the above rules. */
/* DHTML Menu version 3.3.19 Written by Andy Woolley Copyright 2002 (c) Milonic Solutions. All Rights Reserved. Plase vist http://www.milonic.co.uk/menu or e-mail menu3@milonic.com You may use this menu on your web site free of charge as long as you place prominent links to http://www.milonic.co.uk/menu and your inform us of your intentions with your URL AND ALL copyright notices remain in place in all files including your home page Comercial support contracts are available on request if you cannot comply with the above rules. */
Die folgende Zeile ist kritisch für die Funktionsfähigkeit des Menus und darf nur einmal vorkommen. Falls Sie mehr als eine menu_array.js Datei einsetzen, kommentieren Sie diese Zeile in allen anderen Dateien aus (mit einem //). menunum=0;menus=new Array();_d=document;function addmenu(){menunum++;menus[menunum]=menu;}function dumpmenus(){mt="<script language=javascript>";for(a=1;a<menus.length;a++){mt+="menu"+a+"=menus["+a+"];"}mt+="<\/script>";_d.write(mt)}
menunum=0;menus=new Array();_d=document;function addmenu(){menunum++;menus[menunum]=menu;}function dumpmenus(){mt="<script language=javascript>";for(a=1;a<menus.length;a++){mt+="menu"+a+"=menus["+a+"];"}mt+="<\/script>";_d.write(mt)}
Ab hier beginnt der editierbare Teil der Konfiguration, wie der folgende Hinweis zeigt ;-)
//////////////////////////////////// // Editable properties START here // ////////////////////////////////////
Der Internet Explorer ab Version 5.5 bietet die Möglichkeit, tolle Filtereffekte in Form von proprietären Style- Sheets einzusetzen. Diese Filter sind auch in dieser Navigation einsetzbar, verwenden Sie dazu folgende Zeilen: if(navigator.appVersion.indexOf("MSIE 6.0")>0) { effect = "Fade(duration=0.2);Alpha(style=0,opacity=88);Shadow(color='#777777', Direction=135, Strength=5)" } else { effect = "Shadow(color='#777777', Direction=135, Strength=5)" } Ein Bug in IE 5.5 führt zu Problemen, wenn man mehr als einen Filter einsetzt, deshalb oberes if - else Statement. Weitere Filter finden Sie hier.
Als nächstes werden eine Reihe Variablen gesetzt:
timegap=500 Eine Angabe in Millisekunden, die bewirkt, dass das jeweilige Menu noch einen Moment angezeigt bleibt, wenn der Mauszeiger es verlässt. followspeed=5 Wert, der festlegt, wie schnell das Menu beim Scrollen der Seite folgt. followrate=40 Wert, der festlegt, wie schnell das Menu beim Scrollen der Seite folgt. suboffset_top=10; Offset Position eines Untermenus von oben suboffset_left=10; Offset Position eines Untermenus von links
Als nächstes wird ein Array festgelegt, welches verschiedene Style- Properties definiert. Sie können so viele dieser Arrays festlegen, wie Sie wollen, d.h., jedes Untermenu kann seinen eigenen Stil haben.
style1=[ "navy", Schriftfarbe bei MouseOut "ccccff", Hintergrundfarbe bei MouseOut "ffebdc", Schriftfarbe bei MouseOver "4b0082", Hintergrundfarbe bei MouseOver "000000", Rahmenfarbe des Menus 12, Schriftgrösse in Pixeln "normal", Schriftstil (italic oder normal) "bold", Schriftgewicht (fett oder normal) "Verdana, Arial", Schriftname 4, innere Rahmenbreite eines Menu Items "milonicmenu/arrow.gif", Grafik eines Submenus (leer lassen, falls keine Grafik) , 3D Rahmen (um Menu Items; 0,1 oder leer lassen) "66ffff", 3D High Color "000099", 3D Low Color "Purple", Current Page Item Font Color (leer lassen zum deaktivieren) "pink", Current Page Item Background Color (leer lassen zum deaktivieren) "milonicmenu/arrowdn.gif", Top Bar Grafik (leer lassen, wenn nicht benötigt) "ffffff", Menu Header Schriftfarbe (leer lassen, wenn nicht benötigt) "000099", Menu Header Hintergrundfarbe (leer lassen, wenn nicht benötigt) ]
Das folgende Array enthält die Menu- Eigenschaften und -Details
addmenu(menu=[ "mainmenu", Menuname, wird benötigt, um ein Menu aufrufen zu können 40, Abstand vom oberen Bildschirm-/Fensterrand 250, Abstand vom linken Bildschirm-/Fensterrand , Breite des Menus in Pixeln (leer lassen, wenn automatisch) 1, Rahmenbreite , Screen Position - Ausrichtung des Menus; verwenden Sie hier "center;left;right;middle;top;bottom" oder eine Kombination wie "center:middle"; (leer lassen, wenn nicht benötigt) style1, Name des Arrays, welches die Style- Properties enthält (siehe weiter oben) 1, Menu sichtbar (1=on/0=off); dies wird in der Regel auf 1 gesetzt "left", Ausrichtung des Menutextes; gültige Werte sind: left, right oder center effect, Filtervariable, siehe auch Beschreibung weiter oben , Follow Scrolling - weist das Menu an, beim Scrollen der Seite zu folgen (1=on/0=off) 1, Horizontal Menu - richtet das Menu horizontal oder vertikal aus (1=hor./0=vert.) , Keep Alive - hält das Menu sichtbar, bis ein anderer Menupunkt aktiviert wird (1=on/0=off) , Position der TOP- sub Grafik (left:center:right) , setzt die Breite bei horizontalem Menu auf 100% und die Höhe auf den angegeben Wert. (leer lassen, wenn nicht benötigt) , Rechts nach links - bspw. in hebräisch verwendet (1=on/0=off) , Öffnet Menu bei Mausklick - leer lassen bei OnMouseover (1=on/0=off) , ID des div, welches bei MouseOver versteckt werden soll (nützlich bei Formularelementen) , Reserviert für zukünftige Verwendung , Reserviert für zukünftige Verwendung , Reserviert für zukünftige Verwendung
Hier folgt nun die Beschreibung der obersten Menuebene: ,"Home","http://www.nightfire.ch",,"Back to the home page",1 Format: "Menutext", "URL", "Alternate URL", "Status", "Separator Bar"
,"News sites ","show-menu=news",,"",1 Um auf Untermenus zu verweisen, wird das Attribut show-menu= mit dem Namen des Untermenus verwendet.
,"Webmaster ","show-menu=webmaster",,"",1 ,"Downloads ","show-menu=downloads",,"",1 ,"Search ","show-menu=search",,"",1 ,"Other ","show-menu=other",,"",1 ]) Hier endet die Definition des Hauptmenus.
Die Definition der Submenus erfolgt im selben Verfahren, nämlich mittels Arrays:
addmenu(menu=["news", ,,120,1,"",style1,,"left",effect,,,,,,,,,,,, ,"General","show-menu=generalnews",,,1 ,"Technology","show-menu=technonews",,,1 ])
Das Submenu 'news' verweist wiederum auf zwei Submenus, welche im folgenden definiert werden... addmenu(menu=["generalnews", ,,170,1,"",style1,,"left",effect,,,,,,,,,,,, ,"CNN","http://www.cnn.com",,,0 ,"MSNBC","http://www.msnbc.com",,,0 ,"ABC News","http://www.abcnews.com",,,0 ,"Vancouver Local News","show-menu=canadanews",,,0 Hier eine weitere Verzweigung zu einem Submenu ,"BBC News","http://news.bbc.co.uk",,,0 ]) addmenu(menu=["canadanews", ,,120,1,"",style1,,"left",effect,,,,,,,,,,,, ,"CTV News","http://www.ctvnews.com",,, ,"Vancouver Sun","http://www.canada.com/vancouver/vancouversun/",,, ]) addmenu(menu=["technonews", ,,110,1,"",style1,,"left",effect,,,,,,,,,,,, ,"TechWeb","http://www.cnn.com",,,0 ,"News.com","http://www.news.com",,,0 ,"Wired News","http://www.wired.com",,,0 ,"Slashdot","http://www.slashdot.com",,,0 ]) Hier endet die Definition der News- Seiten
addmenu(menu=["canadanews", ,,120,1,"",style1,,"left",effect,,,,,,,,,,,, ,"CTV News","http://www.ctvnews.com",,, ,"Vancouver Sun","http://www.canada.com/vancouver/vancouversun/",,, ])
Um die Einbindung von Grafiken in die Menustruktur zu demonstrieren, werfen wir einen Blick auf das "Webmaster"- Submenu:
addmenu(menu=["webmaster", ,,170,1,"",style1,,"left",effect,,,,,,,,,,,, ,"<img src=milonicmenu/nightfire.gif height=16 width=16 border=0> Nightfire Java","http://www.nightfire.ch/java/",,,1 ,"<img src=milonicmenu/newsimage.gif border=0> Dynamic Drive","http://www.dynamicdrive.com",,,1 ,"<img src=milonicmenu/newsimage.gif border=0> JavaScript Kit","http://www.javascriptkit.com",,,1 ,"<img src=milonicmenu/newsimage.gif border=0> Freewarejava.Com","http://www.freewarejava.com",,,1 ,"<img src=milonicmenu/newsimage.gif border=0> Active-X.com","http://www.active-x.com",,,1 ,"<img src=milonicmenu/newsimage.gif border=0> Web Monkey","http://www.webmonkey.com",,,1 ,"<img src=milonicmenu/newsimage.gif border=0> Jars","http://www.jars.com",,,1 ])
Vielleicht ist Ihnen bei der Betrachtung des Codes aufgefallen, dass jeweils nur eine Grafik definiert wird, am lebenden Objekt jedoch MouseOver- Effekte ersichtlich sind. Nicht? Schauen Sie mal nach.... :-)) Woher weiss das Script, dass beispielsweise beim Eintrag "Nightfire Java" kein Mouseovereffekt erfolgt, bei den anderen jedoch schon, obwohl in beiden Fällen jeweils nur eine Grafik definiert ist? Die Lösung ist in einer Funktion in der Datei mmenu.js versteckt, die jeweils prüft, ob zu einer im Menu definierten Grafik eine weitere Grafik mit dem Zusatz "_over", in unserem Falle also "newsimage_over.gif" existiert und diese bei MouseOver dann anzeigt.
Hier folgt die Definition des Submenus "Downloads", ohne spezielle Effekte...
addmenu(menu=["downloads",,,120,1,,style1,0,"left",effect,0,,,,,,,,,,, ,"Download.com","http://www.download.com",,,1 ,"Tucows","http://www.tucows.com",,,1 ])
Definition des Submenus "Search", mit Garfiken, aber ohne MouseOver- Effekte.... addmenu(menu=["search", ,,140,1,"",style1,,"",effect,,,,,,,,,,,, ,"<img src=milonicmenu/google_icon.gif border=0> Google.com", "http://www.google.com",,,1 ,"<img src=milonicmenu/yahoo_icon.gif border=0> Yahoo", "http://www.yahoo.com",,,1 ,"<img src=milonicmenu/av_icon.gif border=0> Altavista", "http://altavista.com",,,1 ,"<img src=milonicmenu/excite.gif border=0> Excite", "http://www.excite.com",,,1 ])
Der letzte Menueintrag präsentiert wiederum eine Spezialität, nämlich einen Filtereffekt.
addmenu(menu=["Other",,,140,1,,style1,0,"left","randomdissolve(duration=0.5);Shadow(color='#999999', Direction=135, Strength=5)",0,,,,,,,,,,, ,"Menu Authors Site","http://www.milonic.co.uk/menu",,"Milonic DHTML Menu Site",1 ]) Hierbei können Sie alle Filtereffekte einsetzen, die Microsoft (und sie sind auch nur bei Microsoftbrowsern zu sehen) zu bieten hat. ;-)
Die letzte Zeile ruft die Funktion dumpmenus auf, die das Menu startet.
dumpmenus()
Hiermit ist die grundsätzliche Konfiguration des Menus beendet. Wir haben bereits einige Effekte, die das Menu zu bieten hat, kennengelernt, es steckt jedoch noch weit mehr Potenzial in diesem Menu.
Was die Navigation noch drauf hat, erfahren Sie auf den folgenden Seiten.
Menu in Frames MultiColor Menu [weitere folgen demnächst]
