---
title: "Tutorial: TMENU Layer mit jquery-Lib"
url: "https://www.typo3.net/d/63746-tutorial-tmenu-layer-mit-jquery-lib"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage"]
created: "2007-06-11"
last_reply: "2007-06-11"
replies: 2
solved: false
page: 1
pages: 1
lang: "de"
---

# Tutorial: TMENU Layer mit jquery-Lib

TYPO3 › Menüs · 2 Antworten · gestartet 2007-06-11

## Eröffnungsbeitrag

**cooper** · 2007-06-11 · [Beitrag #1](https://www.typo3.net/d/63746-tutorial-tmenu-layer-mit-jquery-lib/1)

Hallo,

es ist mal an der Zeit der Typo Community was zurückzugeben :) Ich habe eine kleine Layer Navigation zusammengestrickt, die ich hier einfach mal bereitstellen möchte. Ist mehr oder weniger eine Quick & Dirty Variante, macht aber das was man erwartet :)

Die Navigation basiert auf der Javascript Library [jquery](http://jquery.com) und dem Plugin [jdMenu](http://jdsharp.us/jQuery/plugins/jdMenu/).

Am Ende sieht die Navigation so aus:
[Bild: 8works.de/…/fe_nav.gif](http://www.8works.de/webdesign/grafik/fe_nav.gif)
Abb.1

Erzeugt aus diesem Baum:
[Bild: 8works.de/…/t3tree.gif](http://www.8works.de/webdesign/grafik/t3tree.gif)
Abb.2

Zunächst habe ich mir die Version [1.3beta2](http://jdsharp.us/jQuery/plugins/jdMenu/) (basiert auf jQuery 1.1.2) des jdMenu heruntergeladen.

Auf dem Server habe ich in dem fileadmin Ordner einen Unterordner Namens "jquerymenu" erstellt. Also:

```html
fileadmin/jquerymenu/
```

In diesen Ordner entpackt man nun die Demo des jdMenus. Anschließend sollten sich folgende Dateien in diesem Ordner befinden:

- gradient.png
- gradient-alt.png
- gradient-vertical.png
- jdMenu.css
- jdMenu.slate.css
- jdMenu-demo.html
- jquery.bgiframe.js
- jquery.dimensions.js
- jquery.jdMenu.js
- jquery.jdMenu.packed.js
- jquery-1.1.2.js

Nun habe ich mir zum Testen ein HTML Template mit dem Namen "index.html" erstellt, welches die Navigation darstellen soll. Dieses Template wird auch in dem Ordner jquerymenu gespeichert.

HTML-Template:

```html
<!-- ###DOCUMENT_BODY### begin -->

###MENU###

<script type="text/javascript">
$(function(){
    $('ul.jd_menu').jdMenu();
    // Add menu hiding on document click
    $(document).bind('click', function() {
        $('ul.jd_menu ul:visible').jdMenuHide();
    });
});
</script>
<!-- ###DOCUMENT_BODY### end -->
```

Wichtig hierbei ist, das der script-Block am Ende des HTML Templates eingefügt wird. Also im Prinzip vor das schliessende body-Tag.

Im Typo3 Backend erstellt man nun den Seitenbaum aus dem die Navigation erstellt werden soll (siehe Abb.2). Auf dem Root Element wird das Typo3-Template erstellt (hier die Seite mit Namen jQuery). Das eigentliche TypoScript sieht wiefolgt aus:

```typoscript
page = PAGE
page.10 = TEMPLATE
page.10.template = FILE
page.10.template.file = fileadmin/jquerymenu/index.html
page.10.workOnSubpart = DOCUMENT_BODY

page.headerData.20 = TEXT
page.headerData.20.value = <link rel="stylesheet" href="fileadmin/jquerymenu/jdMenu.css" type="text/css" /><link rel="stylesheet" href="fileadmin/jquerymenu/jdMenu.jdsharp.css" type="text/css" /><script type="text/javascript" src="fileadmin/jquerymenu/jquery-1.1.2.js"></script><script type="text/javascript" src="fileadmin/jquerymenu/jquery.bgiframe.js"></script><script type="text/javascript" src="fileadmin/jquerymenu/jquery.dimensions.js"></script><script type="text/javascript" src="fileadmin/jquerymenu/jquery.jdMenu.js"></script><script type="text/javascript" src="fileadmin/jquerymenu/jdsharp.js"></script><link href="fileadmin/jquerymenu/jdMenu.slate.css" rel="stylesheet" type="text/css" />

page.10.marks {
	MENU = HMENU
	MENU {
		#entryLevel = 1
		special = directory
		special.value = 3
		stdWrap.required = 1
		stdWrap.wrap =		
		1 = TMENU
		1 {
                      expAll = 1
                      noBlur = 1
                      wrap = <ul class="jd_menu jd_menu_slate">|</ul>
                      NO = 1
                      NO {
                            ATagTitle.field = abstract // description // title
                            wrapItemAndSub = <li>|</li>
			    stdWrap = upper
                      }
                      CUR < .NO
                      CUR = 1
		}
	2 < .1
	2.wrap = <ul>|</ul>
	2.CUR < .1.NO
	2.CUR = 1
	
	3 < .1
	3.wrap = <ul>|</ul>
	3.CUR < .1.NO
	3.CUR = 1
	
	4 < .1
	4.wrap = <ul>|</ul>
	4.CUR < .1.NO
	4.CUR = 1
	} 
}
```

In Zeile 15 muss noch die Seiten-ID der Startseite angepasst werden. Bei mir war es halt grad die 3. Nicht vergessen beim Typo3 Template die CSS-Styled-Content in das Template zu laden ;)

Dann nur noch speichern und ausprobieren.

Für Korrekturen und Hinweise wäre ich dankbar. Wie gesagt, es ist eine Quick & Dirty Variante.

Gruss,

## Antworten

### [#2](https://www.typo3.net/d/63746-tutorial-tmenu-layer-mit-jquery-lib/2) · just2b · 2007-06-11

Hi,

sehr schön, gleich ein HowTO vergeben! GIbts das wo online zum betrachten und wie schaut das mit Zuständen wie IFSUB, ACT aus? kann man das da noch einbinden?

georg

### [#3](https://www.typo3.net/d/63746-tutorial-tmenu-layer-mit-jquery-lib/3) · cooper · 2007-06-11

> **just2b schrieb:**
>
> GIbts das wo online zum betrachten

Hi Georg,

hab das grad mal online bereitgestellt.

[Demo](http://typo3.spread-link.com/index.php?id=66)

Die Zustände IFSUB und ACT hab ich jetzt noch nicht getestet, aber da die Navigation aus einer Standard ul/li Liste generiert wird, tippe ich einfach mal darauf, dass es funktioniert.

Kurzes Update zum HowTo. Die Zeile 8 aus dem Howto:

```typoscript
page.headerData.20.value = <link rel="stylesheet" href="fileadmin/jquerymenu/jdMenu.css" type="text/css" /><link rel="stylesheet" href="fileadmin/jquerymenu/jdMenu.jdsharp.css" type="text/css" /><script type="text/javascript" src="fileadmin/jquerymenu/jquery-1.1.2.js"></script><script type="text/javascript" src="fileadmin/jquerymenu/jquery.bgiframe.js"></script><script type="text/javascript" src="fileadmin/jquerymenu/jquery.dimensions.js"></script><script type="text/javascript" src="fileadmin/jquerymenu/jquery.jdMenu.js"></script><script type="text/javascript" src="fileadmin/jquerymenu/jdsharp.js"></script><link href="fileadmin/jquerymenu/jdMenu.slate.css" rel="stylesheet" type="text/css" />
```

Muss heissen:

```typoscript
page.headerData.20.value = <link rel="stylesheet" href="fileadmin/jquerymenu/jdMenu.css" type="text/css" /><script type="text/javascript" src="fileadmin/jquerymenu/jquery-1.1.2.js"></script><script type="text/javascript" src="fileadmin/jquerymenu/jquery.bgiframe.js"></script><script type="text/javascript" src="fileadmin/jquerymenu/jquery.dimensions.js"></script><script type="text/javascript" src="fileadmin/jquerymenu/jquery.jdMenu.js"></script><link href="fileadmin/jquerymenu/jdMenu.slate.css" rel="stylesheet" type="text/css" />
```

Die beiden "jdsharp"-files sind nicht in dem Demo Paket enthalten und werden dementsprechend nicht geladen.

Sorry for that ;)

---

Quelle: „Tutorial: TMENU Layer mit jquery-Lib“, typo3.net, https://www.typo3.net/d/63746-tutorial-tmenu-layer-mit-jquery-lib
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.