Horizontale Navigation a la Suckerfish¶
- Horizontale Navigation a la Suckerfish
- Vorbereitungen
- CSS-Formatierungen
- Ebenen ein- und ausblenden
- Browserkompatibilität
- Letzte Anpassungen
Mit der in der neuen Version überarbeiteten Navigationsstruktur ist es nun möglich Navigationen a la Suckerfish zu realisieren.
Diese Anleitung zeigt die Erstellung eines solchen Menüs. Wer selbst ein Menü a la Suckerfish von Grund auf Entwickeln will, dem empfehle ich zuerst alle Blöcke sichtbar darzustellen, und sich erst dann um die mouseover Effekte zu kümmern. Bei den meisten im Netz zu findenden Anleitungen, wird sofort die erste Ebene auf unsichbar gesetzt. Damit ist eine Fehlerbehandlung nur sehr schwer zu realisieren.
Als gutes Tool für das Anzeigen des CSS-Struktur der einzelnen Blöcke im HTML-Code habe ich für Firefox das Programm Firebug gefunden.
Ausgangspunkt ist folgende Seitenstruktur:
- Startseite
- Seite 1
- Seite 1.1
- Seite 1.1.1
- Seite 1.2
- Seite 1.1
- Seite 2
- Seite 3
- Seite 3.1
Vorbereitungen¶
- Modul für Hauptnavigation anlegen
- Layout->Module->neues Modul
- Name des Moduls: Suckerfish
- Modultyp: Navigationsmenü
- Leeres Stylesheet anlegen
- Layout->Stylesheet->neues Stylesheet
- Name: Suckerfish
- Seitenlayout anlegen
- Layout->Seitenlayout->neues Layout
- Name des Layouts: suckerfish
- Layoutvorlage: fe_page
- Stylesheets: suckerfish
- Spalten: eine
- Modul Suckerfish in Spalte main anzeigen
- Seitenstruktur anlegen
Daraus folgt bei Typolight folgender HTML-Code
1 <div class="mod_navigation block">
2
3 <a href="index.php/startseite.html#skipNavigation_4" class="invisible" title="Navigation überspringen"></a>
4
5 <ul class="level_1">
6 <li class="active"><p class="active">startseite</p></li>
7 <li class="submenu"><a href="index.php/seite1.html" title="seite1" class="submenu" onclick="this.blur();">seite1</a>
8 <ul class="level_2">
9 <li class="submenu"><a href="index.php/seite1_1.html" title="seite1.1" class="submenu" onclick="this.blur();">seite1.1</a>
10 <ul class="level_3">
11 <li><a href="index.php/seite1_1_1.html" title="seite1.1.1" onclick="this.blur();">seite1.1.1</a></li>
12 </ul>
13 </li>
14 <li><a href="index.php/seite12.html" title="seite1.2" onclick="this.blur();">seite1.2</a></li>
15 </ul>
16 </li>
17 <li><a href="index.php/seite2.html" title="seite2" onclick="this.blur();">seite2</a></li>
18 <li class="submenu"><a href="index.php/seite3.html" title="seite3" class="submenu" onclick="this.blur();">seite3</a>
19 <ul class="level_2">
20 <li><a href="index.php/seite3_1.html" title="seite3.1" onclick="this.blur();">seite3.1</a></li>
21 </ul>
22 </li>
23 </ul>
24
25 <a id="skipNavigation_4" class="invisible" title="Navigation überspringen"></a>
26
27 </div>Im Browser wird die Navigation ohne CSS-Formatierungen folgendermaßen dargestellt:
CSS-Formatierungen¶
Nun können wir uns daran machen, in dem zuvor neu angelegten Stylesheet suckerfish die CSS-Formatierungen einzufügen. Im ersten Schritt wird die Liste untereinander angeordnet und die Formatierungen entfernt. Um sicher zu gehen, dass nicht durch eine zu kleine Umgebende Box Inhalte abgeschnitten werden, setzte ich hier noch zusätzlich die Höhe des umgebende Navigationsblocks auf 300 Pixel. In wie weit das auch bei einer anderen Seitenstruktur nötig ist, muss von Fall zu Fall untersucht werden.
1 .mod_navigation
2 {
3 height:300px;
4 }
5
6 .mod_navigation p
7 {
8 margin:0px;
9 padding:0px;
10 }
11
12 .mod_navigation ul
13 {
14 margin:0px;
15 padding:0px;
16 list-style-type:none;
17 }Damit werden die Abstände des Paragraphen (<p>) enfernt, der die aktive Seite umfasst, und alle Einträge werden links angeordnet. Für den Einsatz in einer Seitenstruktur muss das CSS .mod_navigation (siehe letzte Anpassungen) später noch angepasst werden. Zum Üben und zur Veranschaulichung habe ich es erst einmal nur mit einer Höhe von 300 px angegeben.
Als nächstes werden dir Menüpunkte der ersten Ebene in eine horizontale Anordnung überführt.
1 .mod_navigation li
2 {
3 width:160px; /* Breite eines Menüpunktes festlegen */
4 position:relative; /* Position */
5 float:left; /* links nebeneiander anordnen */
6 background-color:#999999; /* eine Hintergrundfarbe */
7 border-right:1px solid #ffffff; /* optischer Rahmen */
8 border-bottom:1px solid #ffffff; /* optischer Rahmen */
9 border-left:1px solid #ffffff; /* optischer Rahmen */
10 line-height:35px; /* bestimmt die Höhe eines Menüeintrages */
11 }
12
13 .mod_navigation li ul
14 {
15 left:-1px;
16 top:36px; /* zweite Ebene beginnt 1 Pixel unter der ersten Ebene */
17 position:absolute; /* Position wird absolut zum Elternelement gesetzt */
18 display:block; /* Für erste Formatierung sichtbar. Wir später auf none gesetzt */
19
20 }Nun müssen wir noch die Menüpunkte der dritten Ebene sichtbar machen. Sie sollten rechts vom übergeordneten Menüpunkt erscheinen. Momentan wird der Menüpunkt Seite 1.1.1 noch von dem Menüpunkt 1.2. verdeckt. Also schieben wir ihn 161 Pixel (Breite eines Menüeintrages + 1 Pixel Spalt) nach rechts und positionieren ihn absolut zum übergeordneten Element.
1 .mod_navigation li ul ul
2 {
3 left:161px;
4 top:0px;
5 position:absolute;
6 }Dabei entsteht folgende Darstellung:
Das sieht doch gut aus. Nun können wir uns mit dem Ein- und Ausblenden der einzelnen Ebenen beschäftigen.
Ebenen ein- und ausblenden¶
Für das Ein- und Ausblenden der einzelnen Ebenen wird die CSS Pseudoklasse :hover benutzt. Die in diesem Kapitel beschriebenen Methoden funktionieren nur im Firefox. Für den IE müssen wir einen Workaround benutzen, der im nächsten Kapitel beschrieben wird.
Blenden wir also alles unterhalb der ersten Ebene aus. Dafür ändern wird die Formatdefinition .mod_navigation li ul wie folgt:
1 .mod_navigation li ul
2 {
3 bottom:0px;
4 left:-1px;
5 right:0px;
6 top:36px;
7 position:absolute;
8 display:none; /* Ausbleden der Untermenüs */
9
10 }Anschließend fügen wir folgenden neuen Formatdefinition hinzu: Zeigt die Unternavigationen an, wenn man mit der Maus über eine Hauptnavigation fährt.
1 .mod_navigation li:hover ul
2 {
3 display:block;
4 }Blendet die Unternavigationen der dritten Ebene aus, wenn man mit der Maus über eine Hauptnavigation fährt.
1 .mod_navigation ul li:hover ul ul
2 {
3 display:none;
4 }Zeigt die Unternavigationen der dritten Ebene an, wenn man mit der Maus über eine Unternavigation der zweiten Ebene fährt.
1 .mod_navigation ul ul li:hover ul
2 {
3 display:block;
4 }Browserkompatibilität¶
Wie schon im letzten Kapitel erwähnt, passiert beim IE nichts, wenn man mit der maus über einen Menüpunkt fährt. Das liegt daran, dass im IE nur Links (<a>) mit der Pseudoklasse :hover belegt werden können. Es ist aber möglich über das Document Object Model (DOM) zu jedem Element Mauseffekte hinzuzufügen. Dafür wird allerdings Javascript benötigt. Wer also Wert darauf legt, dass sein Menü auch ohne Javascript funktioniert, wird beim IE leider enttäuscht. Es gilt für den IE folgendes Script hinzuzufügen:
1 sfHover = function() {
2 var sfEls = document.getElementById("main").getElementsByTagName("li");
3 for (var i=0; i<sfEls.length; i++) {
4 sfEls[i].onmouseover=function() {
5 this.className+=" sfhover";
6 }
7 sfEls[i].onmouseout=function() {
8 this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
9 }
10 }
11 }
12 if (window.attachEvent) window.attachEvent("onload", sfHover);Ich habe das so realisiert, dass ich das Script im Verzeichnis plugins in der Datei sfHover.js abgelegt habe. Anschließend habe ich in meinem Seitenlyout unter zusätzliche Head Tags folgende Zeile hinzugefügt.
1 <script type="text/javascript" src="plugins/sfHover.js"></script>Das Script muss je nachdem in welchem Layoutbereich man die Navigation abgelegt hat noch angepasst werden.
Im meinem Fall habe ich zum Testen die Navigation im Layoutbereich main abgelegt. Daher im Script die Zeile:
1 var sfEls = document.getElementById("*main*").getElementsByTagName("li");Wenn Sie die Navigation im Layoutbereich header abgelegt haben, muss die Zeile entsprechend angepasst werden.
1 var sfEls = document.getElementById("*header*").getElementsByTagName("li");Grundsätzlich muss der Identifier (ID) angegeben werden, mit dem die Navigation umschlossen ist. Das Script läuft durch alle Listenelemente, die unterhalb der Identifiers main liegen, und ändert die Klassennamen im DOM um, indem es den zusätzliche Klassennamen sfhover anhängt.
Daher muss man im CSS folgende Formatdefinitionen bearbeiten, und diesen Klassennamen hinzufügen.
1 .mod_navigation ul li:hover ul,
2 .mod_navigation ul li.sfhover ul
3 {
4 display:block;
5 }
6
7 .mod_navigation ul li:hover ul ul,
8 .mod_navigation ul li.sfhover ul ul
9 {
10 display:none;
11 }
12
13 .mod_navigation ul ul li:hover ul,
14 .mod_navigation ul ul li.sfhover ul
15 {
16 display:block;
17 }Letzte Anpassungen¶
Um das Menü auch in einer Seitenstruktur einsetzen zu können ändern wir noch die Ausgabe für die Klasse mod_navigation in
1 .mod_navigation
2 {
3 position:absolute;
4 overflow:visible;
5 z-index:999;
6 }Damit überlappt das Menü beim aufklappen die anderen Seiteninhalte und wir absolut zum umgebenden Container positioniert. Nun wollen wir nur noch die Unterstriche der Verweise entfernen und den Text im Navigationsblock etwas nach links einrücken.
1 .mod_navigation a
2 {
3 padding-left:5px;
4 color:#ffffff;
5 text-decoration: none;
6 }Sie möchten, dass sich die Hintergrundfarbe ändert, wenn man mit der Manus über einen Eintrag fährt? Kein Problem. Fügen sie folgende Formatdefinition ein:
1 .mod_navigation li:hover,
2 .mod_navigation li.sfhover
3 {
4 background-color:#666666;
5 }Damit ändert sich die Hintergrundfarbe in ein dunkleres Grau, wenn Sie über einen Menüeintrag fahren. Nun sieht das Menü so aus:
Es gibt sicher noch eine Reihe von Möglichkeiten, das Menü zu verbessen (z.B. aktive Menüpunkte in einer anderen Farbe darstellen), oder optisch zu verändern. Das überlasse ich aber euerer Kreativität. Ihr könnt ja ruhig etwas mit den Parametern herum experimentieren. Auch ist es möglich mit ein paar Änderungen am CSS ein vertikales Menü draus zu gestalten.
Nützliche Links, die mir bei der Erstellung dieses Artikel geholfen haben:
getestet mit: Opera 9.21, IE 6.0, Firefox 2.0.0.3
--- Tutorial erstellt von Frank Hess, 2007-05-29 12:28
