TYPO3-Testaccount
Testen Sie die aktuellste TYPO3-Version kostenlos und unverbindlich für einen Monat!

Jetzt testen!

Schulungen

jetzt buchen
Forum » TYPO3 CMS: TypoScript » Menüs

js menü in ts umsetzen


Autor Nachricht
Verfasst am: 04. 09. 2011 [14:21]
The_C
Themenersteller
Dabei seit: 04.05.2011
Beiträge: 46
 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...icon_cry.gif 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&quot<img src="typo3conf/ext/mm_forum//res/smilies/icon_wink.gif" alt="icon_wink.gif" />.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>
}
Profil
Verfasst am: 05. 09. 2011 [21:55]
Chrissli
Dabei seit: 19.04.2010
Beiträge: 503
 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 ???
God's in his Heaven -
All's right with the world!
ProfilICQ
Verfasst am: 05. 09. 2011 [22:15]
The_C
Themenersteller
Dabei seit: 04.05.2011
Beiträge: 46
 Danke für deine Antwort!
Ich habe das problem schon gelösticon_biggrin.gif
Profil
Verfasst am: 05. 09. 2011 [22:18]
The_C
Themenersteller
Dabei seit: 04.05.2011
Beiträge: 46
 Anscheinend wandelt das Forum meinen js Code um!
Sehr seltsam
Profil
Verfasst am: 05. 09. 2011 [22:55]
Chrissli
Dabei seit: 19.04.2010
Beiträge: 503
 Freut mich icon_smile.gif
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
God's in his Heaven -
All's right with the world!
ProfilICQ