---
title: "js menü in ts umsetzen"
url: "https://www.typo3.net/d/107122-js-menue-in-ts-umsetzen"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage","JavaScript & AJAX"]
created: "2011-09-04"
last_reply: "2011-09-05"
replies: 4
solved: false
page: 1
pages: 1
lang: "de"
---

# js menü in ts umsetzen

TYPO3 › Menüs · 4 Antworten · gestartet 2011-09-04

## Eröffnungsbeitrag

**The_C** · 2011-09-04 · [Beitrag #1](https://www.typo3.net/d/107122-js-menue-in-ts-umsetzen/1)

hallo,
habe bei der umsetzung eines js menüs probleme funktioniert einwandfrei ohne typo3 leider nicht mit.

bei einem klick auf den ersten menüpunkt sollte sich das untermenü offnen statdessen öffnen sich alle menüpunkte...:'( irgendwas mache ich da im ts falsch!

für das menu habe ich im tv die <ul class="menu"> auf (inner) gemapt und natürlich mit dem typoscript objektpfad versehen.
ich hoffe ich habe euch genügend infos gegeben um mir bei dem problem zu helfen.

**danke schon mal jetzt für eure hilfe...**

```html
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="de" lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
<!--
.menu {
	width: 250px; 
	padding: 20px 0 0 0px; 
	background: transparent;
}

.menu .menuheader { 
	font: bold 14px Verdana, Arial, Helvetica;
	color: white;
	background: red;
	margin-bottom: 10px;
	text-transform: uppercase;
	padding: 4px 0 4px 30px;
	cursor: pointer;
}

.menuheader.active {
	background-color:#749200;
}

.menu ul{
	font: 13px Verdana, Arial, Helvetica;
	list-style-type: none;
	margin: 0;
	padding: 0;
	margin-bottom: 8px;
	display: none;
}

.menu ul li{
	padding-bottom: 0px;
}

.menu ul li a{
	color: #3A3A3A;
	/*background: url(arrowbullet.png) no-repeat center left;*/
	display: block;
	padding: 3px 0;
	padding-left: 40px; 
	text-decoration: none;
	font-weight: bold;
	border-bottom: 1px dotted #3A3A3A;
	font-size: 90%;
}

.menu ul li a:hover {
	color: #2e7d53;
	background-color: #E2FCDE;
}

.menuheader:hover {
	background: blue;
}

/* 3tes Menü Level*/

.menu ul ul{
	font: 13px Verdana, Arial, Helvetica;
	list-style-type: none;
	margin: 0 0 0 0px;
	padding: 0;
	margin-bottom: 8px;
}

.menu ul ul a {
	color: #3A3A3A;
	display: block;
	padding: 3px 0;
	padding-left: 50px; 
	text-decoration: none;
	font-weight: normal;
	border-bottom: 1px dotted #3A3A3A;
	font-size: 90%;
}
-->
</style>

<script type="text/javascript" src="jquery-1.6.2.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
	$('.menu li').click(function(event) {
		event.stopPropagation();
		$(this).children("h3, h4, h5, h6, h7, h8, a").toggleClass('active');
		$(this).children('ul').slideToggle();
	});
});
</script>

</head>

<body>
    
<ul class="menu">
<li>
<h3 class="menuheader">Hauptnavi 1</h3>
<ul>
<li>
<a href="#">Unternavi 1</a>
<ul>
<li><a href="#">Unternavi 1.1</a></li>
<li><a href="#">Unternavi 1.2</a></li>
<li><a href="#">Unternavi 1.3</a></li>
</ul>
</li>
      
<li><a href="#">Unternavi 2</a></li>
</ul>
</li>
<li>
<h3 class="menuheader">Hauptnavi 2</h3>
<ul>
<li>
<ul>
<li><a href="#">Unternavi 2.1</a></li>
<li><a href="#">Unternavi 2.2</a></li>
</ul>
</li>
<li><a href="#">Unternavi 2</a></li>
</ul>
</li>
</ul>

</body>

</html>
```

```typoscript
lib.nav = HMENU
lib.nav {
  wrap = <li>|</li>
  1 = TMENU
  1 {
    expAll = 1
    noBlur = 1
    NO = 1
    NO {
      allWrap = <h3 class="menuheader">|</h3>
      doNotLinkIt = 1
    }
  }
  2 = TMENU
  2 {
    expAll = 1
    noBlur = 1
    wrap = <ul>|</ul>
    NO = 1
    NO {
      wrapItemAndSub = <li>|</li>      
      ACT < .NO
      ACT.ATagParams = class="aktiv"
    }
  }
  3 < .2
  3.wrap = <ul>|</ul>
}
```

## Antworten

### [#2](https://www.typo3.net/d/107122-js-menue-in-ts-umsetzen/2) · Chrissli · 2011-09-05

Hallo The_C,

kann dir leider so nicht helfen,
da sich das ganze SEHR schlecht liest.

Da du aber eine Version ohne Typo3 zu haben scheints,
die funktioniert, würde ich an deiner Stelle mal den Output
von Typo3 damit vergleichen und sehen was bei Typo3 anders ist.

Evtl. ist etwas falsch gewrappt oder eine CSS-Klasse, -ID o.ä
fehlt oder ist falsch.

BTW:
Ist das ein Fehler des Forums

```html
$(this).children("h3, h4, h5, h6, h7, h8, a&quot<img src="typo3conf/ext/mm_forum//res/smilies/icon_wink.gif" alt="icon_wink.gif" />.toggleClass('active');
```

oder hast du das wirklich so im HTML-Stehen ???

### [#3](https://www.typo3.net/d/107122-js-menue-in-ts-umsetzen/3) · The_C · 2011-09-05

Danke für deine Antwort!
Ich habe das problem schon gelöst:D

### [#4](https://www.typo3.net/d/107122-js-menue-in-ts-umsetzen/4) · The_C · 2011-09-05

Anscheinend wandelt das Forum meinen js Code um!
Sehr seltsam

### [#5](https://www.typo3.net/d/107122-js-menue-in-ts-umsetzen/5) · Chrissli · 2011-09-05

Freut mich :)
Es gibt da unten rechts einen Button,
damit sagt man dem Thread => GELÖST,
dann muss da keiner mehr drüber nachdenken.

Schönen abend dir

---

Quelle: „js menü in ts umsetzen“, typo3.net, https://www.typo3.net/d/107122-js-menue-in-ts-umsetzen
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.
