Siehe auch:

Zwischenüberschriften im Menü
Mehrere Methoden, das Menü durch Überschriften zu gliedern.

Neuere Themen:

jQuery animiertes Menü
Ein animiertes Menü mit jQuery. Kurzanleitung zum jQuery Code und der Umsetzung mit WebsiteBaker

Frische Template Dateien, statt aus dem Browsercache geladen
Mit diesem kleinen Trick wird es möglich, immer die aktuellste Datei auszugeben. Egal ob es sich um CSS Dateien, JS, Bilder handelt, der Besucher bekommt immer die aktuellste Version zu Gesicht, ohne den Browser aktualisieren zu müssen.

Slider im Template
Eine Anleitung zum Einbau eines Slider-Scripts in ein ||Template||

Ältere Themen:

Einbinden der Fancybox
Eine Anleitung zum Einbau der FancyBox in eine WebsiteBaker 2.8.x Installation

Templates - Frontend und Backend Design

Dropdown Menüs

Moritz Stapelfeldt

In diesem Tutorial möchte ich euch zeigen, wie ihr mit einfachen Mitteln ein gutes Menü hinbekommt, welches durch Hovereffekte und Dropdowns glänzt.

Bei der Erstellung gibt es leider 2 Probleme, die wir zu gegebener Zeit klären und umgehen werden.

1. Es gibt IE und somit immer noch Browser die kein Standard CSS können,

2. Wir müssen ein paar kleine Tricks anwenden, um Links ein- und auszublenden.

Zuallererst ist einmal der Menüaufruf wichtig. Da wir das ganze nachher leicht formatieren möchten, benutzen wir von Anfang an show_menu2. Wir setzen das wie in der Template-Anleitung beschrieben in ein extra div.

<div id="menu">
                <?php show_menu2(0, SM2_ROOT, SM2_ALL, SM2_ALL, false, "\n</li>", false, false, false, '<ul id="drop_menu" class="menu">'); ?>
                </div>

Erklärung:

Neben den normalen Parametern haben wir über id und class zwei zusätzliche Stylehilfen eingebaut. Mehr über show_menu2 findet ihr unter http://www.websitebakers.de/sm2/

Mit diesem Aufruf zeigen wir allerdings alle Links an, was wir nicht wollen - und es ist auch nicht sonderlich schön, weil unformatiert. Also geht es weiter mit der CSS-Datei.

Zuerst einmal wollen wir die Listenelemente loswerden und alles fein säuberlich untereinander anordnen. Das machen wir, indem wir die Listenform vom Menü formatieren.

#menu ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
                width: auto;
                position: relative;  /* Das brauchen wir nur für den IE */
}

Als nächstes kümmern wir uns dann um die einzelnen Punkte in der Liste. Wir ordnen diese nebeneinander an.

#menu ul li {
float: left;
}

Da das aber im moment noch alles zusammenklebt, formatieren wir als nächstes die eigentlichen Links und positionieren diese etwas.

#menu ul li a {
display: block;
padding: 5px 10px 5px 0px;
text-decoration: none;
}

Damit hätten wir die eigentliche Formatierung schon abgeschlossen. Kümmern wir uns also jetzt erstmal darum, dass die Elemente verschwinden, wenn wir sie nicht sehen wollen, und auftauchen wenn wir mit der Maus darüber fahren.

#menu .menu li ul,
#menu .menu li ul ul,
#menu .menu li:hover ul ul,
#menu .menu li:hover ul ul ul {display: none;}
#menu .menu li a:focus ul,
#menu .menu li:hover ul,
#menu .menu li li:hover ul,
#menu .menu li li li:hover ul {display: block;}

Erklärung:

Mit display:none verstecken wir ein Element, mit display:block lassen wir es wieder erscheinen. Jetzt kommt es nur drauf an, wo wir dies einsetzen. Jedes ul und li steht für ein anderes Element in einer Liste. Die Navigation können wir uns einfach so vorstellen:

ul li

Wollen wir also das letzte li ansprechen, machen wir das über li ul ul ul. Beim Verstecken und Anzeigen können wir es uns etwas einfacher machen, da wir immer nur die ganze Liste ansprechen und nicht einzelne Elemente.

Jetzt müssen wir nur noch bestimmen, wo ein Element auftauchen soll. Das machen wir, indem wir es positionieren.

#menu .menu li ul {position: absolute; margin: 0;}
#menu .menu li ul li {margin: 0; padding: 0;}
#menu .menu li ul a {padding: 5px 5px 5px 0px;}
#menu .menu li ul li ul li a {padding: 5px 5px 5px 0px; }
#menu li {position: relative;}
#menu ul ul ul {position: absolute; top: 1px; left: 100%;}

Im Prinzip war das unser gesamtes Menü und unsere Arbeit wäre getan, wenn es da nicht den IE gäbe. Um dem beizubringen, dass er unser Menü auch annimmt, müssen wir noch ein bisschen was im Template verändern. Also wieder zurück zu unserer index.php.

Wir setzen nun in den head-Bereich eine IE-spezifische Anweisung für unser Menü:

<!--[if IE]>
                <style type="text/css" media="all">
                               body {behavior: url("<?php echo TEMPLATE_DIR; ?>/csshover.htc");}
                </style>
<![endif]-->

Die Datei csshover.htc bekommt ihr bei http://www.xs4all.nl/~peterned/csshover.html. Die müsst ihr in euer Template-Verzeichnis packen. Das einzige, was die Datei eigentlich macht, ist etwas Dolmetscher spielen für den IE.

Nachdem wir dies nun auch hätten und selbst IE6 unser Menü erkennt, sind wir dann fast fertig. "Fast", weil es im Moment noch recht trostlos aussieht. Was also fehlt, sind ein paar Styles und vor allem Hintergründe. Da ich aber nicht weiß, wie ihr euer Menü gestalten wollt, lass mich euch nur ein paar Tipps geben, was ihr verwenden solltet:

/*1. Ebene*/
#menu ul li {color: #; text-align: ;}
#menu ul li a {display: block; background: #; padding: 0px 0px 0px 0px; color: #;}
#menu ul li a:hover, #menu li a:focus {background: #; color: #;}
#menu li a:active, #menu ul li a.active {background: #; color: #;}
/*2. Ebene*/
#menu .menu li ul {width: ; }
#menu .menu li ul li {width: ; text-align: ; }
#menu .menu li ul a {width: ; background: #; color: #;}
#menu .menu li ul a:hover { background: #; color:#;}
/*3. Ebene*/
#menu .menu li ul li ul li a { width: ; background: #; color: #; }
/*Aktueller Link*/
#menu li.menu-current a {background: #; color: #;}

So und nun wünsche ich euch viel Spaß beim Nachbauen.

Bis denne dann Moritz

Zurück zur Übersicht