Menu mit 2 Ebenen nur noch ein bisschen

[Zerod]

Hallo,

ich habe in HTML folgendes Konstrukt.

 <div id="navi" >
<!-- ###MENU### start -->
			<ul id="navilist">
			  <li><a href="#">Home</a><div id="navidott"></div></li>
			  <li><a href="#">Leistungen</a></li>
			  <li><a href="Team.html">Teamplay</a>
				<ul class="supnavilist">
				  <li><a href="#">Team1</a></li>
				  <li><a href="#">team2</a></li>
				</ul>
			  </li>
			  <li><a href="#">Kontakt</a></li>
			  <li><a href="#">Impressum</a></li>
			</ul>
<!-- ###MENU### stop -->
		</div>

jetzt möchte ich das mit Typoscript nachbauen... so weit bin ich:


page.10.subparts.MENU = HMENU
page.10.subparts.MENU {

wrap = <ul id="navilist"> | </ul>
1 = TMENU
1.NO.linkWrap = <li> | </li>


1.ACT < 1.NO
1.ACT=1
1.ACT.linkWrap = <li > | <div id="navidott"></div></li>



2 = TMENU
2.wrap = <ul id="supnavilist"> | </ul>
2.NO.linkWrap = <li> | </li>


2.ACT < 1.NO
2.ACT=1
2.ACT.linkWrap = <li > | <div id="navidott"></div></li>


}


Das klappt jetzt FAST.... und sieht dann so aus:

<div id="navi" >
			<ul id="navilist">
				<li> <a href="index.php?id=2" onfocus="blurLink(this);"  >Home</a> </li>
				<li> <a href="index.php?id=3" onfocus="blurLink(this);"  >Leistungen</a> </li>
				<li > <a href="index.php?id=4" onfocus="blurLink(this);"  >Teamplay</a> <div id="navidott"></div></li>
				<ul id="supnavilist">
					<li> <a href="index.php?id=8" onfocus="blurLink(this);"  >Team1</a> </li>
					<li > <a href="index.php?id=7" onfocus="blurLink(this);"  >Team2</a> <div id="navidott"></div></li>
				</ul>
				<li> <a href="index.php?id=5" onfocus="blurLink(this);"  >Kontakt</a> </li>
				<li> <a href="index.php?id=6" onfocus="blurLink(this);"  >Impressum</a> </li>
			</ul>
		</div>

Sind nur noch 2 Fehler.
1. der "navidott" ist bei aktiviertem 2. Ebene einmal auf der ersten und einmal auf der 2. ebene. Also in beiden <ul>
2. Die 2. Ebene muss IN dem <li> auf der ersten Ebene. Jetzt sind die so:

<ul>
<li></li>
  <ul>
  <li></li>
  </ul>
</ul>

die müssen aber so:

<ul>
<li>
  <ul>
  <li></li>
  </ul>
</li>
</ul>

Ich hoffe ihr habt eine Idee.

Gruß, Zerod

[EXites]

Hi Zerod,

also meine Menü-Konfiguration sieht so aus:
# Haupt-Konfiguration vom Menü
menu = HMENU
menu {
1 = TMENU
1 {
wrap = <ul class="menu">|</ul>

expAll = 1

# Etnferne onfocus="blurLink(this);"
noBlur = 1

# Normaler Menüpunkt
NO = 1
NO {
# Title der Links setzen
# Nimm dafür entweder den Untertitel oder, wenn keiner gesetzt, den Title der Seite
ATagParams = title="zur Seite: {field:subtitle//field:title}"
allStdWrap.insertData = 1

# Splitte die einzelnen li-Elemente und setze beim ersten eine andere Klasse, als den mittleren und dem letzten
# zusätzlich erhält jeder Menü-Punkt eine eindeutige Klasse zugewiesen
wrapItemAndSub.insertData = 1
wrapItemAndSub = <li class="first m{field:uid}">|</li> |*| <li class="m{field:uid}">|</li> |*| <li class="last m{field:uid}">|</li>

stdWrap.htmlSpecialChars = 1
}

# Normaler Status auf aktivierte Menüpunkte übertragen
ACT < .NO
ACT {
# aber mit einer anderen Klasse versehen
ATagParams = class="active" title="zur Seite: {field:subtitle//field:title}"
}

# Normalen Status auf den Menüpunkt, dessen Seite geöffnet ist, übertragen
CUR < .NO
CUR {
# aber mit einer anderen Klasse versehen
ATagParams = class="selected" title="Sie befinden sich bereits auf der Seite: {field:subtitle//field:title}"
}
}
}


# Menü zuweisen
menu.main = COA
menu.main {
10 < menu
10 {
# Das Menü startet auf der obersten Ebene
entryLevel = 0
1.wrap = |

# und die Einstellungen werden an die Unterebenen übertragen
2 < menu.1
3 < menu.1
4 < menu.1


wrap = <div id="mainMenu"><ul>|</ul></div>
}
}
Damit erhälst du ein komplett individuell anpassbares Menü bis zu vier Ebenen.

Bei dir müsste es dann über deinen Subpart zugewiesen werden:
# Menü zuweisen
page.10.subparts.MENU = COA
page.10.subparts.MENU {
10 < menu
10 {
# Das Menü startet auf der obersten Ebene
entryLevel = 0
1.wrap = |

# und die Einstellungen werden an die Unterebenen übertragen
2 < menu.1
3 < menu.1
4 < menu.1


wrap = <div id="mainMenu"><ul>|</ul></div>
}
}
Denke, das es so klappen sollte ;)

Und dein "Navidott" kannst du über CSS setzen. Da brauchste eigentlich nicht unbedingt eine eigene DIV-Box.

Grüßle, X

[Zerod]

VIELEN DANK.... Das hat mir wirklich sehr geholfen... Danke^^ da sieht man mal was der unterschied zwischen Profis und Amateuren ist.

Ist es auch möglich, das die Zweite Ebene erst dann sichtbar ist, wenn man den Oberpunkt angeklickt hat?

[EXites]

Das kannst du natürlich auch machen. Einfach mittels CSS die Unterebenen erstmal für alle Menüpunkte im Normal-Zustand ausblenden:

ul.menu ul {
display: none;
}

Und dann für aktive Oberpunkte das Untermenü wieder einblenden:

ul.menu li.active ul {
display:block;
}

bzw.:

ul.menu li.selected ul {
display:block;
}

Wie schon gesagt, mit dieser Menü-Konfiguration bist du komplett flexibel ;)
Wenn es nicht passt, dann schick mal deine URL zur Webseite und ich schau es mir an.

Grüßle, X

[Zerod]

THX... ich hab nicht dran gedacht, dass ich das mit CSS regeln könnte. Ich probiere es gleich mal aus. Aber noch mal vielen Dank.