Hallo zusammen...
Ich versuche grade eine Navigation mit TYPO3 nachzubilden die ich im Web gefunden hab. Das Original findet ihr zum besseren Verständnis unter www.hansgrohe.de.
Grundsätzlich habe ich das Menü auch soweit hinbekommen. Der Knackpunkt allerdings ist, dass die Grafiken die im Menü rechts stehen noch angezeigt werden müssen. Die einzelnen Bilder habe ich im Media-Feld einer jeder Seite hinterlegt.
Das ist das TS mit dem ich erstmal einen funktionierenden Dummy zusammengebaut hab. Die Grafiken sind aber noch fest im HTML hinterlegt und somit auch nicht dynamisch aus dem Seitenbaum ausgelesen.
temp.menu = HMENU
temp.menu {
1 = TMENU
1 {
expAll = 1
wrap = <ul>|</ul>
noBlur = 1
NO = 1
NO {
wrapItemAndSub = <li>|</li>
stdWrap.wrap = |
stdWrap.htmlSpecialChars = 1
ATagTitle.field = title
}
}
2 < .1
2 {
wrap = <div class="megaDropdown"><div class="top"></div><div class="mid"><div class="megaDropdownContent"><div class="nav"><ul> | </ul></div><div class="image"><a href="#"><img src="level-1.jpg" title="" /></a></div></div></div><div class="bottom"></div></div>
wrapItemAndSub = <li>|</li>
}
3 < .1
3 {
wrap = <div class="sub"><ul> | </ul><div class="image"><a href="#"><img class="placeholder" src="level-2-main-1.jpg" alt="" title="" /></a></div></div>
wrapItemAndSub = <li>|</li>
}
}
Mein Problem ist halt, dass ich ein Bild welches im Level 1 einer Seite hinterlegt ist, erst beim rendern des Level 2 ausgeben muss. Und das bekomm ich zu verrecken nicht auf die Reihe.
Der besseren Übersicht hier einfach noch mal das HTML was rauskommen muss:
<ul>
<!-- Level 1 start -->
<li><a href="#">Level 1</a>
<!-- Level 2 start -->
<div class="megaDropdown">
<div class="top"></div>
<div class="mid">
<div class="megaDropdownContent">
<div class="nav">
<ul>
<li><a href="#">Main 1</a>
<!-- Level 3 start -->
<div class="sub">
<ul>
<li><a href="#">Menü 1</a></li>
<li><a href="#">Menü 2</a></li>
<li><a href="#">Menü 3</a></li>
<li><a href="#">Menü 4</a></li>
<li><a href="#">Menü 5</a></li>
</ul>
<!-- Level 2 PIC start --><div class="image">
<a href="#">
<img class="placeholder" src="level-2-main-1.jpg" alt="" title="" />
</a>
</div><!-- Level 2 PIC ende -->
</div>
<!-- Level 3 ende -->
</li>
<li><a href="#">Main 2</a>
<div class="sub">
<!-- Level 2 PIC start --><div class="image">
<a href="#">
<img class="placeholder" src="level-2-main-2.jpg" alt="" title="" />
</a>
</div><!-- Level 2 PIC ende -->
</div>
</li>
</ul>
</div>
<!-- Level 1 PIC start -->
<div class="image">
<a href="#">
<img src="level-1.jpg" title="" />
</a>
</div>
<!-- Level 1 PIC ende -->
</div>
</div>
<div class="bottom"></div>
</div>
<!-- Level 2 ende -->
</li>
</ul>
Ich muss also irgendwie beim Rendern des Untermenüs auf Resourcen der oberen Ebene zurückgreifen und dann nachträglich in die aktuelle Ebene wrappen. Soweit die Theorie. #angry#
Kann mir irgendwer nen Tipp geben was ich probieren kann? Nach 3 Tagen Menü-Gefummel steck ich in ner Sackgasse und seh den Wald vor lauter Bäumen nicht.