Huhu, nach langem suchen und probieren bin ich nun verzweifelt und melde mich bei Euch..
ich habe ein problem mit meinem menü was ich in TS geschrieben habe..
Ich möchte das Ich die Seiten anzeigen lasse, und die Untermenüs versteckt halte bis ich auf den jeweiligen Link klicke.
Zz sieht das bei mir so aus...
Bild: s5.directupload.net/…/2jwag6tm.jpg
Die startseite stand alleine mit der klasse drinnen und deswegen sieht das so komisch aus... jedenfalls klappt das nicht das die ausklappen...
die Menüs sollen ausklappen wenn ich drauf klicken...
MENÜ
temp.menu_left = HMENU
temp.menu_left {
includeCSS {
file1 = fileadmin/css/pom.css
}
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
}
2 < .1
CSS
.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;
list-style: none outside
}
.avmenu li {
margin-bottom: 0px;
}
.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;
}
Der Fehler könnte darin liegen, dass das eingeschachtelte <ul> der zweiten Ebene auch die Klasse .avmenu hat und deshalb floatet. Du solltest so schreiben:
2 < .1
2.wrap = <ul>|</ul>
Gruß
Peter, TYPO3 @ lisardo (Augsburg)
Das Menü klappt trotzdem nicht aus wenn ich auf die Menüpunkte klicke...
Ach, du willst ein Flyout-Menü, nur auf Klick anstatt auf mouseover? Also ein Menü, das auf der gleichen Seite ausklappt, wenn man auf einen Eintrag mit Unterseiten klickt?
Das funktioniert komplett anders. Da TYPO3 Links erstellt, die auf Klick auf andere Seiten springen, ist da erst mal nichts mit Aufklappen auf der gleichen Seite bei Klick. Das rein über CSS zu regeln, geht nur mit klassischen Flyout-Menüs via hover.
Somit brauchst du für das Ausklappen auf KLick zwingend JavaScript und zweitens musst du dir die klickbaren Menüpunkte, die für das Ausklappen sorgen, selbst bauen - TYPO3 übernimmt das nicht automatisch.
Mein Tipp: suche dir im Internet ähnliche Skripte, bau das ganze als reines HTML + JavaScript auf und erst wenn das funktioniert, baue es in TYPO3 ein.
Gruß
Peter, TYPO3 @ lisardo (Augsburg)
nein nein nein ^^...
also ich habe zb. unter dem Menüpunkt "Der Verein" 4 Unterseiten, Vorstand, mitglieder, historie und vereinsprojekte.
wenn ich jetzt auf Vereine Klicke, dann soll der Menüpunkt "Der Verein" aufklappen und die unterpunkte sichtbar machen.
ca. so
Normalzustand des Menüs.
- Startseite
- Der Verein
- Bildergalerie
- Die Kelten
- Schaukampf
- Mittelaltermärkte
- Links
- Kontakt
Wenn klick auf Menüpunkt Vereine,
- Startseite
- Der Verein
- - Vorstand
- - Mitglieder
- - Hostorie
- - Projekte
- Bildergalerie
- Schaukampf
- etc.
mit Klick auf "Der Verein" soll die Homepage dann auf diese Seite springen und gleichzeitig die 4 unterpunkte anzeigen lassen.
ich hoffe das war etwas verständlicher :-)
gruß
Soooo...
Ich habe jetzt meine CSS datei erweitert für die 2. ebene und eine vorraussichtlich 3. Ebene im Menü. Aber zuerst soll es mal klappen das ich das Menü fachgerecht ausführen kann und alles so angezeigt wird wie ich es mir vorstelle...
.avmenu {
clear: left;
float: left;
width: 150px;
margin: 0 0 -3px 0;
padding: 0;
font-size: 0.9em;
list-style: none outside;
}
.avmenu ul {
list-style: none;
width: 150px;
margin: 0 0 20px 0;
padding: 0;
font-size: 1.1em;
}
.avmenu li {
margin-bottom: 0px;
}
.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;
}
ul.layer2 {
list-style: none;
width: 150px;
margin: 0 0 0 0;
font-size: 0.8em;
color: #FFFFF1;
padding: 0;
}
ul.layer2 li {
margin: 0 0 0 0;
}
ul.layer2 li a {
font-weight: bold;
height: 20px;
text-decoration: none;
color: #fffff1;
display: block;
padding: 6px 0 0 10px;
background: none repeat scroll 0 0 #5e3508;
border-left: 20px solid #7c0707;
}
.layer2 li a:hover {
background: #000000;
color: #fffff1;
border-left: 20px #47381e solid;
}
ul.layer3 {
list-style: none;
width: 150px;
margin: 0 0 0 0;
font-size: 1em;
color: #FFFFF1;
padding: 0;
}
ul.layer3 li {
margin: 0 0 0 0;
}
ul.layer3 li a {
font-weight: bold;
height: 20px;
text-decoration: none;
color: #fffff1;
display: block;
padding: 6px 0 0 10px;
background: none repeat scroll 0 0 #5e3508;
border-left: 40px solid #7c0707;
}
.layer3 li a:hover {
background: #000000;
color: #fffff1;
border-left: 40px #47381e solid;
Das ist mein jetziger Typoscript zu der CSS
temp.menu_left = HMENU
temp.menu_left {
includeCSS {
file1 = fileadmin/css/pom.css
}
1 = TMENU
1 {
#expAll =1
wrap = <ul class="avmenu ul">|</ul>
noBlur = 1
NO = 1
NO {
wrapItemAndSub = <li>|</li>
stdWrap.htmlSpecialChars = 1
ATagTitle.field = title
}
ACT <.NO
ACT {
wrapItemAndSub = <li class="layer2"> | </li>
}
}
2 < .1
2.wrap = <ul>|</ul>
}
Das Menü sieht damit SO aus..
Bild: s1.directupload.net/…/hxzr2yft.jpg
Das Menü soll diesen Roten Balken haben. wenn man auf zb. "Der Verein" klickt soll das Untermenü ausklappen und der rote balken soll größer werden von 7px auf 20px...
Die schriftgröße sollte eigentlich etwas kleiner sein als das was auf dem bild da ist.
Der Abstand zwischen Vereinsgeschichte und Bildergalerie soll und darf nicht vorhanden sein...ist aber trotzdem da, keine ahnung an was liegt, finde dazu nichts.
Aufbau des Menüs an sich :
Normalzustand des Menüs.
- Startseite
- Der Verein
- Bildergalerie
- Die Kelten
- Schaukampf
- Mittelaltermärkte
- Links
- Kontakt
Wenn klick auf Menüpunkt Vereine,
- Startseite
- Der Verein
- - Vorstand
- - Mitglieder
- - Hostorie
- - Projekte
- Bildergalerie
- Schaukampf
- etc.
Das Menü kratzt mich schon einige tage und ich komme einfach nicht auf den richtigen pfad... das alles klappt ...wäre cool wenn ihr mir helfen könntet.
Gruß