Teammitglieder online
Regeln und nützliche Hinweise
Neueste Themen
» Technische Wartung in der Zentrale: Montag 1 Juli, und Montag 8 Julivon Joost Mo 24 Jun 2024 - 17:20
» [phpBB2] Mystic - new beginning RPG
von Raine Kamiya Fr 21 Jun 2024 - 20:52
» Neue Mitarbeiter gesucht
von Joost Fr 21 Jun 2024 - 20:26
» Lange Ladezeiten
von Skouliki Mi 19 Jun 2024 - 19:35
» Gründer E-Mailadresse ändern
von Skouliki Fr 7 Jun 2024 - 12:49
» Nach Wartung Datenbankfehler
von Joost Mo 3 Jun 2024 - 12:34
» Wartung geplant Montag, 3. Juni 2024
von Joost So 2 Jun 2024 - 8:04
» Anti-Spam-Prüfung bei Mitgliedern
von Skouliki So 12 Mai 2024 - 18:10
» Die Heidekriger (WaCa) mit Punktesystem
von Rama So 21 Apr 2024 - 20:44
» Forum löschen, Probleme mit Gründeraccount
von Skouliki Di 9 Apr 2024 - 14:03
» [AwsomeBB] LogIn Farbe Weiß auf weiß
von Skouliki Sa 30 März 2024 - 21:14
» kann man noch Blogs hier erstellen?
von Joost Mi 27 März 2024 - 18:40
» Einstellen der Profilfelder funktioniert nicht
von Skouliki Di 26 März 2024 - 12:54
» Gründer-E-Mail-Adresse ändern
von Skouliki Mo 25 März 2024 - 13:48
» PN's werden nicht mehr rot eingefärbt
von Skouliki Fr 22 März 2024 - 7:44
» Missbrauchsmeldung "Sexueller Inhalt" war (wieder) Werbung/Spam/Scam
von Skouliki Do 21 März 2024 - 9:03
» [phpBB3] Suchfunktion ohne Funktion
von Skouliki Mi 20 März 2024 - 8:41
» Neuer User kann sich anmelden.
von Skouliki Mi 20 März 2024 - 8:38
Beiträge mit den meisten Reaktionen des Monats
» Beitrag von Skouliki in Lange Ladezeiten ( 2 )
» Beitrag von Joost in Nach Wartung Datenbankfehler
( 1 )
» Beitrag von Raine Kamiya in [phpBB2] Mystic - new beginning RPG
( 1 )
» Beitrag von ACRenaissance in Gründer E-Mailadresse ändern
( 1 )
» Beitrag von Joost in Technische Wartung in der Zentrale: Montag 1 Juli, und Montag 8 Juli
( 1 )
[Tuto] seitliches Navigation Modul mit Hovereffekt
Seite 1 von 1 • Teilen
[Tuto] seitliches Navigation Modul mit Hovereffekt
Hallo ![Smile](https://2img.net/i/fa/i/smiles/icon_smile.gif)
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:
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.
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:
![Navigation t42670 -das -team -des -forums - [Tuto] seitliches Navigation Modul mit Hovereffekt Aufzei10](https://i.servimg.com/u/f45/15/25/56/07/aufzei10.jpg)
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:
für bb2 Foren:
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:
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:
![Navigation t42670 -das -team -des -forums - [Tuto] seitliches Navigation Modul mit Hovereffekt Navi10](https://i.servimg.com/u/f45/15/25/56/07/navi10.jpg)
![Navigation t42670 -das -team -des -forums - [Tuto] seitliches Navigation Modul mit Hovereffekt Navine10](https://i.servimg.com/u/f45/15/25/56/07/navine10.jpg)
![Navigation t42670 -das -team -des -forums - [Tuto] seitliches Navigation Modul mit Hovereffekt Aufzei12](https://i.servimg.com/u/f45/15/25/56/07/aufzei12.jpg)
mit Hooverfunktion (Farbe muss natürlich angepasst werden!):
![Navigation t42670 -das -team -des -forums - [Tuto] seitliches Navigation Modul mit Hovereffekt Aufzei11](https://i.servimg.com/u/f45/15/25/56/07/aufzei11.jpg)
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:
![Navigation t42670 -das -team -des -forums - [Tuto] seitliches Navigation Modul mit Hovereffekt Navibu10](https://i.servimg.com/u/f40/12/10/26/30/navibu10.png)
und hier nochmal eine, die einfarbig silbern gehalten ist:
![Navigation t42670 -das -team -des -forums - [Tuto] seitliches Navigation Modul mit Hovereffekt Silber10](https://i.servimg.com/u/f45/15/25/56/07/silber10.png)
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](https://2img.net/i/fa/i/smiles/icon_smile.gif)
![Smile](https://2img.net/i/fa/i/smiles/icon_smile.gif)
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>
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.
die a class profil braucht ihr, um die Anzeige später über das CSS zu definieren.<li><a class="profil" href="/profile.forum?mode=editprofile"><span>Profil</span></a></li>
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:
![Navigation t42670 -das -team -des -forums - [Tuto] seitliches Navigation Modul mit Hovereffekt Aufzei10](https://i.servimg.com/u/f45/15/25/56/07/aufzei10.jpg)
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:
Die grün markierte Pixelanzahl ist von euch noch auf eure Bedürfnisse einzustellen.#content-container div#left {
margin-left: -130px;
}
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](https://2img.net/i/fa/i/smiles/icon_arrow.gif)
die Schriftgröße
![Arrow](https://2img.net/i/fa/i/smiles/icon_arrow.gif)
und das Schriftgewicht (fett, normal)
![Arrow](https://2img.net/i/fa/i/smiles/icon_arrow.gif)
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:
![Navigation t42670 -das -team -des -forums - [Tuto] seitliches Navigation Modul mit Hovereffekt Navi10](https://i.servimg.com/u/f45/15/25/56/07/navi10.jpg)
![Navigation t42670 -das -team -des -forums - [Tuto] seitliches Navigation Modul mit Hovereffekt Navine10](https://i.servimg.com/u/f45/15/25/56/07/navine10.jpg)
![Navigation t42670 -das -team -des -forums - [Tuto] seitliches Navigation Modul mit Hovereffekt Aufzei12](https://i.servimg.com/u/f45/15/25/56/07/aufzei12.jpg)
mit Hooverfunktion (Farbe muss natürlich angepasst werden!):
![Navigation t42670 -das -team -des -forums - [Tuto] seitliches Navigation Modul mit Hovereffekt Aufzei11](https://i.servimg.com/u/f45/15/25/56/07/aufzei11.jpg)
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:
![Navigation t42670 -das -team -des -forums - [Tuto] seitliches Navigation Modul mit Hovereffekt Navibu10](https://i.servimg.com/u/f40/12/10/26/30/navibu10.png)
und hier nochmal eine, die einfarbig silbern gehalten ist:
![Navigation t42670 -das -team -des -forums - [Tuto] seitliches Navigation Modul mit Hovereffekt Silber10](https://i.servimg.com/u/f45/15/25/56/07/silber10.png)
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](https://2img.net/i/fa/i/smiles/icon_smile.gif)
Zuckerpuppe- Admin a.D.
-
Beiträge : 19539
Anmeldedatum : 24.04.08
![-](https://2img.net/i/empty.gif)
» [phpBB2] CSS-Code: Navigation Hovereffekt
» [Tuto] [phpBB2] Modul/Tabelle unter Foren und Kategorien 2
» Navigation Modul Code!
» [phpBB2] Navigation - Index Modul
» [phpBB2] seitliches Navigationsmodul wo erstellen?
» [Tuto] [phpBB2] Modul/Tabelle unter Foren und Kategorien 2
» Navigation Modul Code!
» [phpBB2] Navigation - Index Modul
» [phpBB2] seitliches Navigationsmodul wo erstellen?
Seite 1 von 1
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten