---
title: "Menü mit Ausfahreffekt"
url: "https://www.typo3.net/d/105141-menue-mit-ausfahreffekt"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage","JavaScript & AJAX"]
created: "2011-04-29"
last_reply: "2011-05-12"
replies: 1
solved: false
page: 1
pages: 1
lang: "de"
---

# Menü mit Ausfahreffekt

TYPO3 › Menüs · 1 Antwort · gestartet 2011-04-29

## Eröffnungsbeitrag

**raphael_typo3** · 2011-04-29 · [Beitrag #1](https://www.typo3.net/d/105141-menue-mit-ausfahreffekt/1)

Hallo zusammen,

bin der Raphael aus dem kühlen Bremen und als langjähriger Joomla!-User neu bei TYPO3.

Meine Frage ist nun, mit welcher TYPO3-Erweiterung ich ein aufklappbares Menü erstellen kann, wie es auf dieser Seite realisiert wurde:

<http://www.marcomagni.com>

Bei einem Klick auf "Works" fährt das Untermenü in einem Rutsch nach unten aus.

Würde mich über eure Hilfe sehr freuen und bedanke mich hierfür schon mal im Vorhinein :)

## Antworten

### [#2](https://www.typo3.net/d/105141-menue-mit-ausfahreffekt/2) · SomehowLost · 2011-05-12

Hallo Raphael,

das kannst Du mit JavaScript (jQuery) lösen:
- Den Unterpunkten innerhalb von "Works" mit einem div,ul oder sonstwas umschließen und Klasse mitgeben.
- Die Ebene mit den Unterpunkten mittels TypoScript komplett ausklappen "expAll = 1"
- Mittels jQuery diese Klasse auf hide() setzen
- Klickt man nun auf 'Works' den nächstgelegene tag mit der Klasse (s.o.) per slideToggle() ausklappen
SlideToggle bewirkt, dass beim nem zweiten Klick auf Works, das ganze auch wieder zurückgeht.

z.B.: Deine Navi:

```html
<ul class="ebene_1">
  <li>
    <a href="#" class="link">Punkt 1</a>
    <ul class="ebene_2">
      <li><a href="#">Punkt 1</a></li>
    </ul>
  </li>
</ul>
```

das TS (Beispiel):

```typoscript
lib {
  menu = HMENU
  menu {
    1 = TMENU
    1 {
      wrap = <ul class="ebene_1">|</ul>
      NO = 1
      NO {
        wrapItemAndSub = <li>|</li>
        ATagParams = class="link"
      }
    }
    2 = TMENU
    2 {
      wrap = <ul class="ebene_2">|</ul>
      NO = 1
      NO {
        wrapItemAndSub = <li>|</li>
      }
    }
  }
}
```

Dein JS:

```javascript
$(document).ready( function () {
  $('.ebene_2').hide();
  $('.ebene_1 a.link').click( function () {
    $(this).next('.ebene_2').slideToggle();
  });
});
```

Alles ohne Gewähr.

Das Ganze ist natürlich weit ausbaufähiger ;) Aber der Ansatz zählt ja :)

Vielee Grüße,
Andreas

---

Quelle: „Menü mit Ausfahreffekt“, typo3.net, https://www.typo3.net/d/105141-menue-mit-ausfahreffekt
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.