Zum Inhalt springen

Wie genau das Menü einbinden?

Erstellt am 28. Januar 2011 · 3 Antworten · letzte Antwort am 29. Januar 2011

Tags: Frage

Nathdrack ·

Hallo Leute,

ich habe mich vor ein paar monaten mal an Typo3 gewagt, weil ich gehört habe das es eins der innovativsten CMS ist.
Anfangs ein paar startschwierigkeiten die ich mit learning by doing wegbekommen habe...nach einer etwas längeren pause lese ich mich jetzt wieder rein... ihr kennts ja... programmieren ist wie gegen den strom schwimmen... hört man auf treibt man zurück.

naja, zu meinem Problem, ich bin gerade dabei meine Homepage mit Typo3 zu gestalten, habe alles fertig was Typoscript, seitenkonfiguration und installtool etc. angeht... ich habe mich ans Menüschreiben gemacht und einen teil von den tuts genommen und wollte den code einmal hier reinstellen um zu fragen ob der richtig ist.

wenn dieser richtig sein sollte, wo speicher ich diesen ab? weil in meinem Haupttemplate rufe ich ihn mit

110 < temp.menu.left.ts

auf.

Menücode,

temp.menu_left = HMENU
temp.menu_left {
	1 = TMENU
	1 {
		#expAll =1
		wrap = <ul id="avmenu">|</ul>
		noBlur = 1
		NO = 1
		NO {
			wrapItemAndSub = <li>|</li>
			stdWrap.htmlSpecialChars = 1
			ATagTitle.field = title
		}
		ACT <.NO
		ACT {
			wrapItemAndSub = <li id="nav1act">|</li>
		}
	}
 
	2 < .1
	2 {
		wrap = <ul id="nav2">|</ul>
		ACT.wrapItemAndSub = <li id="nav2act">|</li>
	}
}

muss ich die "class" nach meiner CSS benennen nehme ich an? zb. für nav1act -> "avmenu li a"

und wo speicher ich diesen code ab, damit ich ihn in meinem Haupttemplate mit dem befehl < temp.menu.left.ts aufrufen kann?

.avmenu {
clear: left;
float: left;
width: 150px;
margin: 0 0 -3px 0;
padding: 0;
font-size: 0.9em;
}

.avmenu ul {	
list-style: none;
width: 150px;
margin: 0 0 20px 0;
padding: 0;
font-size: 1.1em;
}	

.avmenu li {
margin-bottom: 4px;
}

.avmenu li a {
background:none repeat scroll 0 0 #7f511f;
border-left:7px solid #7c0707;
color:#FFFFF1;
display:block;
font-weight:bold;
height:20px;
padding:6px 0 0 10px;
text-decoration:none
}
	
	
.avmenu li a:hover {
background: #000000;
color: #fffff1;
border-left: 7px #47381e solid;
}

vielen dank im vorraus.

simpannar ·

Hallo,

was mir spontant auffällt, ist, dass das Menü im Hauptskript nicht korrekt aufgerufen wird. Statt:

110 < temp.menu.left.ts

sollte es heißen:

110 < temp.menu_left

Zum Thema: wo was speichern:
Beim Einstieg in Typo3 ist es vielleicht noch am einfachsten, einfach erst mal alles in ein TypoScript-Template hinein zu tun. Ansonsten gibt es verschiedene Möglichkeiten, die TS-Konfigurationen aufzuteilen (z.B. als Basis-Template im Backend dazuladen oder mittels TS

<INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/deintemplate.txt">

als externe Datei.

Zur CSS-Problematik:
Die im TypoScript vergebenen CSS-Klassen sollten natürlich mit denen im CSS-File übereinstimmen. Generell würde ich bei den Listenpunkten keine IDs, sondern class vergeben (in HTML sollten nicht mehrere Elemente mit der gleichen ID vorkommen, dafür sind die classes da...).

Das CSS-File einfach im HTML-Head des Tempaltes laden.

Nathdrack ·

Wie würde denn mein Typoscript dann aussehen wenn ich das menü direkt darin schreibe?

ich hab das damals glaube ich in ein 2. template auf dem root level gespeichert, oder das in einer textdatei ausgelagert auf dem Fileadmin und dann als resource in das rootlevel geholt... ich blick da grade nicht so ganz durch ...

100 = TEXT
100.value = <div id="avmenu">
          
    110 < temp.menu_left
        
#Schliessen von <avmenu> pos. 100
120 = TEXT
120.value = </div>
Nathdrack ·

Also so sieht das jetzt ca. bei mir aus... nur wie und wohin speichern das ganze ? bitte detailiert... :/

temp.menu_left = HMENU
temp.menu_left {
	1 = TMENU
	1 {
		#expAll =1
		wrap = <ul class="avmenu">|</ul>
		noBlur = 1
		NO = 1
		NO {
			wrapItemAndSub = <li>|</li>
			stdWrap.htmlSpecialChars = 1
			ATagTitle.field = title
		}
		ACT <.NO
		ACT {
			wrapItemAndSub = <li class="avmenu li a">|</li>
		}
	}
 
	2 < .1
	2 {
		wrap = <ul class="avmenu">|</ul>
		ACT.wrapItemAndSub = <li class="av menu li a">|</li>
	}
}