Hallo, ich bin neu hier, hoffe aber trotzdem auf ein wenig Hilfe.
Mein Problem ist Folgendes, ich habe ein Template gebaut für eine Typo3 Seite und als reines HTML funktioniert die Navigation zu 100%, doch sobald ich die Navigation per Typoscript Dynamisch erstellen lasse kann nur 1 Untermenü angezeigt werden beim mouseover.
Die 2. Unterebene öffnet sich nur wenn der darüberliegende Menüpunkt angeklickt wird.
Ich möchte es aber gerne so haben das beim Mouseover, wie in der HTML, das gesamte vorhandene Menü auf bzw. beim mouseout auch wieder zu geht.
Das ganze ist in der HTML ohne Javascript realisiert, aber mittlerweile nutze ich um wenigstens die 1. unterebene an zu zeigen ein einfaches Javascript.
Wie kann man dieses wahrscheinlich kleine Problem lösen?
Hier meine Scripte:
Navigation TS:
### Menü ###
lib.NAVIGATION = HMENU
###lib.NAVIGATION.special = list
###lib.NAVIGATION.special.value = 6,2,80
lib.NAVIGATION {
### Erste Ebene ###
1 = TMENU
1 {
wrap = <ul id="nav">|</ul>
expAll = 2
NO.wrapItemAndSub = <li onmouseover="show(this)" onmouseout="hide(this)">|</li>
ACT < .NO
ACT = 1
ACT.wrapItemAndSub = <li class="current">|</li>
}
### Zweite Ebene ###
2 = TMENU
2 {
wrap = <ul>|</ul>
NO.wrapItemAndSub = <li onmouseover="show(this)" onmouseout="hide(this)">|</li>
}
### Dritte Ebene ###
3 = TMENU
3 {
entrylevel
wrap = <ul>|</ul>
NO.wrap = <li onmouseover="show(this)" onmouseout="hide(this)">|</li>
}
}
Javascript Snippet im Haupttemplate:
page.headerData.40.value (
<script type="text/javascript">
//<![CDATA[
function show(element){
element.className += "hover";
}
function hide(element){
element.className = element.className = "";
}
//]]>
</script>)
Navigations CSS:
@charset "utf-8";
#navdiv {
position: relative;
top: -295px;
width: 991px;
height: 52px;
z-index: 300000;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
padding-top: 5px;
padding-bottom: 0px;
padding-left: 3px;
padding-right: 0px;
opacity: 0.9;
}
#nav li:hover {
opacity:1.0;
z-index: 300000;
}
#nav ul:hover {
opacity:1.0;
z-index: 300000;
}
#navdiv:hover {
opacity:1.0;
z-index: 300000;
}
a {
color: #333;
}
#nav {
margin: 0;
padding-top: 6px;
padding-bottom: 0px;
padding-left: 5px;
padding-right: 0px;
line-height: 100%;
border-radius: 1em;
width:972px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 110, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 110, .4);
z-index: 300000;
background: #013b54; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#006089', endColorstr='#013b54'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#006089), to(#013b54)); /* for webkit browsers */
background: -moz-linear-gradient(top, #006089, #013b54); /* for firefox 3.6+ */
border: solid 1px #014d6e;
}
#nav li {
margin: 0 1px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
z-index: 300000;
}
/* main level link */
#nav a {
font-weight: bold;
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 10px 20px;
margin: 0;
-webkit-border-radius: 0.3em;
-moz-border-radius: 0.3em;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
background: #d1d1d1; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#018cc8', endColorstr='#026e9d'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#018cc8-), to(#026e9d)); /* for webkit browsers */
background: -moz-linear-gradient(top, #018cc8, #026e9d); /* for firefox 3.6+ */
z-index: 300000;
color: #FFF;
border-top: solid 1px #029ee1;
-webkit-box-shadow: 0 1px 1px rgba(32, 32, 32, .2);
-moz-box-shadow: 0 1px 1px rgba(32, 32, 32, .2);
box-shadow: 0 1px 1px rgba(32, 32, 32, .2);
text-shadow: 0 1px 0 rgba(32, 32, 32, .8-);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
z-index: 300000;
}
#nav ul a:hover {
background: #0399d4 !important; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#04acec', endColorstr='#0186ba'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)) !important; /* for webkit browsers */
background: -moz-linear-gradient(top, #04acec, #0186ba) !important; /* for firefox 3.6+ */
z-index: 300000;
color: #fff !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
/* level 2 list */
#nav ul {
background: #ddd; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cfcfcf'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cfcfcf)); /* for webkit browsers */
background: -moz-linear-gradient(top, #fff, #cfcfcf); /* for firefox 3.6+ */
z-index: 300000;
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
/* dropdown */
#nav li:hover > ul {
display: block;
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
z-index: 300000;
}
#nav ul a {
font-weight: normal;
text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
z-index: 300000;
}
/* level 3+ list */
#nav ul ul {
left: 181px;
top: -3px;
z-index: 300000;
}
/* rounded corners for first and last child */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 4px;
-moz-border-radius-topleft: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topright: 4px;
z-index: 300000;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
z-index: 300000;
}
/* clearfix */
#nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
z-index: 300000;
}
#nav {
display: inline-block;
z-index: 300000;
}
html[xmlns] #nav {
display: block;
z-index: 300000;
}
* html #nav {
height: 1%;
z-index: 300000;
}
Das ganze sieht so im Normalzustand aus:
Bild: s10.directupload.net/…/j7wv5qgm.png
Ich hoffe das mir jemand helfen kann.
MfG KaosTux