nicht angemeldet
Montag, 4. Januar 2010
Hallo,
im nachfolgenden (stark vereinfachten) Beispiel wird eine Navigation mit Hauptmenü und Untermenü dargestellt. Das Hauptmenü ist permanent sichtbar, das Untermenü wird bei 'onload' der Seite zeitverzögert mit einem Fading-Effekt eingeblendet.
So weit funktioniert das Script in allen Browsern.
Bei 'a:hover' über einen Listenpunkt soll der jeweilige Link farbig unterlegt werden; dies klappt in Firefox, Opera und IE 6 und 7 - im IE 8 dagegen leider nicht.
Zudem ist die Schrift des per Fading-Effekt eingeblendeten Untermenüs gegenüber dem Hauptmenü 'entstellt'.
Weiß jemand Rat, wie ich den IE8 hier überreden kann, die Listenpunkte des Untermenüs bei 'mouseover' farbig zu unterlegen und die Schrift optisch ansehnlicher zu machen ?
Für alle Tipps vorab herzlichen Dank.
Hier das vollständige Script:
----------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />
<style type="text/css">
<!--
*
{
padding:0px;
margin:0px;
}
ul
{
list-style-type:none;
float:left;
margin-right:50px;
}
ul a:hover
{
background-color:red;
}
-->
</style>
<script type="text/javascript">
<!--
var dom = (document.getElementById) ? 1:0;
//
function zeige_ebene(nummer)
{
if (dom)
{
ebene = document.getElementById('menue');
listen = ebene.getElementsByTagName('ul');
z = 5;
m = 0;
for (i = 0; i < listen.length; i++)
{
if (nummer == i)
{
for (n = 0; n < 100; n++)
{
window.setTimeout("setze_eigenschaft("+n+","+nummer+")",(z*m));
m++;
}
}
}
}
}
function setze_eigenschaft(wert,nummer)
{
if (dom)
{
ebene = listen[nummer].style;
ebene.opacity = (wert/100);
if (wert > 1)
ebene.display = "block";
}
}
-->
</script>
<!--[if IE]>
<script type="text/javascript">
function setze_eigenschaft(wert,nummer)
{
if (dom)
{
ebene = listen[nummer].style;
ebene.filter = "alpha(opacity = "+wert+")";
if (wert > 1)
ebene.display = "block";
}
}
</script>
<![endif]-->
</head>
<body onload="window.setTimeout('zeige_ebene(1)',500)">
<ul>
<li><a href="#">Hauptmenü 01</a></li>
<li><a href="#">Hauptmenü 02</a></li>
<li><a href="#">Hauptmenü 03</a></li>
</ul>
<ul style="display:none">
<li><a href="#">Submenü 01</a></li>
<li><a href="#">Submenü 02</a></li>
<li><a href="#">Submenü 03</a></li>
</ul>
</body>
</html>
----------------------------------------------------------------------------
Der Martin