---
title: "Aufklappbares Menü"
url: "https://www.typo3.net/d/58885-aufklappbares-menue"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage","JavaScript & AJAX"]
created: "2007-03-05"
last_reply: "2008-02-05"
replies: 13
solved: true
page: 1
pages: 1
lang: "de"
---

# Aufklappbares Menü

TYPO3 › Menüs · 13 Antworten · gelöst · gestartet 2007-03-05

## Frage

**Unbekannter Benutzer** · 2007-03-05 · [Beitrag #1](https://www.typo3.net/d/58885-aufklappbares-menue/1)

Hallo Comunity!

Ich bin auf der suche nach einem Aufklappbaren Textmenü.
Sollte für einen Newbie leicht zu implementieren sein!

Villeicht hat jemand einen heissen Tipp für mich?

M.f.g.
Leo

## Beste Antwort

**Unbekannter Benutzer** · 2007-03-06 · [Beitrag #5](https://www.typo3.net/d/58885-aufklappbares-menue/5)

danke just2b!

Soweit eigentlich alles klar, nur wo muss das Javascript hin?
...im Head vom Template?

M.f.g.
Leo

## Antworten

### [#2](https://www.typo3.net/d/58885-aufklappbares-menue/2) · ArminB · 2007-03-05

moin,

entweder mit TEMNU_LAYER oder das ypmenu
<http://typo3.intervation.de/snippets/menues/ypslideoutmenu.html>

Armin

### [#3](https://www.typo3.net/d/58885-aufklappbares-menue/3) · Unbekannter Benutzer · 2007-03-06

THX!

Was ich zu erwähnen vergessen hatte:

Ich suche ein vertikalem Menü.

Villeicht hat noch jemand einen Link für mich?

M.f.g.
Leo

### [#4](https://www.typo3.net/d/58885-aufklappbares-menue/4) · just2b · 2007-03-06

Hallo,

such mal nach google nach vertikalen Listenmenüs, das ist eigentlich wenig Sache von TYPO3 sondern mehr von CSS!
Ein paar Bsp auch auf meiner Seite: <http://www.just2b.com/mein-typo3/css-ts-menues.html>

georg

### [#5](https://www.typo3.net/d/58885-aufklappbares-menue/5) · Unbekannter Benutzer · 2007-03-06 · Beste Antwort

(Text siehe oben unter „Beste Antwort“.)

### [#6](https://www.typo3.net/d/58885-aufklappbares-menue/6) · just2b · 2007-03-06

nein einfach per TS mit page.headerData einbinden

georg

### [#7](https://www.typo3.net/d/58885-aufklappbares-menue/7) · Unbekannter Benutzer · 2007-03-06

Könnte mir das jemand genauer erläutern?

THX!

### [#8](https://www.typo3.net/d/58885-aufklappbares-menue/8) · Unbekannter Benutzer · 2007-03-06

Irgentwie komme ich leider nicht weiter...

Am liebsten hätte ich mein derzeitiges Menü,
und würde dies 'klappbar' machen! Wer kann helfen?

Mein derzeitiges Menü:

```typoscript
# ------------------------------------------------------------------MENU

subparts.menu = HMENU
subparts.menu {
  entryLevel = 0
     1 = TMENU
     1 {
        wrap = | 
        expAll = 1
        IFSUB = 1
        IFSUB.allWrap = <br>|<br>
        IFSUB.ATagParams = class="link"
        NO.linkWrap = <br>|<br>
        NO.ATagParams = class="link"
}
     2 = TMENU
     2 {
       wrap =  |
       expAll = 1
       IFSUB = 1
       IFSUB.allWrap = |
       NO {
          linkWrap = &nbsp;&nbsp;|<br>
          ATagParams = class="navi"
}          
RO = 1
             }
       }

      3 < .2
      4 < .2
      5 < .2
      6 < .2
```

M.f.g.
Leo

### [#9](https://www.typo3.net/d/58885-aufklappbares-menue/9) · Unbekannter Benutzer · 2007-03-06

Hallo just2b!

Ich versuche mich hoffnungslos an deinem Script!
Villeicht hättest du die zeit un könntest mir beim einpflegen helfen?

1. die vertikal_JS.js mit chmod auf fileadmin/template_neu
2. Eingebunden mit: (nur wo?)

```typoscript
headerData = COA
headerData.11 = TEXT
headerData.11.value = <script type="text/javascript" src="fileadmin/template_neu/vertikal_JS.js"></script>
```

3. Einfügen der Menüführung:

```typoscript
marks.MENU = HMENU
marks.MENU {
	1 = TMENU
	1 {
		expAll = 1
		wrap = <ul id="nav">|</ul>
		noBlur = 1
		NO = 1
		NO.wrapItemAndSub = <li>|</li>

		IFSUB = 1
		IFSUB.wrapItemAndSub = <li class="menuparent">|</li>
		ACTIFSUB < .IFSUB

	}
	2 < .1	
	2.wrap = <ul>|</ul>

	3 < .2
	4 < .2
}
```

Anschliessend mein TS Setup:

```typoscript
# ------------------------------------------------------------------SPRACHAUSWAHL

# SprachVariable L initialisieren 
config.linkVars = L 

# Standardsprache UID 0 -> German
config.sys_language_uid = 0 
config.language = de
config.locale_all = de_DE

# weitere Sprache UID 1 -> English
[globalVar = GP:L = 1] 
config.sys_language_uid = 1
config.language = en
config.locale_all = english
[global]

# ------------------------------------------------------------------MAIN

page = PAGE
page.typeNum = 0
page.stylesheet = fileadmin/template_neu/audiomobil.css
page.10 = TEMPLATE
page.10 {
template = FILE
template.file = fileadmin/template_neu/template.htm
workOnSubpart = DOCUMENT_BODY

subparts.content < styles.content.get
subparts.content.select.orderBy = sorting
subparts.content_right < styles.content.getRight
subparts.content_right.select.orderBy = sorting
subparts.content_left < styles.content.getLeft
subparts.content_left.select.orderBy = sorting

subparts.lang_menu = PHP_SCRIPT
subparts.lang_menu.file = fileadmin/scripts/langmenu.php

# ------------------------------------------------------------------IMG HEADER1

subparts.IMGHEADER1 = COA
subparts.IMGHEADER1 {
  10 = IMAGE
  10.file.maxW = 145
  10.file.import {
    cObject = TEXT
    cObject.value = fileadmin/template_neu/img/am.jpg
    cObject.override {
      required = 1
      data = levelmedia: -1 "slide"
      wrap = uploads/media/ |
      listNum = 0
    }
  }
  10.wrap = |
}

# ------------------------------------------------------------------IMG HEADER2

subparts.IMGHEADER2 = COA
subparts.IMGHEADER2 {
  10 = IMAGE
  10.file.maxW = 492
  10.file.import {
    cObject = TEXT
    cObject.value = fileadmin/template_neu/img/home-header.gif
    cObject.override {
      required = 1
      data = levelmedia: -1 "slide"
      wrap = uploads/media/ |
      listNum = 1
    }
  }
  10.wrap = |
}

# ------------------------------------------------------------------IMG RIGHT1

subparts.IMGRIGHT1 = COA
subparts.IMGRIGHT1 {
  11 = IMAGE
  11.file.maxW = 145
  11.file.import {
    cObject = TEXT
    cObject.value = fileadmin/template_neu/img/dummy.gif
    cObject.override {
      required = 1
      data = levelmedia: -1 "slide"
      wrap = uploads/media/ |
      listNum = 2
    }
  }
  11.wrap = |
}

# ------------------------------------------------------------------IMG RIGHT2

subparts.IMGRIGHT2 = COA
subparts.IMGRIGHT2 {
  11 = IMAGE
  11.file.maxW = 145
  11.file.import {
    cObject = TEXT
    cObject.value = fileadmin/template_neu/img/home-rechts.jpg
    cObject.override {
      required = 1
      data = levelmedia: -1 "slide"
      wrap = uploads/media/ |
      listNum = 3
    }
  }
  11.wrap = |
}

# ------------------------------------------------------------------IMGCONTENT

subparts.IMGCONTENT = COA
subparts.IMGCONTENT {
  11 = IMAGE
  11.file.maxW = 492
  11.file.import {
    cObject = TEXT
    cObject.value = fileadmin/template_neu/img/content.gif
    cObject.override {
      required = 0
      data = levelmedia: -1 "slide"
      wrap = uploads/media/ |
      listNum = 4
    }
  }
  11.wrap = |
}

# ------------------------------------------------------------------MENU

subparts.menu = HMENU
subparts.menu {
  entryLevel = 0
     1 = TMENU
     1 {
        wrap = | 
        expAll = 1
        IFSUB = 1
        IFSUB.allWrap = <br>|<br>
        IFSUB.ATagParams = class="link"
        NO.linkWrap = <br>|<br>
        NO.ATagParams = class="link"
}
     2 = TMENU
     2 {
       wrap =  |
       expAll = 1
       IFSUB = 1
       IFSUB.allWrap = |
       NO {
          linkWrap = &nbsp;|<br>
          ATagParams = class="navi"
}          
RO = 1
             }
       }

      3 < .2
      4 < .2
      5 < .2
      6 < .2

}
```

...und Jetzt die Bitte meinen CODE anzupassen! THX!

### [#10](https://www.typo3.net/d/58885-aufklappbares-menue/10) · just2b · 2007-03-06

Hallo,

irgendwo in dein TS (nicht innerhalb von irgendwelchenm {} )ein

```typoscript
page {
headerData...
}
```

und statt marks.MENU kannst du subparts.MENU schreiben und dann brauchst halt noch den subpart in deinem template und das TS fürs MENnü gehört zur Definition deiner anderen subparts

georg

### [#11](https://www.typo3.net/d/58885-aufklappbares-menue/11) · Unbekannter Benutzer · 2007-03-06

Meine Derzeitige Config:
(Leider klappt noch nichts ein od. aus!)

```typoscript
# ------------------------------------------------------------------SPRACHAUSWAHL

# SprachVariable L initialisieren 
config.linkVars = L 

# Standardsprache UID 0 -> German
config.sys_language_uid = 0 
config.language = de
config.locale_all = de_DE

# weitere Sprache UID 1 -> English
[globalVar = GP:L = 1] 
config.sys_language_uid = 1
config.language = en
config.locale_all = english
[global]

# ------------------------------------------------------------------MAIN
page = PAGE
page.typeNum = 0
page.stylesheet = fileadmin/template_neu/audiomobil.css
page.10 = TEMPLATE
page.10 {
template = FILE
template.file = fileadmin/template_neu/template.htm
workOnSubpart = DOCUMENT_BODY

subparts.content < styles.content.get
subparts.content.select.orderBy = sorting
subparts.content_right < styles.content.getRight
subparts.content_right.select.orderBy = sorting
subparts.content_left < styles.content.getLeft
subparts.content_left.select.orderBy = sorting

subparts.lang_menu = PHP_SCRIPT
subparts.lang_menu.file = fileadmin/scripts/langmenu.php

# ------------------------------------------------------------------IMG HEADER1

subparts.IMGHEADER1 = COA
subparts.IMGHEADER1 {
  10 = IMAGE
  10.file.maxW = 145
  10.file.import {
    cObject = TEXT
    cObject.value = fileadmin/template_neu/img/am.jpg
    cObject.override {
      required = 1
      data = levelmedia: -1 "slide"
      wrap = uploads/media/ |
      listNum = 0
    }
  }
  10.wrap = |
}

# ------------------------------------------------------------------IMG HEADER2

subparts.IMGHEADER2 = COA
subparts.IMGHEADER2 {
  10 = IMAGE
  10.file.maxW = 492
  10.file.import {
    cObject = TEXT
    cObject.value = fileadmin/template_neu/img/home-header.gif
    cObject.override {
      required = 1
      data = levelmedia: -1 "slide"
      wrap = uploads/media/ |
      listNum = 1
    }
  }
  10.wrap = |
}

# ------------------------------------------------------------------IMG RIGHT1

subparts.IMGRIGHT1 = COA
subparts.IMGRIGHT1 {
  11 = IMAGE
  11.file.maxW = 145
  11.file.import {
    cObject = TEXT
    cObject.value = fileadmin/template_neu/img/dummy.gif
    cObject.override {
      required = 1
      data = levelmedia: -1 "slide"
      wrap = uploads/media/ |
      listNum = 2
    }
  }
  11.wrap = |
}

# ------------------------------------------------------------------IMG RIGHT2

subparts.IMGRIGHT2 = COA
subparts.IMGRIGHT2 {
  11 = IMAGE
  11.file.maxW = 145
  11.file.import {
    cObject = TEXT
    cObject.value = fileadmin/template_neu/img/home-rechts.jpg
    cObject.override {
      required = 1
      data = levelmedia: -1 "slide"
      wrap = uploads/media/ |
      listNum = 3
    }
  }
  11.wrap = |
}

# ------------------------------------------------------------------IMGCONTENT

subparts.IMGCONTENT = COA
subparts.IMGCONTENT {
  11 = IMAGE
  11.file.maxW = 492
  11.file.import {
    cObject = TEXT
    cObject.value = fileadmin/template_neu/img/content.gif
    cObject.override {
      required = 0
      data = levelmedia: -1 "slide"
      wrap = uploads/media/ |
      listNum = 4
    }
  }
  11.wrap = |
}

# ------------------------------------------------------------------MENU

page{
headerData = COA
headerData.11 = TEXT
headerData.11.value = <script type="text/javascript" src="fileadmin/template_neu/vertikal_JS.js"></script>
}

subparts.menu = HMENU
subparts.menu {
        1 = TMENU
        1 {
                expAll = 1
                wrap = <ul id="nav">|</ul>
                noBlur = 1
                NO = 1
                NO.wrapItemAndSub = <li>|</li>
 
                IFSUB = 1
                IFSUB.wrapItemAndSub = <li class="menuparent">|</li>
                ACTIFSUB < .IFSUB
 
        }
        2 < .1  
        2.wrap = <ul>|</ul>
 
        3 < .2
        4 < .2
} 

}
```

### [#12](https://www.typo3.net/d/58885-aufklappbares-menue/12) · just2b · 2007-03-06

man betone mein

> irgendwo in dein TS (**nicht innerhalb von irgendwelchen {}** )ein

...

georg

### [#13](https://www.typo3.net/d/58885-aufklappbares-menue/13) · Unbekannter Benutzer · 2007-03-06

Ups! *sorry*
Habs mittlerweile am laufen (!)

TOLLES MENÜ! RESPECKT!

Meine letzte Frage:
Wie muss dass css ausschauen, damit der aktieve Link gekennzeichnet wird?

THX!
Leo

### [#14](https://www.typo3.net/d/58885-aufklappbares-menue/14) · thorty · 2008-02-05

Hallo just2b,

Habe auch mal das Beispiel aus deiner Seite verwendet. Allerdings funktioniert es bei mir im IE 6 nicht. Ich verwende extension-templates, die ich dann zu einem Template zusammen setzt.

Hier mal das TS zu meinem menü:

```typoscript
temp.menue = HMENU
temp.menue {
	1 = TMENU
	1 {
		expAll = 1
		wrap = <ul id="nav">|</ul>
		noBlur = 1
		NO = 1
		NO.wrapItemAndSub = <li>|</li>

		IFSUB = 1
		IFSUB.wrapItemAndSub = <li class="menuparent">|</li>
		ACTIFSUB < .IFSUB

	}
	2 < .1	
	2.wrap = <ul>|</ul>

	3 < .2
	4 < .2
}
```

Hier mein main-template:

```typoscript
# Main TEMPLATE cObject for the BODY
temp.mainTemplate = TEMPLATE
temp.mainTemplate {
    # Feeding the content from the Auto-parser to the TEMPLATE cObject:
  template =< plugin.tx_automaketemplate_pi1
    # Select only the content between the <body>-tags
  workOnSubpart = DOCUMENT_BODY
    # Substitute the ###menue### subpart with dynamic menu:
  subparts.menue < temp.menue
    # Substitute the ###content### subpart with some example content:
  subparts.content < styles.content.get
}

# Main TEMPLATE cObject for the HEAD
temp.headTemplate = TEMPLATE
temp.headTemplate {
    # Feeding the content from the Auto-parser to the TEMPLATE cObject:
  template =< plugin.tx_automaketemplate_pi1
    # Select only the content between the <head>-tags
  workOnSubpart = DOCUMENT_HEADER
}

# Default PAGE object:
page = PAGE
page {
	headerData = COA
	headerData.11 = TEXT
	headerData.11.value = <script type="text/javascript" src="fileadmin/includes/vertikal_JS.js"></script>
}
page.config.doctype = xhtml_trans
page.typeNum = 0
# Copying the content from TEMPLATE for <body>-section:
page.10 < temp.mainTemplate
# Copying the content from TEMPLATE for <head>-section:
page.headerData.10  < temp.headTemplate
```

und hier was in der vertikal_JS.js steht:

```javascript
function IEHoverPseudo() {
 
	var navItems = document.getElementById("nav").getElementsByTagName("li");
	
	for (var i=0; i<navItems.length; i++) {
		if(navItems[i].className == "menuparent") {
			navItems[i].onmouseover=function() { this.className += " over"; }
			navItems[i].onmouseout=function() { this.className = "menuparent"; }
		}
	}
 
}
window.onload = IEHoverPseudo;
```

die JS-Datei wird auch korrekt angesprochen, dies habe ich bereits im Quellcode des Browsers nachgesehen.
Kann mir hier bitte jemand helfen? ich komm nicht weiter.

Gruß,
thorty

---

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