Seite 1 von 2
neu getrennte/geteile Hauptnavigation über CSS
Verfasst: So 17. Sep 2006, 17:44
von baumpaul
Es handelt sich hier um eine abgeänderte Version der Standard Hauptnavigation des Contenido Version 4.6.x. von Jan Lengowski, Andreas Lindner und 4fb.
Neuheiten
* Navigationsbäume lassen sich durch CSS teilen
* In der URL wird der Pfad und nicht die idcat ausgegeben
* Der Eingabebereich ich nun Englisch/Deutsch
* Neue Templates
Installation
* CMS Kenntnisse: niedrig
* CSS Kenntniss: mittel
Demo
*
Elefanten-Club Bayreuth
Download
*
IT:TOOL
Verfasst: Di 17. Okt 2006, 13:19
von Oldperl
Hallo Baumpaul,
hab mir deine Beispielseite mal angeschaut, in Firefox und Opera funktioniert dein Menü, nur beim IE 6 SP1 wird dein Menü nicht korrekt angezeigt.
Unter Badmintonverein setzt er das Menü fast ans Ende der Seite
Gruß aus Franken
Ortwin
Verfasst: Do 19. Okt 2006, 14:03
von baumpaul
Oldperl hat geschrieben:hab mir deine Beispielseite mal angeschaut, in Firefox und Opera funktioniert dein Menü, nur beim IE 6 SP1 wird dein Menü nicht korrekt angezeigt.
Unter Badmintonverein setzt er das Menü fast ans Ende der Seite
Ja stimmt und ist behoben, das lag aber nicht am Menü, sondern eher an einem Fehler in der CSS Datei.
Denn am Menü hat sicht nicht viel geändert, bis auf ein paar mehr Templates.
Verfasst: So 19. Nov 2006, 21:08
von CvH
Hallo,
ich würde ja zu gerne meine Navigation ebenfalls aufteilen bzw. erst ab der zweiten Ebene dynamisch erzeugen, allerdings ist mir nicht ganz klar, wie ich das machen muss...
Ich habe die neue Navigation jetzt bereits als Modul bei mir eingebunden, aber er zeigt immer die komplette Navigation an. Was muss ich tun, um das zu ändern?
Danke und Gruß
Catharina
Verfasst: Mo 20. Nov 2006, 08:17
von baumpaul
Die Navigation ist im Quelltext immer zusammen und wenn du sie über CSS nicht absolut positionierst, wird sich dabei auch nichts ändern.
Hier ein Code bei dem das anders ist. Binde Ihn einfach in deine style.css Datei ein. Der Code kommt von
www.ec-bayreuth.de.
Code: Alles auswählen
/* Hauptnavigation */
div.HauptNav {
position: absolute;
top: auto;
left: auto;
width: auto;
height: auto;
z-index: 500;
}
/* Alle Links */
div.HauptNav a {
display: block;
}
div.HauptNav a:hover {
}
div.HauptNav div {
}
/* Ebene 1 */
/* Hauptcontainer */
div.HauptNav div.NavFirstIn {
position: absolute;
top: -190px;
left: 130px;
width: 180px;
height: 180px;
background: #963;
line-height: 14px;
}
/* Alle Links */
div.HauptNav div.NavFirstOff,
div.HauptNav div.NavFirstOn,
div.HauptNav div.NavFirstOpen {
color: white;
}
div.HauptNav div.NavFirstOn,
div.HauptNav div.NavFirstOpen {
background: #930;
}
/* Alle Links */
div.HauptNav div.NavFirstOff a,
div.HauptNav div.NavFirstOn a,
div.HauptNav div.NavFirstOpen a {
font-weight: bold;
padding: 4px 10px 4px 20px;
color: white;
}
/* Alle Links beim ueberfahren */
div.HauptNav div.NavFirstOff a:hover,
div.HauptNav div.NavFirstOn a:hover,
div.HauptNav div.NavFirstOpen a:hover {
background: #930;
}
/* Link hier, Im Pfad */
div.HauptNav div.NavFirstOn a,
div.HauptNav div.NavFirstOpen a {
color: white;
}
/* Ebene 2 */
/* Hauptcontainer */
div.HauptNav div.NavSecondIn {
position: absolute;
top: 190px;
left: -130px;
width: 200px;
}
/* Alle Container */
div.HauptNav div.NavSecondOff,
div.HauptNav div.NavSecondOn,
div.HauptNav div.NavSecondOpen {
}
div.HauptNav div.NavSecondOn,
div.HauptNav div.NavSecondOpen {
background-color: #930;
}
/* Alle Links */
div.HauptNav div.NavSecondOff a,
div.HauptNav div.NavSecondOn a,
div.HauptNav div.NavSecondOpen a {
padding: 3px 10px 3px 20px;
border-top: 1px solid #963;
border-bottom: 1px solid #963;
color: white;
}
/* Alle Links beim ueberfahren*/
div.HauptNav div.NavSecondOff a:hover,
div.HauptNav div.NavSecondOn a:hover,
div.HauptNav div.NavSecondOpen a:hover {
border-top-color: white;
border-bottom-color: white;
background-color: #930;
}
/* Link hier, Im Pfad */
div.HauptNav div.NavSecondOn a,
div.HauptNav div.NavSecondOpen a {
border-top-color: white;
border-bottom-color: white;
background-color: #930;
}
/* Ebene 3 */
/* Hauptcontainer */
div.HauptNav div.NavThirdIn {
border: 0;
}
/* Alle Container */
div.HauptNav div.NavThirdOff,
div.HauptNav div.NavThirdOn,
div.HauptNav div.NavThirdOpen {
border: 0px;
background: white;
}
/* Alle Links */
div.HauptNav div.NavThirdOff a,
div.HauptNav div.NavThirdOn a,
div.HauptNav div.NavThirdOpen a {
font-size: 11px;
padding: 2px 10px 2px 30px;
background: url('../images/navi_pfeil_rechts.gif') 20px center no-repeat;
}
/* Alle Links beim ueberfahren*/
div.HauptNav div.NavThirdOff a:hover,
div.HauptNav div.NavThirdOn a:hover,
div.HauptNav div.NavThirdOpen a:hover {
}
/* Inaktiver Link */
div.HauptNav div.NavThirdOff a {
}
/* Link hier */
div.HauptNav div.NavThirdOn a {
font-weight: bold;
color: #963;
}
/* Im Pfad */
div.HauptNav div.NavThirdOpen a {
font-weight: bold;
color: #963;
}
/* << */
Verfasst: Mo 20. Nov 2006, 09:37
von CvH
Hallo baumpaul,
vielen Dank! Funktioniert dann aber nur, wenn man keine flexiblen Layouts mit float-Elementen gebaut hat, oder?
Trotzdem danke und herzliche Grüße
Catharina
Verfasst: Mo 20. Nov 2006, 09:43
von baumpaul
Also bei mir schon, schaut dir doch mal die Seite an, die besteht nur aus DIVS und floatings.
Wenn dur mir deine Seite zeigst, kann ich mir das evtl. mal anschauen.
Verfasst: Mo 20. Nov 2006, 10:10
von CvH
Hallo baumpaul,
meine neue Seite ist noch im Aufbau... ich habe die Top-Navigation fest eingebaut, weil ich es sonst mit den Spaltenbreiten nicht so gut steuern kann und die ändert sich auch nicht. Schöner wäre es natürlich, wenn auch das dynamisch wäre. Die aktuelle Entwicklungsinstanz findest Du unter
www.vonhobe.net.
Im Augenblick habe ich die zweite Navigationsebene in der rechten Spalte (z.B. zu sehen bei "Leistungen") und habe die erste Ebene einfach mit display: none ausgeblendet.
Bei diesem Layout wäre eine absolute Positionierung aber auch nicht so problematisch, weil alles feste Größen hat. Bei einigen Kunden habe ich aber Layouts, die einen hinsichtlich der Breite flexiblen mittleren Teil haben. Dann wird eine absolute Positionierung mit Pixel-Angaben von der rechten Seite ausgehend unmöglich... oder denke ich da völlig falsch?
Danke und Gruß
Catharina
Danke und herzliche Grüße
Catharina
Verfasst: Mo 20. Nov 2006, 13:11
von baumpaul
Versuche einmal die Hauptnavigation in der rechten Spalte einzubauen und die Hilfnavigation als Hauptnavigation 1 zu ändern, diese müsste dann absolute positioniert werden. Der Vorteil währe, dass du dann auch aktive Navigationspunkte hättest.
Womit du allerdings recht hast, ist dass die 2. Ebene dann auch absolut positioniert währe und alles was unter der 2. Ebene währe von der Navigation verdeckt währe.
Das kannst du dur mit
zusätzlichen Stylesheets lösen. Wie das mit deinem Aufwand zu vereinbaren ist, musst du selbst entscheiden.
Verfasst: Mo 20. Nov 2006, 15:55
von CvH
Danke sehr. Das sind gute Hinweise. Aufwand ist in diesem Fall relativ... ist mein Übungsprojekt mit Contenido, bevor ich mich an Kundenseiten heranwage
Herzlichen Gruß und Danke
Catharina
Horizontale splitted Navigation möglich?
Verfasst: So 26. Nov 2006, 23:02
von phils
Liebes Forum,
ist es möglich mit o.g. Naviationsmodul eine horizontal-geteilte Navigation zu erstellen?
Beispiel: gestaltungsservice.de
Für Eure Tipps und Hilfe bin ich dankbar!
Gruß,
Philipp
Re: Horizontale splitted Navigation möglich?
Verfasst: Mo 27. Nov 2006, 13:51
von baumpaul
phils hat geschrieben:ist es möglich mit o.g. Naviationsmodul eine horizontal-geteilte Navigation zu erstellen?
Beispiel: gestaltungsservice.de
Ja ist es, versuche es mit
oder mit floats, siehe hier:
http://xhtmlforum.de/43010-div-horizont ... oaten.html
Re: Horizontale splitted Navigation möglich?
Verfasst: Mo 27. Nov 2006, 15:29
von phils
Ich habe es probiert, kann allerdings auf Grund der div-Verschachtelung keine klare Trennung in Hauptnavigation + Unterpunkte hinbekommen.
Hat jemand dazu noch einen Tip?
Verfasst: Mo 27. Nov 2006, 19:44
von silicone
Verfasst: Di 28. Nov 2006, 00:17
von phils
Danke für den Tipp,
kannst Du kurz skizziern, wie ich die module einbinde?
Gruß,
PHILIPP