---
title: "ddaccordion menu"
url: "https://www.typo3.net/d/105214-ddaccordion-menu"
source: "typo3.net"
tags: ["Allgemein","Frage"]
created: "2011-05-04"
last_reply: "2011-05-04"
replies: 4
solved: false
page: 1
pages: 1
lang: "de"
---

# ddaccordion menu

Allgemein · 4 Antworten · gestartet 2011-05-04

## Eröffnungsbeitrag

**The_C** · 2011-05-04 · [Beitrag #1](https://www.typo3.net/d/105214-ddaccordion-menu/1)

Hallo,

ich quäle mich schon seit einiger Zeit mit diesem Menü <http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-bullet.htm> das ich TS umsetzen will.
Leider habe ich noch zu wenig Erfahrung und bitte deswegen um eure hilfe.
Der Fehler ist sicher im TS!
Irgend-etwas fehlt da denn das eingebundene Menü ist immer offen die h3 fehlen und trotz js einbindung auch nicht den gewünschten Effekt.
Die js einbindung habe ich über Templavoiler gemacht.

Hier mal mein falsches TS HMENU und die dazugehörige css:

```typoscript
lib.field_nav = HMENU
lib.field_nav {
  special = directory
  special.value = 1
  1 = TMENU
  1 {
    wrap = <ul>|</ul>
    expAll = 1
    NO = 1
    NO.wrapItemAndSub = <li>|</li>
    ACT < .NO
    ACT.ATagParams = class="aktiv"
  }
  2 < .1
}
```

```css
.arrowlistmenu{
width: 251px; /*width of accordion menu*/
padding-top: 37px; 
}

.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Arial;
color: white;
background: #cfaf86 url(titlebar1.gif) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 30px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}

.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(active.gif);
}

.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
font: 13px Arial;
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}

.arrowlistmenu ul li{
padding-bottom: 0px; /*bottom spacing between menu items*/
}

.arrowlistmenu ul li a{
color: grey;
/*background: url(arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 3px 0;
padding-left: 53px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px dotted #dadada;
font-size: 90%;
}

.arrowlistmenu ul li a:visited{
color: red;
}

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #c39703;
background-color: #fff6d3;
}
```

Danke schonmal im Voraus für eure Hilfe!

[Bild: \[upl-image-preview uuid=5a93d9aa-83c9-5dcd-aa2f-733fe1207026 url=https://www.typo3.net/assets/files/typo3net/396-Bild1.jpg alt=Bild1.jpg thumbnail_url=https://www.typo3.net/assets/files/typo3net/396-Bild1.jpg\]](https://www.typo3.net/assets/files/typo3net/396-Bild1.jpg)

## Antworten

### [#2](https://www.typo3.net/d/105214-ddaccordion-menu/2) · etux · 2011-05-04

TS-Setup des Menüs dürfte einfach sein. Es hängt aber davon ab, wie Dein Seitenbaum aussieht. So wären nämlich die Seiten der Ersten Ebene nicht verlinkt (nicht erreichbar).

```typoscript
wasAuchImmer = HMENU
wasAuchImmer {
    wrap = <div class="arrowlistmenu">|</div>
    1 = TMENU
    1 {
        expAll = 1
        noBlur = 1
        NO = 1
        NO {
	    allWrap = <h3 class="menuheader expandable">|</h3>
            doNotLinkIt = 1
        }
    }
    2 = TMENU
    2 {
        expAll = 1
        noBlur = 1
        wrap = <ul class="categoryitems">|</ul>
        NO = 1
        NO {
            wrapItemAndSub = <li>|</li>
        }
    }
    3 < .2
    3.wrap = <ul>|</ul>
    4 < .3
    5 < .3
}
```

**EDIT**:
Sorry, bei dem TS habe ich bloß das Menü von der verlinkten Seite „abgebildet“. Dein TS hatte ich nicht mehr im Sinne. „wasAuchImmer“ mit „lib.field_nav“ zu ersetzen und das Menü um die ACT-Zustände (aber erst bei der zweiten Ebene) zu ergänzen, dürfte aber nicht das Problem sein.

### [#3](https://www.typo3.net/d/105214-ddaccordion-menu/3) · The_C · 2011-05-04

**Hab vielen Dank!**
Funktioniert einwandfrei aber wozu ist das:

```typoscript
3 < .2
3.wrap = <ul>|</ul>
4 < .3
5 < .3
```

### [#4](https://www.typo3.net/d/105214-ddaccordion-menu/4) · etux · 2011-05-04

Für den Fall dass Du (oder andere) mehrere Ebenen in Deinem Seitenbaum (-menü) hast, oder haben wirst. Sonst einfach löschen. :D

### [#5](https://www.typo3.net/d/105214-ddaccordion-menu/5) · The_C · 2011-05-04

Ahh... so langsam fange ich an zu verstehen #giggle#
Ich bin aber noch Lichtjahre von Typo3 entfernt.
Danke noch einmal für deine schnelle Hilfe!

---

Quelle: „ddaccordion menu“, typo3.net, https://www.typo3.net/d/105214-ddaccordion-menu
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.