Lexi Help
Die neuesten Themen
» Mein altes Forum zurückbekommen
von Bigtuber Heute um 19:18

» [Update] Neues Theme der mobilen Version V2
von Tierfreund-97 Heute um 17:05

» Begriff : "merken"
von Ray Heute um 12:14

» [PunBB] Umzug eines funktionierenden Forums von PunBB auf phpBB?
von inde Heute um 11:07

» Servamp Forum
von Raine Kamiya Gestern um 22:47

» [phpBB2] Probleme mit der "Postprofil" Anzeige
von Dr.Keks Gestern um 20:56

» Private Nachrichten
von inde Gestern um 10:05

» Wie kann man erkennen, welche Forenversion ein anderes Forum hat?
von inde So 25 Sep 2016 - 22:24

» Ad Ware im Forum?
von inde So 25 Sep 2016 - 20:38

» [Sammelthread] Unangebrachte Werbung
von inde Fr 23 Sep 2016 - 9:00

» [phpBB2] Gruppen in der Wer is Online Anzeige "trennen"
von TheRollyJoger Mi 21 Sep 2016 - 10:49

» Yaruma - Fantasy-RPG Forum
von Alketa Di 20 Sep 2016 - 21:34

» [phpBB3] Links automatisch kursiv
von inde Di 20 Sep 2016 - 17:37

» [Invision] Kompletter Css-Codebaum gesucht !
von inde Di 20 Sep 2016 - 13:12

» Filmforum "Dark Movie Dreams"
von Ray Di 20 Sep 2016 - 11:56

» Forumseite mit Mailware verseucht ?
von inde Mo 19 Sep 2016 - 20:31

Partner
free forum

[Tuto] seitliches Navigation Modul mit Hovereffekt

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

[Tuto] seitliches Navigation Modul mit Hovereffekt

Beitrag von Zuckerpuppe am Di 14 Feb 2012 - 10:51

Hallo Smile

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('http://i40.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('http://i40.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 Arrow font-family: Comic Sans Ms, Arial, sans-serif,
die Schriftgröße Arrow font-size:18px
und das Schriftgewicht (fett, normal) Arrow 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('http://i40.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 Smile

Zuckerpuppe
Admin a.D.
Admin a.D.

Weiblich Beiträge : 19541
Anmeldedatum : 24.04.08

Nutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Forenbefugnisse:
Sie können in diesem Forum nicht antworten