Hallo !!
Ich habe mir aus einem Tutorial ein Javascript/Typoscript Dropdown Menü erstellt und an meine Bedürfnisse angepasst. Nun habe ich auch alles gut hinbekommen, da ich vorwiegend im Firefox arbeite. Als ich die Seite dann im Internet Explorer 7 kontrolliert habe, musste ich feststellen, dass ich Probleme habe mit 2 - 3 Punkten.
1. Will mein Menü nicht richtig laufen in beiden Browsern, und weiterhin habe ich das Problem, dass wenn ich das Doctype für IE einstelle, erst richtig Probleme auftauchen !!
Ich stelle mal die Codes hier rein damit ihr dies nachvollziehen könnt.
Hier der HTML Template Code :
<td width="904" valign="top" class="left_column">
<div id="zusatznavcontainer">
<ul>
<!-- ###ZUSATZ_NAVI### start-->
<li><a href="#">Erwachsenenbildung</a></li><!-- -->
<li><a href="#">Kinder und Eltern </a></li><!-- -->
<li><a href="#">Senioren</a></li><!-- -->
<li><a href="#">Begegnungen</a></li><!-- -->
<li><a href="#">Spielgruppe</a></li><!-- -->
<li><a href="#">Musik für Kinder</a></li><!-- -->
<li><a href="#">Mitgliederbereich</a></li><!-- -->
<!-- ###ZUSATZ_NAVI### stop-->
</ul>
</div> </td>
Dann der Typoscript Code mit dem Javascript :
tmp.ZUSATZNAVIGATION = HMENU
tmp.ZUSATZNAVIGATION {
special = directory
special.value = 8
1 = TMENU
1 {
wrap = <ul id="zusatzmenu">|</ul>
expAll = 1
NO.wrapItemAndSub = <li onmouseover="show(this)" onmouseout="hide(this)">|</li>
ACT < .NO
ACT = 1
ACT.ATagParams = class="active"
}
2 < .1
3 < .1
4 < .1
}
Und zu letzt noch das CSS dazu :
#zusatzmenu, #zusatzmenu ul {
list-style-type: none;
}
#zusatzmenu a {
display: block;
padding: 3px 10px 3px 10px;
font-weight: normal;
font-size:18px;
}
#zusatzmenu li {
padding: 0;
margin: 0;
float: left;
background-color: #0076bd;
height: auto;
width:230px;
}
/* Links auf Hauptebebe soll die Hintergrundfarbe ändern */
#zusatzmenu li.hover, #zusatzmenu li:hover {
background-color: #89b5dd;
}
/* Für Unterpunkte keine Float-Eigenschaft */
#zusatzmenu ul li {
float:none;
}
/* Links auf Unterpunkten sollen die Hintergrundfarbe ändern */
#zusatzmenu ul li.hover, #zusatzmenu ul li:hover {
background-color: #89b5dd;
}
/* Zweite Ebene */
#zusatzmenu ul {
margin:0;
padding: 0;
position: absolute;
background-color: #89b5dd;
display: none;
width: 230px;
}
/* Zweite Ebene anzeigen */
#zusatzmenu li.hover ul, #zusatzmenu li:hover ul {
display:block;
margin-left: 230px; /* Breite eines Listenelements - Überlagerung */
margin-top: -27px; /* Höhe eines Listenelements */
}
/* Dritte Ebene */
#zusatzmenu li.hover ul ul, #zusatzmenu li:hover ul ul {
display: none;
margin-left: 230px; /* Breite eines Listenelements - Überlagerung */
margin-top: -27px; /* Höhe eines Listenelements */
}
/* Dritte Ebene anzeigen */
#zusatzmenu li.hover ul li.hover ul, #zusatzmenu li:hover ul li:hover ul {
display: block;
}
/* Vierte Ebene */
#zusatzmenu li.hover ul li.hover ul ul, #zusatzmenu li:hover ul li:hover ul ul {
display: none;
}
/* Vierte Ebene anzeigen */
#zusatzmenu li.hover ul li.hover ul li.hover ul , #zusatzmenu li:hover ul li:hover ul li:hover ul {
display: block;
}
Ach ja auch noch ein CSS für den IE 7, den ich per Conditional Comment in den Head Bereich einstelle, damit nur der IE 7 angesprochen wird.
Hier der Typoscript Befehl :
page.headerData.20 = TEXT
page.headerData.20.value (
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="fileadmin/template/css/ie.css" />
<![endif]-->
)
Hier auch noch die Seite dazu damit ihr seht was ich meine :
http://web579.ceres.ibone.ch/typo3/index.php?id=7
Natürlich funtioniert er jetzt im IE da ich den CSS ins Haupt CSS genommen habe da der eingebundene Comment nicht übernommen wird.
Ich danke für jede Hilfe schon im Voraus.
Will noch anfügen, dass ich sehr begeistert bin von diesem Forum und den Usern, und im Besonderen auch von den Supportern des Forums.
Gruss Marijo
P.S.: Ach und die Hilfestellung zum Thema habe ich mir von dieser Seite geholt :
http://xhtmlforum.de/296439-post2.html
Ist eigentlich gut beschrieben und funktioniert auch so halb, aber leider nur so halb.