[impega]

Hi @ all,

ich beschäftige mich schon etwas mit Typo3 und habe mir "Das TYPO3 Profihandbuch" zugelegt.
Nun probiere ich eine Seite mit einem horizontalem Drop-Down Menü zu erstellen.

Als "standalone" *.html und *.css Dateien funktioniert das Menü richtig, d.h. die einzellnen Unterpunkte klappen bei einem Hover aus und nicht erst beim klick.
Das Problem beim einbinden in Typo3 besteht jedoch darin, dass ich zunächst nichts bewegt, wenn ich mit der Maus über einen Oberpunkt fahre. Wenn ich nun auf einen Punkt klicke, zeigen sich erst die Unterpunkte des Oberpunktes.
Dies ist ziemlich läßtig, da es viel mehr Zeit beansprucht und man die Seite nach jedem Klick erst laden lassen muss.

Das CSS für das Drop-Down Menü hab ich hierher:
The ULTIMATE CSS only drop-down menu version 2 with THREE sub levels



Hier ist mein Typoscript für das Menü:

page = PAGE
page { 
    stylesheet = style.css
    
    20 = HMENU
    20 {
        wrap = <div class="menu"> | </div>
        1 = TMENU
        1.wrap = <ul> | </ul> 
        1.NO.wrapItemAndSub = <li> |  </li>
        2 = TMENU
        2.wrap = <ul> | </ul>
        2.NO.wrapItemAndSub = <li> | </li>
        3 = TMENU
        3.wrap = <ul> | </ul>
        3.NO.linkWrap = <li> | </li>
    }    
    30 < styles.content.get
    30.wrap = <div id="content"> | </div>
}

Vielleicht kann mir ja jemand weiterhelfen.
Dafür wäre ich sehr dankbar.

Gruß Impega


EDIT:
Ich habe auf folgender Seite *klick* ein Script für mein Vorhaben gefunden.
Allerdings funktioniert das ganze nicht so, wie es sein sollte und mir wird bei der verwendung des Scriptes einfach gar nichts angezeigt.

# default PAGE object:
page = PAGE
page { 
    stylesheet = style.css

    headerData.10 = TEXT
    headerData.10.value (       
        <script type="text/javascript">
            //<![CDATA[
            function show(element){
            element.className += "hover";
            }
            function hide(element){
            element.className = element.className = "";
            }
            //]]>
        </script    
    ) 


### Menü ###

20.menu = HMENU
20.menu {

  ### Erste Ebene ###

    1 = TMENU
    1 {
      wrap = <ul class="menu">|</ul>
      expAll = 1
      NO.wrapItemAndSub = <li onmouseover="show(this)" onmouseout="hide(this)">|</li>
               
      ACT < .NO
      ACT = 1
      ACT.ATagParams = class="active"
    }

    ### Zweite Ebene ###
    2 = TMENU
    2 {
      wrap = <ul onmouseover="show(this)" onmouseout="hide(this)">|</ul>
      NO.allWrap = <li>|</li>
    }
}

}

Dem Quelltext nach zu urteilen, wird es nur bis nach den hinzugefügten Headerangaben für das Javascript abgearbeitet.
Wer kann helfen ?

[npre]

werden im quelltext die submenüs überhaupt ausgegeben? wenn nicht, versuch mal expAll = 1

[impega]

Hi,

danke funktioniert soweit schonmal.
Es gibt aber wieder ein Problem.
Das Menü hat gesamt drei Ebenen.

Jetzt sind direkt alle Einträge ausgeklappt.
Dadurch kommt es zu Komplikationen.

Punkte der dritten Ebene Verdecken andere Punkte der dritten Ebene.

[matin]

soll nun die 3. ebene nicht angezeigt werden, oder ist es eher nur ein css-problem?

[impega]

Hi,

ich denke, dass es eher ein Typo3 / TypoScript problem ist,
denn als einzellstehende HTML-Datei mit den CSS-Befehlen,
funktioniert es so wie es soll.
Im Typo3 mit dem expAll = 1 werden alle Unterpunkte angezeigt (ich hab es 2x eingefügt)

Die Unterpunkte der dritten Ebene sollen allerdings erst ausklappen, wenn ich mit der Maus auf ihren übergeordneten Punkt mit der Maus gehe.


Hier mal das aktuelle TypoScript:

Typoscript-Code:

1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30:

page = PAGE page { stylesheet = style.css 20 = HMENU 20 { wrap = <div class="menu"> | </div> 1 = TMENU 1 { expAll = 1 wrap = <ul> | </ul> NO.wrapItemAndSub = <li> |  </li> } 2 = TMENU 2 { expAll = 1 wrap = <ul> | </ul> NO.wrapItemAndSub = <li> | </li> } 3 = TMENU 3 { wrap = <ul> | </ul> NO.linkWrap = <li> | </li> } } 30 < styles.content.get 30.wrap = <div id="content"> | </div> }

[matin]

expAll = 1 brauchst du nur 1x