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