[Tuto] seitliches Navigation Modul mit Hovereffekt

[Zuckerpuppe]

Hallo

da ja immer wieder danach gefragt wird, ob es möglich ist, eine seitlich angebrachte Navigation im Index anzubringen, habe ich mich mal daran gegeben und euch eine kleine Anleitung dazu geschrieben.

Bitte beachtet!
Der Einbau, bzw. das Anpassen, ist nur für geübte User anzuraten, da sehr vieles verändert werden muss. Für Ungeübte kann das leicht in die Hose gehen..

Ich erkläre hier nur die Grundschritte! Auf kleinste Details ( z.B. "Wie und wo setze ich ein Indexmodul ein" oder "Wo und wie setze ich das CSS ein", etc.) kann ich nicht eingehen, da dieser Beitrag sonst zu umfangreich werden würde.


Schritt 1:

Ihr erstellt ein neues Indexmodul mit folgendem Inhalt:

Code:

<ul id="navigation"><li><a class="home" href="forum.htm"><span>Forum</span></a></li><li><a class="portal" href="/portal"><span>Portal</span></a></li><li><a class="profil" href="/profile.forum?mode=editprofile"><span>Profil</span></a></li><li><a class="nachrichten" href="/privmsg?folder=inbox"><span>Nachrichten</span></a></li><li><a class="galerie" href="/gallery/index.htm"><span>Galerie</span></a></li></ul>

Hier sind jetzt fünf Menüpunkte angegeben -> Forum, Portal, Profil, Nachrichten, Galerie.
Diese sind natürlich noch änderbar und sollten von euch ausgetauscht werden.
Wenn man sich mal den Bereich für einen einzelnen Menüpunkt ansieht, sieht man schnell, was wie geändert werden muss.

<li><a class="profil" href="/profile.forum?mode=editprofile"><span>Profil</span></a></li>

die a class profil braucht ihr, um die Anzeige später über das CSS zu definieren.
der Link href="/profile.forum?mode=editprofile" ist die Seite, die bei Klick aufgerufen wird.
der <span> -tag Profil zeigt den Namen des Menüpunktes an, der in der Navi sichtbar ist.

Die Einstellungen eures Moduls müssen so aussehen:


Jetzt schiebt ihr das Modul auf die linke Seite. Dort dürfen sich keine anderen Indexmodule befinden. Wenn ihr weitere Module auf der Startseite einsetzen möchtet, dann müsst ihr diese auf die rechte Seite schieben.

Wenn ihr das gemacht habt, steht die Navigation zwar jetzt auf der linken Seite, aber nur mit normalen Textlinks ohne grafische Verschönerung und ohne Hovereffekt.
Das wird jetzt über das CSS gemacht.


Schritt 2:

Jetzt muss der CSS-Code eingesetzt werden, der die Navigation optisch aufwertet, eine Grafik hinzufügt, Farben definiert, etc.

für bb3 und PunBB Foren:

#navigation{position:fixed;top: 100px;left: -0px;}
#navigation li{list-style:none;height:39px;padding:2px;width:40px;}
#navigation span{width:0;left:38px;padding:0;position:absolute;overflow:hidden;font-family: Comic Sans Ms, Arial, sans-serif;font-size:18px;font-weight:bold;letter-spacing:0.6px;white-space:nowrap;line-height:39px;}
#navigation a{background:url('https://i.servimg.com/u/f40/12/10/26/30/navibu10.png') no-repeat;height:39px;width:38px;display:block;position:relative;}
#navigation a:hover span{width:auto;padding:0 20px;overflow:visible; }
#navigation a:hover{text-decoration:underline;}
#navigation .home {background-position:0 0;}
#navigation .home:hover {background-position:0 -39px;}
#navigation .home span{background-color:#fff;color:#e26b70;}
#navigation .portal {background-position:-38px 0;}
#navigation .portal:hover {background-position:-38px -39px;}
#navigation .portal span{background-color:#fff;color:#66d2e4;}
#navigation .profil { background-position:-76px 0;}
#navigation .profil:hover {background-position:-76px -39px;}
#navigation .profil span{background-color:#fff;color:#c8ea61;}
#navigation .nachrichten {background-position:-114px 0;}
#navigation .nachrichten:hover{background-position:-114px -39px;}
#navigation .nachrichten span{background-color:#fff;color:#836dde;}
#navigation .galerie {background-position:-152px 0;}
#navigation .galerie:hover {background-position:-152px -39px;}
#navigation .galerie span{background-color:#fff;color:#f1e16b;}

für bb2 Foren:

#navigation{position:fixed;top: 100px;left: -40px;}
#navigation li{list-style:none;height:39px;padding:2px;width:40px;}
#navigation span{width:0;left:38px;padding:0;position:absolute;overflow:hidden;font-family: Comic Sans Ms, Arial, sans-serif;font-size:18px;font-weight:bold;letter-spacing:0.6px;white-space:nowrap;line-height:39px;}
#navigation a{background:url('https://i.servimg.com/u/f40/12/10/26/30/navibu10.png') no-repeat;height:39px;width:38px;display:block;position:relative;}
#navigation a:hover span{width:auto;padding:0 20px;overflow:visible; }
#navigation a:hover{text-decoration:underline;}
#navigation .home {background-position:0 0;}
#navigation .home:hover {background-position:0 -39px;}
#navigation .home span{background-color:#fff;color:#e26b70;}
#navigation .portal {background-position:-38px 0;}
#navigation .portal:hover {background-position:-38px -39px;}
#navigation .portal span{background-color:#fff;color:#66d2e4;}
#navigation .profil { background-position:-76px 0;}
#navigation .profil:hover {background-position:-76px -39px;}
#navigation .profil span{background-color:#fff;color:#c8ea61;}
#navigation .nachrichten {background-position:-114px 0;}
#navigation .nachrichten:hover{background-position:-114px -39px;}
#navigation .nachrichten span{background-color:#fff;color:#836dde;}
#navigation .galerie {background-position:-152px 0;}
#navigation .galerie:hover {background-position:-152px -39px;}
#navigation .galerie span{background-color:#fff;color:#f1e16b;}

Wenn die Navigationsleiste zu sehr in euer Forum ragt, weil ihr noch eine kleine Auflösung habt, dann könnt ihr das mit diesem Code beheben:

#content-container div#left {
margin-left: -130px;
}

Die grün markierte Pixelanzahl ist von euch noch auf eure Bedürfnisse einzustellen.

Alle von mir grün markierten Teile in den oben angegebenen CSS-Codes könnt ihr selber verändern. Die anderen Abschnitte auf keinen Fall, da sich sonst die Anzeige verschiebt.
Beispiele:
Bei #navigation span
könnt ihr die Schriftart verändern font-family: Comic Sans Ms, Arial, sans-serif,
die Schriftgröße font-size:18px
und das Schriftgewicht (fett, normal) font-weight:bold

Bei den einzelnen span-Angaben zu den Menüpunkten, wie z.B. #navigation .home span{background-color:#fff;color:#e26b70;}
könnt ihr die Hintergrundfarbe, sowie die Schriftfarbe ändern. Natürlich ist es auch möglich, die Texte mit Schatten zu versehen, Ihr könnt Rahmen um die Felder legen, etc. Es sind sehr viele Spielereien möglich, auf die ich jetzt nicht eingehen werde, da das den Rahmen sprengen würde.

Bei #navigation a{background:url('https://i.servimg.com/u/f40/12/10/26/30/navibu10.png') setzt ihr dann den Grafiklink zu eurer eigenen Grafik ein. Wie diese aussehen muss, erkläre ich weiter unten.

Nachdem ihr das eingesetzt habt, ist eure seitliche Navigation sichtbar und sollte so aussehen:

mit Hooverfunktion (Farbe muss natürlich angepasst werden!):



Eine wichtige Erklärung zu der Hintergrundgrafik!:
Da wir im Modul fünf Navigationslinks eingesetzt haben, brauchen wir auch eine dementsprechende Grafik, die auf fünf Links ausgelegt ist. Möchtet ihr mehr oder weniger Navilinks, dann muss die Grafik entsprechend erweitert werden.
Meine Beispielgrafik sieht so aus:


und hier nochmal eine, die einfarbig silbern gehalten ist:

Jeder Button ist zweimal vorhanden. Der obere ist in der normalen Ansicht zu sehen. Der untere beim Hoovern.
Selbstverständlich könnt ihr diese Grafik auch selber erstellen oder verschönern, bzw bearbeiten. Bitte achtet aber darauf, dass die Maße exakt die gleichen sind, sonst gibt es unschöne Effekte. Ratsam ist es auch, auf die Buttons noch einen Text oder eine kleine Grafik zu setzen, damit man auch auf Anhieb sieht, um welchen Menüpunkt es sich handelt.
Ich habe das in diesem Fall aber jetzt nicht gemacht, da ja jeder andere Menüpunkte einsetzen möchte und der Text ja dann nicht für jeden passt. Es geht aber auch ohne Beschriftung, denn beim Hovern sieht der User ja die Anzeige des Menüpunktes.

Ich würde euch raten, erstmal meine unveränderten Codes (Modul- und CSSCode) in ein Testforum einzusetzen und diese dann Schritt für Schritt auf eure Bedürfnisse umzuwandeln. Auch für geübte User ist das schon ein wenig anspruchsvoll und man muss sich wirklich konzentrieren.

So, jetzt wünsche ich euch viel Erfolg beim Einbau und viel Spaß mit eurer neuen Navigationsleiste