Beispiele
Ein dynamisches Menü
Mit Hilfe der Klasse DynamicMenu und ein paar CSS-Kunstgriffen läßt sich aus einer verschachtelten UL-Liste eine dynamische "fly out"-Navigation erzeugen.
HTML-Quellcode des Menüs "Länder-Navigation"Quellcode zeigenQuellcode ausblenden
<ul id="menuCountries"> <li><a href="#">Afrika</a> <ul> <li><a href="#">Angola</a></li> <li><a href="#">Burundi</a></li> <li><a href="#">Elfenbeinküste</a></li> <li><a href="#">Ghana</a></li> <li><a href="#">Marokko</a></li> <li><a href="#">Namibia</a></li> <li><a href="#">Tansania</a></li> <li><a href="#">Tunesien</a></li> </ul> </li> <li><a href="#">Amerika</a> <ul> <li><a href="#">Brasilien</a></li> <li><a href="#">Chile</a></li> <li><a href="#">Ecuador</a></li> <li><a href="#">Haiti</a></li> <li><a href="#">Mexiko</a></li> <li><a href="#">Kanada</a></li> <li><a href="#">Kuba</a></li> <li><a href="#">USA</a></li> </ul> </li> <li><a href="#">Asien</a> <ul> <li><a href="#">Afghanistan</a></li> <li><a href="#">Bhutan</a></li> <li><a href="#">China</a></li> <li><a href="#">Indonesien</a></li> <li><a href="#">Indien</a></li> <li><a href="#">Laos</a></li> <li><a href="#">Myanmar</a></li> <li><a href="#">Philippinen</a></li> <li><a href="#">Taiwan</a></li> </ul> </li> <li><a href="#">Australien</a></li> <li><a href="#">Europa</a> <ul> <li><a href="#">Belgien</a></li> <li><a href="#">Deutschland</a> <ul> <li><a href="#">Baden-Württemberg</a></li> <li><a href="#">Bayern</a></li> <li><a href="#">Berlin</a></li> <li><a href="#">Brandenburg</a></li> <li><a href="#">Bremen</a></li> <li><a href="#">Hamburg</a></li> <li><a href="#">Hessen</a></li> <li><a href="#">Mecklenburg-<br />Vorpommern</a></li> <li><a href="#">Niedersachsen</a></li> <li><a href="#">Nordrhein-Westfalen</a> <ul> <li><a href="#">Aachen</a></li> <li><a href="#">Bielefeld</a></li> <li><a href="#">Dortmund</a></li> <li><a href="#">Essen</a></li> <li><a href="#">Köln</a></li> <li><a href="#">Oberhausen</a></li> <li><a href="#">Paderborn</a></li> <li><a href="#">Siegen</a></li> <li><a href="#">Wuppertal</a></li> </ul> </li> <li><a href="#">Rheinland-Pfalz</a></li> <li><a href="#">Saarland</a></li> <li><a href="#">Sachsen</a></li> <li><a href="#">Sachsen-Anhalt</a></li> <li><a href="#">Schleswig-Holstein</a></li> <li><a href="#">Thüringen</a></li> </ul> </li> <li><a href="#">Dänemark</a></li> <li><a href="#">Frankreich</a></li> <li><a href="#">Luxemburg</a></li> <li><a href="#">Niederlande</a></li> <li><a href="#">Österreich</a></li> <li><a href="#">Polen</a></li> <li><a href="#">Schweiz</a></li> <li><a href="#">Tschechien</a></li> </ul> </li> </ul>
Wie man sieht: nichts als eine schlichte, geradezu nackte Liste - mit nur einer einzigen ID, ohne Klassen, ohne Inline-Javascript. Und damit gut von Hand zu pflegen, gut exportierbar und gut lesbar für Browser ohne CSS- und Javascript-Unterstützung.
Das Hauptziel der CSS-Angaben ist dabei zunächst einmal, alle UL-Elemente ab der zweiten Ebene auszublenden. Der Rest der Stylesheets befaßt sich mit reiner Optik (und mit den Schwächen des Internet Explorers).
CSS-Stylesheet des Menüs "Länder-Navigation"Quellcode zeigenQuellcode ausblenden
html { width:100%; height:100%; }
body { height:100%; }
ul#menuCountries { list-style-type:none; margin:10px 0; padding:1px; background-color:#efefad; width:200px; }
ul#menuCountries li { margin:0; display:block; padding:2px; }
ul#menuCountries li a { color:#000; text-decoration:none; font-size:12px; display:block; padding:4px; margin:0; border:2px solid #fff; background-color:#f7ffce; }
ul#menuCountries li a:hover { background-color:yellow; }
ul#menuCountries ul { display:none; position:absolute; top:50px; left:150px; width:169px; list-style-type:none; margin:0; padding:0; background-color:#efefad; }
ul#menuCountries li.hasSublist > a { font-weight:bold; background:#f7ffce url('/lib/images/icon_expand.gif') no-repeat 179px center; }
ul#menuCountries li.hasSublist > a:hover { background-color:yellow; }
ul#menuCountries ul li.hasSublist > a { background-position:150px center; }
/** now the hacks for IE **/
* html ul#menuCountries a, * html ul#menuCountries li { height:1%; } /* holly hack fix for divers IE bugs */
* html ul#menuCountries ul { width:182px; w\idth:169px; } /* escape hack used for IE5.5 */
* html ul#menuCountries li { margin-left:-16px; mar\gin-left:0; } /* escape hack used for IE5.5 */
/** IE does not understand the child selector > ..... **/
* html ul#menuCountries li.hasSublist { font-weight:bold; }
/** end of hacks for IE **/
Das ist alles auch eher überschaubar. Ein echtes Problem ist die Tatsache, daß der Internet Explorer den child-Selector > nicht unterstützt. Bei dem CSS-Ansatz, den ich hier gewählt habe, führt dies dazu, daß ich für den IE auf die Icons verzichte. Mit einem anderen Ansatz kann man aber für Mozilla und Internet Explorer durchaus dasselbe optische Ergebnis erzielen. Eine Möglichkeit wäre es beispielsweise, die Klasse "hasSublist" (wird dynamisch durch die Methode applyParentCssClass() vergeben) nicht den LI-Elementen zuzuweisen, sondern den A-Knoten. Ich habe dies nicht getan, da es aus meiner Sicht nicht ganz sauber wäre, denn: nicht das A-Element ist der Knoten, der die Unterliste enthält, sondern eben das LI-Element.
Gesteuert wird das Ein- und Ausblenden der Untermenüs (bzw. Unterbäume) durch Mouseover und Mouseout, wobei das Ein- und Ausblenden durch ein Timeout leicht verzögert wird, um ein unruhiges "Zappeln" des Menüs zu verhindern. Die Einbindung der DynamicMenu-Klasse ist denkbar einfach, denn der Konstruktor erwartet nur die ID des in der Hierarchie obersten UL-Knotens.
Lokales Javascript des Menüs "Länder-Navigation"Quellcode zeigenQuellcode ausblenden
var myController, myMenu;
function initLocalObjects() {
myMenu = new DynamicMenu('menuCountries');
myMenu.applyParentCssClass('hasSublist');
var myController = new Controller();
myController.registerEvents(new Array('mouseover', 'mouseout', 'click'));
myController.registerClient(myMenu);
}
addLoadEvent(initLocalObjects);
Mit recht überschaubarem Code hat man also ein recht nettes dynamisches Menü. Dazu sind natürlich eine ganze Reihe von Erweiterungen denkbar: es könnte beispielsweise geprüft werden, ob ein Untermenü über den unteren und/oder rechten Bildschirmrand hinausragen würde und stattdessen nach oben und/oder links aufgeklappt werden muß. Man kann das Menü theoretisch so umstellen, daß es auf Klicks reagiert und nicht auf Mouseover und Mouseout (hier kann dann allerdings ein A-Element nicht gleichzeitig ein Link sein und ein Untermenü steuern). Man kann ein horizontales Menü ermöglichen. Die Untermenüs könnten jeweils direkt unter dem Elternelement ausgeklappt werden (die absolute Positionierung entfiele dann). Und und und...
Kommentare zu dieser Seite
(Keine Kommentare vorhanden.)
Kommentarfunktion ausgeschaltet
Ich würde eigentlich gerne Benutzern der JS-Pocket-Lib und anderen Entwicklern die Möglichkeit bieten, schnell und bequem Kommentare und Anregungen hier zu hinterlassen, denn so ein Feedback ist sehr wichtig für die Verbesserung der Bibliothek. Da aber bereits nach wenigen Tagen die Kommentarfunktion, die ich eingebaut hatte, von zerstörungswütigen Vollidioten massivst zum Spamming mißbraucht wurde und ich auf der anderen Seite daraus auch keinen Hochsicherheitstrakt machen wollte, habe ich die Kommentarfunktion wieder entfernt. Sorry an alle normalen Besucher und fuck yourself, Spammers!