[TYPO3-german] CSS-Dropdown in TS nachbauen

[Torsten]

Christian Wolff schrieb:
> -----BEGIN PGP SIGNED MESSAGE-----
> Hash: SHA1
>
> Am 04.06.2010 08:37, schrieb Torsten:
>   
>> Guten Morgen zusammen,
>>
>> ich versuche gerade ein MegaDropdown in Typo3 einzubinden (Vorlage
>> http://www.sohtanaka.com/web-design/examples/mega-dropdowns/
>> <http://www.sohtanaka.com/web-design/examples/mega-dropdowns/>), hänge
>> aber an einer Stelle und das Thema brennt mir jetzt schon seit Tagen
>> unter den Nägeln, ohne dass ich auf eine Lösung gekommen bin. :-/
>> Ehrlich gesagt, weiß ich mittler Weile gar nicht mehr, ob sich das so in
>> TS umsetzen lässt.
>> Wenn es mal fertig ist, soll es diese Struktur haben:
>>
>> <ul id="topnav">
>>    <li><a href="#" class="home">Home</a></li>
>>    <li>
>>        <a href="#" class="products">Products</a>
>>        <div class="sub">
>>            <ul>
>>                <li><h2><a href="#">Desktop</a></h2></li>
>>                <li><a href="#">Navigation Link</a></li>
>>                <li><a href="#">Navigation Link</a></li>
>>            </ul>
>>            <ul>
>>                <li><h2><a href="#">Laptop</a></h2></li>
>>                <li><a href="#">Navigation Link</a></li>
>>                <li><a href="#">Navigation Link</a></li>
>>            </ul>
>>            <ul>
>>                <li><h2><a href="#">Accessories</a></h2></li>
>>                <li><a href="#">Navigation Link</a></li>
>>                <li><a href="#">Navigation Link</a></li>
>>            </ul>
>>            <ul>
>>                <li><h2><a href="#">Accessories</a></h2></li>
>>                <li><a href="#">Navigation Link</a></li>
>>                <li><a href="#">Navigation Link</a></li>
>>            </ul>
>>        </div>
>>    </li>
>>    <li><a href="#" class="sale">Sale</a></li>
>>    <li><a href="#" class="community">Community</a></li>
>>    <li><a href="#" class="store">Store Locator</a></li>
>> </ul>
>>
>>     
>
> hi Torsten ich glaube das ist in TS zu realisieren hier mein ansatz dazu
> ich kümmere mich nur im die (struktur die classen lasse ich weg):
>
> lib.menu = HMENU
> lib.menu {
>   1 = TMENU
>   1.wrap = <ul id="topmenu">|</ul>
>   1.NO.wrapItemAndSub = <li>|</li>
>
>   2 = TMENU
>   2.wrap = <div><ul>|</ul></div>
>   2.NO.wrap = <li><h2>|</h2></li> |*| <li>|</li> |*| <li>|</li>
>
> }
>
> das sollte dir die struktur geben.
> ist jetzt ungeteste und einfach mal so hier in die mail geschrieben.
> aber ich denke die Idee ist erkennbar.
>
>
> - -- 
> Christian Wolff // Berlin
> http://www.connye.com
>
> some projects:
> http://richtermediagroup.com | http://titanic.de |
> http://fairplay-homepage.de
> -----BEGIN PGP SIGNATURE-----
> Version: GnuPG v1.4.9 (MingW32)
>
> iEYEARECAAYFAkwIrVEACgkQIcCaXPh/JHHKTQCfZRrnVWJrvDjxCRkENJ7gK6GE
> X0kAoKt4XYfdmVdAqt6n+Xj5h2ZuLfhP
> =iP6I
> -----END PGP SIGNATURE-----
>   
Hallo Christian,

danke erstmal für die schnelle Hilfe.
Dein Vorschlag hat mich schon ein wenig weiter gebracht. Musste das wrap 
durch allWrap ersetzen, danach kam dann folgende Anzeige:
<div class="sub">
  <ul class="test">
    <li>
      <h2><a href="#" onfocus="blurLink(this);" class="link">link</a></h2>
    </li>
    <li class="ttt">
      <h2><a href="#" onfocus="blurLink(this);" class="link">link</a></h2>
    </li>
    <li class="ttt">
      <h2><a href="/" onfocus="blurLink(this);" class="link">link</a></h2>
    </li>
<!-- DIE 3 EBENE -->
      <li ><a href="/1/" onfocus="blurLink(this);" class="1">1</a></li>
      <li ><a href="/2/" onfocus="blurLink(this);" class="2">2</a></li>
      <li ><a href="/3/" onfocus="blurLink(this);" class="3">3</a></li>
      <li ><a href="/4/" onfocus="blurLink(this);" class="4">4</a></li>
<!-- DIE 3 EBENE -->
    <li class="ttt">
      <h2><a href="" onfocus="blurLink(this);" class="5">link</a></h2>
    </li>
    <li class="mmm">
      <h2><a href="" onfocus="blurLink(this);" class="5">link</a></h2>
    </li>
  </ul>
</div>
Wie Du sehen kannst, werden jetzt die <h2> gesetzt, allerdings wird mir 
die 3. Ebene erst nachträglich eingefügt und nicht zu dem jeweiligen 
Unterpunkt.

Zu Testzwecken habe ich die 3. Ebene einfach mal einkopiert.
### Menü ###
lib.MENU = HMENU
lib.MENU {
  entryLevel = 1
  ### Erste Ebene ###
  1 = TMENU
  1 {
    wrap = <ul class="menu">|</ul>
    NO {
      ATagParams = class = "{field:tx_realurl_pathsegment}"
      allStdWrap.insertData = 1   
      expAll = 1
      wrapItemAndSub = <li onmouseover="show(this)" 
onmouseout="hide(this)">|</li>
      stdWrap.cObject = COA
      stdWrap.cObject {
        20 = TEXT
        20.wrap = |
        20.field = subtitle
      }
    }       
    ACT < .NO
    ACT = 1
    ACT {
      ATagParams = class = "{field:tx_realurl_pathsegment}"
      allStdWrap.insertData = 1
    } 
  }
  ### Zweite Ebene ###
  2 = TMENU
  2 {
    ATagParams = class = "{field:tx_realurl_pathsegment}"
    allStdWrap.insertData = 1   
    wrap = <div class="sub"><ul class="test">|</ul></div>
  
    NO {
      ATagParams = class = "{field:tx_realurl_pathsegment}"
      allStdWrap.insertData = 1   
      expAll = 1
      allWrap = <li><h2>|</h2></li> |*| <li class="ttt"><h2>|</h2></li> 
|*| <li class="mmm"><h2>|</h2></li>
      stdWrap.cObject = COA
      stdWrap.cObject {
        20 = TEXT
        20.wrap = |
        20.field = subtitle
      }
    }     
  }
  3 < .2

Mein Problem besteht also darin, meine 3. Ebene innerhalb 2.NO.allWrap 
zu bekommen.

Gruß

Torsten