[TYPO3-german] YAML, NavSlidingDoor als horizontal

[David Bruchmann]

----- Ursprüngliche Nachricht -----
Von:        Peter Reinboth <p.reinboth at gmx.de>
Gesendet:   Mittwoch, 25. August 2010 17:08:09
An:         Typo3 Liste <typo3-german at lists.typo3.org>
CC:
Betreff:    [TYPO3-german] YAML, NavSlidingDoor als horizontal
> Hallo Typo3 Liste,
>
>
> ich habe mir mittels YAML-builder meine Vorlage als htm erstellt,
> diese in Typo3 als Vorlage eingebunden, soweit alles ok.
> Allerdings bekomme ums verrecken nicht das Menue als horizontal in TS
> gebacken. In der Html-Vorlage ist alles bestens.
> Mein Typo3 Buch gibt dahingehend nichts her, und in der Referenz habe
> ich bisher auch nichts gefunden.
>
> Hat das schon jemand gelöst und evtl. einen Tipp (Code) für mich?
>
> Vielen Dank im voraus.
>
> PS: Bin Typo3 Anfänger und erst seit gestern dabei.
>


Hallo Peter,

hiermit das Problem noch einmal genauer und die Lösung:

Auf der Seite [1] ist das Hauptmenu integriert und das wolltest Du 
nachbilden in TYPO3.

Der HTML-Quelltext vom Menu sieht so aus:



<div id="nav" role="navigation">
   <div class="hlist">
	<ul>
	  <li><a href="../index.html">Table Of Contents</a></li>
	  <li><a href="menu_vertical_listnav.html">Next Example</a></li>
	  <li><a href="menu_shiny_buttons.html">Previous Example</a></li>
	  <li><a href="#">Button 4</a></li>
	  <li class="active"><strong>Active Button</strong></li>
	</ul>
   </div>
</div>


Erst einmal definiere ich das TypoScript, das die HTML-Struktur erzeugt:


lib.navSlidingDoor = COA
lib.navSlidingDoor {
   10 = TEXT
   10.value = <div id="nav" role="navigation">
   20 = HMENU
   20 {
     special = directory

     # uid der uebergeordneten Seite von den Seiten der Navi
     special.value = 1

     wrap = <div class="hlist">|</div>

     1 = TMENU
     1 {
       # Entfernen von ' onfocus="blurLink(this);" aus links'
       noBlur = 1

       wrap = <ul>|</ul>

       NO.linkWrap = <li>|</li>

       # bei Unterseite der aktuellen Seite
       # wenn CUR nicht aktiviert auch bei aktueller Seite:
       ACT = 1
       ACT.linkWrap =  <li class="active">|</li>

       # Optional: Link entfernen, wenn die aktuelle Seite
       # und Navigationspunkt gleich sind
       CUR = 1
       CUR.doNotLinkIt = 1
       CUR.stdWrap.wrap < .ACT.linkWrap
     }
   }
   30 = TEXT
   30.value = </div>
}


Die verschiedenen umschließenden Elemente habe ich bewußt auf 
unterschiedlichen Ebenen mit verschiedenen Methoden erzeugt. Das ist bei 
dem einfachen Menu überflüssig aber kann bei komplizierteren Sachen 
sinnvoll sein, außerdem zeigt es Dir die Möglichkeiten.


So jetzt muß das CSS eingebunden werden und das HTML noch ausgegeben werden:

page = PAGE
page {

   # CSS-Stylesheets
   includeCSS.cssdatei = fileadmin/Seite 1/css/my_layout.css

   # Vorlage laden
   10 = TEMPLATE
   10.template = FILE
   10.template.file = fileadmin/Seite 1/templates/template_sap_profil.htm

   # Template-Sektion laden
   10.workOnSubpart = DOKUMENT

   # Marker ersetzen ( ###menu_slidingDoor### )
   10.marks.menu_slidingDoor < lib.navSlidingDoor

   # Weitere Definitionen ...
}



Die grafische Darstellung ist jetzt nur noch von CSS und per CSS 
eingebundenen Grafiken abhängig und hat nichts mehr direkt mit TYPO3 zu tun.

Viele Grüße,
David


1) 
http://www.yaml.de/fileadmin/examples/05_navigation/menu_sliding_door.html