Zum Inhalt springen

Dropdown Menü mit Überschrift

Erstellt am 20. Februar 2013 · 2 Antworten · letzte Antwort am 20. Februar 2013

Tags: HTML & CSS, Frage

WhiteShadow ·

Hallo,

ich bin derzeit dabei ein Dropdown Menü mit Überschrift zu erstellen. Sowas habe ich bisher noch nicht erstellt, aber irgendwann ist ja immer das erste mal.

Das ganze soll so aussehen:
Bild: img13.myimg.de/screen387dd_thumb.jpg

Derzeit sieht es aber so aus. Hier klicken

Vorlage für das Dropdown Menü habe ich hierher:
http://www.mortox.de/typo3-tipps/typoscript-sammlung/dropdown-menue-mit-3-ebenen.html

CSS passt noch nicht ganz, da muss ich noch sehr intensiv schauen, aber mir geht es derzeit darum, dass die 3. Ebene direkt unter der 2. Ebene steht. Weil die 2. Ebene nehme ich derzeit als Menüüberschrift die nicht verlinkt sein soll.

So sieht mein TS aus:

lib.NAVI = HMENU
lib.NAVI {
    ### 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, dritte und vierte Ebene (Kopieren von erster Ebene) ###
    2 < .1
    2.NO.doNotLinkIt = 1
    2.ACT.doNotLinkIt = 1
  
    3 < .1
    4 < .1
}

Das CSS seht ihr ja mit Firebug bzw. Seitenquelltext.

Wie bekomme ich es also hin das alle Menüpunkte von der 3. Ebene direkt unter der 2. Ebenen richtig stehen?

Also
Ebene 2
Ebene 3
Ebene 3
Ebene 3
Ebene 3

Ebene 2
Ebene 3
Ebene 3
Ebene 3
Ebene 3

Hoffe jemand hat eine Idee.

Chrissli ·

Ich hoffe ich habe das Problem nicht falsch verstanden, aber theoretisch solltest du nur das linke Padding und die Höhe ( für das Hintergrundbild ) anpassen müssen, z.b.

#content ul.level2 { 
  padding: 2px 20px; 
  height: auto;
}
WhiteShadow ·

Bin gerade noch dabei.

Einiges habe ich schon geschafft.

Um Überschriften für Menüs zu erstellen, so erstellt man diese Seiten einfach als Trennzeichen und im TS fügt man diese so ein:

    2 = TMENU
    2 {
      wrap = <ul class="level2">|</ul>
      expAll = 1
      NO.wrapItemAndSub = <li onmouseover="show(this)" onmouseout="hide(this)">|</li>

      ACT < .NO
      ACT = 1
      ACT.ATagParams = class="active"
      SPC = 1
      SPC.wrapItemAndSub = <li class="test">|</li>
    }

Also diee beiden SPC Zeilen. Ich bin zwar noch nicht ganz fertig, aber auf einem guten Weg. Der Rest scheint nur noch CSS zu sein und das schaffe ich hoffentlich irgendwie. Daher stelle ich hier auf gelöst.