neu getrennte/geteile Hauptnavigation über CSS

baumpaul · Beitrag von **baumpaul** » So 17. Sep 2006, 17:44

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.

Bild

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

Beitrag von **Oldperl** » Di 17. Okt 2006, 13:19

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

baumpaul · Beitrag von **baumpaul** » Do 19. Okt 2006, 14:03

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.

CvH · Beitrag von **CvH** » So 19. Nov 2006, 21:08

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

baumpaul · Beitrag von **baumpaul** » Mo 20. Nov 2006, 08:17

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;
		}
/* << */

CvH · Beitrag von **CvH** » Mo 20. Nov 2006, 09:37

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

baumpaul · Beitrag von **baumpaul** » Mo 20. Nov 2006, 09:43

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.

CvH · Beitrag von **CvH** » Mo 20. Nov 2006, 10:10

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

baumpaul · Beitrag von **baumpaul** » Mo 20. Nov 2006, 13:11

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.

CvH · Beitrag von **CvH** » Mo 20. Nov 2006, 15:55

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

phils · Beitrag von **phils** » So 26. Nov 2006, 23:02

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

baumpaul · Beitrag von **baumpaul** » Mo 27. Nov 2006, 13:51

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

Code: Alles auswählen

width: auto;
display: inline;

oder mit floats, siehe hier: http://xhtmlforum.de/43010-div-horizont ... oaten.html

phils · Beitrag von **phils** » Mo 27. Nov 2006, 15:29

baumpaul hat geschrieben: Ja ist es, versuche es mit
Code: Alles auswählen
width: auto;
display: inline;
oder mit floats, siehe hier: http://xhtmlforum.de/43010-div-horizont ... oaten.html

Ich habe es probiert, kann allerdings auf Grund der div-Verschachtelung keine klare Trennung in Hauptnavigation + Unterpunkte hinbekommen.

Hat jemand dazu noch einen Tip?

silicone · Beitrag von **silicone** » Mo 27. Nov 2006, 19:44

Das hier testen: http://www.rot65.de/material/3geteilte_hauptnavi.zip
Ist eine Modifikation hier von: http://www.contenido.org/forum/viewtopi ... hlight=osi

Gruß,
Thomas

phils · Beitrag von **phils** » Di 28. Nov 2006, 00:17

silicone hat geschrieben:Das hier testen: http://www.rot65.de/material/3geteilte_hauptnavi.zip
Ist eine Modifikation hier von: http://www.contenido.org/forum/viewtopi ... hlight=osi

Gruß,
Thomas

Danke für den Tipp,

kannst Du kurz skizziern, wie ich die module einbinde?

Gruß,

PHILIPP

CONTENIDO Forum

neu getrennte/geteile Hauptnavigation über CSS

neu getrennte/geteile Hauptnavigation über CSS

Horizontale splitted Navigation möglich?

Re: Horizontale splitted Navigation möglich?

Re: Horizontale splitted Navigation möglich?