Hallo Leute
Da mir auf allen anderen Typo3 Foren nicht geholfen wurde, oder nicht geholfen werden konnte, versuche ich es nun hier.
Mein Problem ist, dass mein Submenu (mit einem hover Effekt) nach dem klick auf eine Seite nicht stehen bleibt. Es verschwindet wieder und dann sieht man nur noch das Hauptmenu (horizontal).
Das Menu sieht wie folgt aus:
Sub2----------------Sub4----------------Sub6----------------Sub8
Sub1----------------Sub3----------------Sub5----------------Sub7
Haupt1--------------Haupt2--------------Haupt3--------------Haupt4
usw.
Ist also ein "Drop-Up" Menu.
Im TypoScript fand ich leider auch keinen Fehler.
Hier mal das TypoScript:
page.includeCSS.file1000 = fileadmin/templates/css/menu.css
temp.NAVIGATION = HMENU
temp.NAVIGATION.special = directory
temp.NAVIGATION.special.value = 4
temp.NAVIGATION.entryLevel = 0
temp.NAVIGATION {
wrap = <div class="mainnav"> | </div>
1 = TMENU
1 {
wrap = <ul class="adxm menu">|</ul>
expAll=1
NO.wrapItemAndSub = <li>|</li>
ACT < .NO
ACT = 1
ACT.ATagParams = class="active"
}
2 = TMENU
2 {
wrap = <ul>|</ul>
NO.wrapItemAndSub = <li>|</li>
ACT < .NO
ACT = 1
}
}
Wäre toll, wenn mir jemand helfen könnte.
MfG
lood
Um dir zu helfen, müsste ich wissen, ob dein Menü mit JavaScript oder alleine über CSS funktioniert.
Am TypoScript liegt es nicht, sondern daran, dass im generierten Code nichts steht, dass dafür sorgen könnte, dass das Submenü des aktiven Hauptmenüpunkts anders behandelt wird als die anderen Submenüs.
Das Menü funktioniert bloss mit CSS.
So wird die Navi im Template aufgerufen:
<div id="navi">
<!-- ###NAVIGATION### start -->
<!-- ###NAVIGATION### ende -->
<div id="symbols_right">
<a href="index.php?id=4" style=""><img class="icons_right" src="fileadmin/images/home.png" width="15" height="15" border="0" /></a>
<a href="mailto:info@test.ch" style=""> <img class="icons_right" src="fileadmin/images/kontakt.png" width="15" height="15" border="0" /></a>
<a href="javascript:window.print()"><img class="icons_right" src="fileadmin/images/drucken.png" width="15" height="15" border="0" /></a>
<a href="#" style=""><img class="icons_right" src="fileadmin/images/dia.png" width="15" height="15" border="0" /></a>
</div>
</div>
Und hier de CSS-Teil für die Navigation:
.menu, ul.menu ul {
margin: 0;
padding-left: 17.5px;
list-style: none;
display: block;
}
.menu {
width:auto;
margin:auto;
position:relative;
}
.menu li {
position: relative;
border: 0px solid black;
margin-top: -3.25px;
padding-left: 0;
padding-bottom: -10px;
height: 20px;
}
.menu li ul {
position: absolute;
left: 0;
bottom: 20px;
width: 200px;
border: 0px solid black;
padding-left: 0;
margin-left:-999em;
}
.menu li ul ul {
position: absolute;
left:100%;
}
/* Styles for Menu Items
ul.menu li a {
display:block;
text-decoration: none;
color: #000;
height:30px;
line-height:30px;
width:98px;
padding-right: -10px;
text-align:left;
background:url(images/egrave.jpg) no-repeat 0 0;
}*/
.menu li li {
clear:left
}
.menu li:hover {
color: #ff0000;
}
/* this sets all hovered lists to current item */
.menu li.current a, .menu li:hover a, .menu li.over a, .menu li:hover li:hover a, .menu li.over li.over a, .menu li:hover li:hover li:hover a, .menu li.over li.over li.over a, .menu li:hover li a:hover, .menu li.over li a:hover, .menu li:hover li:hover li:hover a:hover, .menu li.over li li a:hover, .menu li:hover li:hover li:hover li:hover a:hover, .menu li.over li.over li.over li.over a:hover {
background-position:-30px
}
/* set dropdown to default */
li.menu li:hover li a, .menu li.over li a, .menu li:hover li:hover li a, .menu li.over li.over li a, ul.menu li:hover li:hover li:hover li a, .menu li.over li.over li.over li a {
color: red;
margin-top: 20px;
}
li.menu li:hover ul ul, ul.menu li:hover ul ul ul, ul.menu li.over ul ul, ul.menu li.over ul ul ul {
margin-left:-999em;
}
.menu li:hover ul, ul.menu li li:hover ul, ul.menu li li li:hover ul, ul.menu li.over ul, ul.menu li li.over ul, ul.menu li li li.over ul {
margin-left:0;
margin-top: 100px;
}
Hmmm, komisches CSS, sieht umständlich aus. Aber ich vermute, dass folgendes klappt: Füge im ersten Menü bei ACT hinzu
ACT.wrapItemAndSub=<li class="over">|</li>
Super, die Subnavi bleibt nun stehen. Danke!
Das Problem ist jetzt, wenn ich eine Subnavi offen hab und mit der Maus auf eine andere gehe, dann wird die erste Subnavi nicht ausgeblendet. Die bleibt solange stehen, bis die in der zweiten Subnavi ein Menupunkt ausgewählt wurde.
Kommt nun JS ins Spiel?
Greets
Dachte ich mir schon #paralyzed#
Trotzdem vielen Dank für die Hilfe 🙂
Greets
So, ich bin's nochmal..
Jetzt hab ich ein kleines Problem mit dem hover Effekt bzw. das A-Tag auf aktiv setzen.
Im Moment, wenn ich über einen Punkt(Seite) im Hauptmenu drüber fahre, leuchtet dieser auch auf. Nach dem Klicken öffnet sich das Submenu, jedoch bleibt das Hauptmenu nicht aktiv (also aufgeleuchtet). Das blöde ist nur, wenn ich dann einen Submenu-Punkt auswählen möchte, leuchten diese auf und mit dem auch der Hauptmenupunkt. Doch beim klicken wiederrum, sind alle Punkte wieder "inaktiv".
Muss man da nicht den a:active Effekt anwenden?
Greets