responsives DropDown-Menü

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

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

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:

       <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:

### 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

Geht auf mehreren Wegen:

Beispiel 1:

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:

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>
}