Zum Inhalt springen

mit CSS das Menü gestalten

Erstellt am 4. Oktober 2007 · 2 Antworten · letzte Antwort am 4. Oktober 2007

Tags: Frage

zarah ·

Hallo
Ich möchte gerne das Menü über CSS gestalten.

Und zwar möchte ich gerne, das die Seite sobald sie im Menü angeklickt ist, sich von den anderen Seiten unterscheidet.

Für normale HTM Seiten habe ich das in der CSS Datei folgendermaßen gelöst.

Wie kann ich denn von CSS aus die ID Nummern der Typo3 Seiten ansprechen?

#navibereich {list-style:none;
		padding-top: 200px;
		line-height:1.8em;
		}			
#navibereich ul {list-style:none;}

	
#startseite #navi01 a, 
#projektseite #navi02 a,
#leistungseite #navi03 a,
#referenzseite #navi04 a,
#impressumseite #navi05 a {
		list-style:none;
 		color: #000066;
					}

Viele Grüße
Zarah

elquejido ·

hi! dazu brauchst du keine seiten-ids (die du übrigens mit mouseover im BE einlesen kannst) sondern nur den folgenden TS-Code

1.CUR = 1
1.CUR {
doNotLinkIt = 1
wrapItemAndSub = <p class="active">|</p>
}

(CUR steht für "current" - typo erkennt automatische welche seite grade geladen ist und weist ihr die entsprechenden eigenschaften zu)

in diesem beispielsfall in verbindung mit einer CSS-klasse im stylesheet (/fileadmin/templates)

.active {
list-style-type:none;
color: #000066;
}

lg, elke
PS: bin selber anfängerin, also bitte - ohne gewähr 😉

zarah ·

Hallo Elke
vielen dank für den Tipp. Ich bin nur etwas unsicher, wo ich den Typoscript teil einbauen soll.
Füge ich ihn dazwischen, schiebt sich im Menü die aktive Seite neben einen anderen Menüpunkt.

Mhm - weißt du Rat?
Unten habe ich nocheinmal meinen Code eingefügt - vielleicht siehst du ja, an welcher Stelle ich etwas austauschen muß

Viele Grüße
Zarah

10.marks.MENU = HMENU
  10.marks.MENU {
	1 = TMENU
	1 {
 displayActiveOnLoad = 1 

                               expAll = 1
		wrap = <ul id="nav">|</ul>
		noBlur = 1
		NO = 1
		NO.wrapItemAndSub = <li>|</li>

		IFSUB = 1
		IFSUB.wrapItemAndSub = <li class="active">|</li>
		ACTIFSUB < .IFSUB

               
                                                             


	}
	2 < .1	
	2.wrap = <ul>|</ul>

	
}