---
title: "responsives DropDown-Menü"
url: "https://www.typo3.net/d/120844-responsives-dropdown-menue"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage","TYPO3 6.x"]
created: "2015-09-06"
last_reply: "2015-09-09"
replies: 3
solved: false
page: 1
pages: 1
lang: "de"
---

# responsives DropDown-Menü

TYPO3 › Menüs · 3 Antworten · gestartet 2015-09-06

## Eröffnungsbeitrag

**typo3_hp** · 2015-09-06 · [Beitrag #1](https://www.typo3.net/d/120844-responsives-dropdown-menue/1)

Guten Abend!

Ich suche eine Anleitung für ein responsives Dropdown-Menü unter Typo3.
Im Netz habe ich nicht wirklich etwas gefunden.

Habt Ihr mir ein gutes Tutorial?

LG und Danke

## Antworten

### [#2](https://www.typo3.net/d/120844-responsives-dropdown-menue/2) · Chrissli · 2015-09-07

Schau doch mal hier.
Diese lassen sich relativ einfach in Typo3 umsetzen
<http://www.cssplay.co.uk/menus/>

### [#3](https://www.typo3.net/d/120844-responsives-dropdown-menue/3) · typo3_hp · 2015-09-07

Hallo vielen Dank!

Habe es soweit hinbekommen, jedoch fehlt mir noch der richtige TS-Code.

Der HTML-Code selbst passt soweit. Nur muss ich das TS irgendwie hinbekommen... :-(

So ist der Soll-Code:

HTML-Code:

```html
       <nav id="nav" role="navigation">
    <a href="#nav" title="Show navigation">Show navigation</a>
    <a href="#" title="Hide navigation">Hide navigation</a>
	
    <ul>
           <li>
            <a href="/" aria-haspopup="false">Home</a>
       
        </li>
        <li>
            <a href="/" aria-haspopup="false">site_1</a>
            <ul>
                <li><a href="/">site_1_1</a></li>
                <li><a href="/">site_1_2</a></li>                
            </ul>
        </li>
		
        <li>
            <a href="/" aria-haspopup="false">site_2</a>
            <ul>
                <li><a href="/">site_2_1</a></li>
                <li><a href="/">site_2_2</a></li>                
            </ul>
        </li>
		
		<li>
            <a href="/" aria-haspopup="false">site_3</a>
            <ul>
                <li><a href="/">site_3_1</a></li>
                <li><a href="/">site_3_2</a></li>                
            </ul>
        </li>
		
		<li>
            <a href="/" aria-haspopup="false">site_4</a>
            <ul>
                <li><a href="/">site_4_1</a></li>
                <li><a href="/">site_4_2</a></li>                
            </ul>
        </li>
		
    </ul>
	
		
</nav>
```

Und mit diesem Typo3-Skript habe ich es versucht.

Ich muss es irgendwie hinbekommen, den ganzen Quellcode inkl.

**<nav id="nav" role="navigation">**
**<a href="#nav" title="Show navigation">Show navigation</a>**
**<a href="#" title="Hide navigation">Hide navigation</a>**

im TS zu generieren.

Code:

```typoscript
### Menü ###
subparts.tempmenu = HMENU
subparts.tempmenu {
    ### Erste Ebene ###
    1 = TMENU
    1 {
      wrap = <ul>|</ul>
      expAll = 1
      NO.wrapItemAndSub = <li aria-haspopup="false">|</li>
      ACT < .NO
      ACT = 1
      ACT.ATagParams = class="active"
    }   
    ### Zweite, dritte und vierte Ebene (Kopieren von erster Ebene) ###
    2 < .1
    #3 < .1
    #4 < .1
}
```

Das Linkziel "/" ist natürlich nur testweise so im Quellcode. Da soll später natürlich durch das TS der richtige Link eingefügt werden!

Lieben Dank

### [#4](https://www.typo3.net/d/120844-responsives-dropdown-menue/4) · freshman17 · 2015-09-09

Geht auf mehreren Wegen:

Beispiel 1:

```typoscript
subparts.tempmenu = HMENU
subparts.tempmenu {

	noBlur = 1
	entryLevel = 0
	excludeUidList = 

	wrap (
		<nav id="nav" role="navigation">
			<a href="#nav" title="Show navigation">Show navigation</a>
			<a href="#" title="Hide navigation">Hide navigation</a>
		|
		</nav>
	)

	1 = TMENU
	1 {
		expAll = 1

		wrap = <ul>|</ul>

		NO = 1
		NO.wrapItemAndSub = <li>|</li>
		NO.ATagParams = aria-haspopup="false"

		ACT < .NO
		ACT.wrapItemAndSub = <li class="active">|</li>
	}

	2 = TMENU
	2 {
		expAll = 1
		wrap = <ul>|</ul>
		
		NO = 1
		NO.wrapItemAndSub = <li>|</li>
		    
		ACT < .NO
		ACT.wrapItemAndSub = <li class="active">|</li>
	}
}
```

Beispiel 2:

```typoscript
subparts.tempmenu = COA
subparts.tempmenu {
	10 = TEXT
	10.value (
		<nav id="nav" role="navigation">
			<a href="#nav" title="Show navigation">Show navigation</a>
			<a href="#" title="Hide navigation">Hide navigation</a>
	)
	20 = HMENU
	20 {
		noBlur = 1
		entryLevel = 0
		excludeUidList = 
	
		1 = TMENU
		1 {
			expAll = 1
	
			wrap = <ul>|</ul>
	
			NO = 1
			NO.wrapItemAndSub = <li>|</li>
			NO.ATagParams = aria-haspopup="false"
	
			ACT < .NO
			ACT.wrapItemAndSub = <li class="active">|</li>
		}
		2 < .1
	}
	30 = TEXT
	30.value = </nav>
}
```

---

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