✔ Animiertes Menü

Status
Nicht offen für weitere Antworten.
Hallo,

ich würde es ungefähr so gestalten.


HTML: 
<script language="JavaScript">
function mouse_over(id)
{
document.getElementById('default').style.display = none;
document.getElementById(id).style.display = block;
}
function mouse_out(id)
{
document.getElementById('default').style.display = block;
document.getElementById(id).style.display = none;
}
</script>

<div>
<a href="#" onMouseOver="mouse_over('fussball');" onMouseOut="mouse_out('fussball');">Fussball</a>
<a href="#" onMouseOver="mouse_over('tennis');" onMouseOut="mouse_out('tennis');">Tennis</a>
<div>

<div>
<div id="default" style="display:block;">&nbsp;</div>
<div id="fussball" style="display:none;">1.Bundesliga 2.Bundesliga...</div>
<div id="tennis" style="display:none;">bla bla...</div>
</div>

tobee
 
Ok,
danke schon mal.
Könntest du mir das vielleicht noch ein wenig genauer erläutern?

Danke

//edit 1

Danke Gumbo.
Das sieht gut aus und ist auch gut erklärt.

Ich bedanke mich.

Gruß
Moleman


//edit 2

Folgendes:
Ich hab das Menü jetzt soweit voran:

http://www.csc-hollen.de/ftc/menutest.htm

So jetzt, habe ich da allerdings einen Fehler drin, weil er die Menüpunkte von der Kategorie Fussball nur anzeigt, aber die von Aktuelles nicht, obwohl ich diese auch eingetragen habe.
Warum?

Gruß
Reno
 
Das Submenü wird schon angezeigt, nur liegt es unter dem nachfolgenden Submenü und ist durch die Hintergrundfarbe verdeckt bzw. unsichtbar ;)
 
re: Animiertes Menü

Und was genau ist falsch im Quellcode?
Ich komm da auch nach 1/2 Jahr nicht weiter.

Danke
Moleman
 
re: Animiertes Menü

Ich komme da auch nicht weiter, da das zuletzt verlinkte Dokument nicht mehr erreichbar ist.
 
re: Animiertes Menü

Ok dann poste ich hier den Quellcode:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="menu.css" rel="stylesheet" type="text/css">
</head>

<body>
 <div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Aktuelles</a>

<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">News</a></li>
<li><a href="#">Termine</a></li>
<li><a href="#">FTC Huus</a></li>
</ul>


<li><a href="#" id="current">Fussball</a>

<ul id="subnavlist">
<li><a href="#" id="subcurrent">I.Herren</a></li>
<li><a href="#">II.Herren</a></li>
<li><a href="#">A-Jgd</a></li>
<li><a href="#">B-Jgd</a></li>
<li><a href="#">C-Jgd</a></li>
<li><a href="#">D-Jgd</a></li>
<li><a href="#">E-Jgd</a></li>
<li><a href="#">F-Jgd</a></li>
<li><a href="#">G-Jgd</a></li>
</ul>

</ul>
</div>
</body>
</html>

CSS-Datei:
HTML: 
/* CSS Document */
 #navcontainer { }
#navcontainer a { text-decoration: none;
font-family:Verdana, Arial, Helvetica, sans-serif;}


#navcontainer ul
{
padding: 0;
margin: 0;
list-style-type: none;
position: relative;
}

#navcontainer li { display: inline; }

/*1st level elements*/
#navcontainer ul
{
border-top: 0px solid #36c;
border-bottom: 1px solid #000000;
background-color:#666666;
padding: 1px 0;
margin-bottom: 0em;
}

#navcontainer li { margin: 0 0 0px; }

#navcontainer ul a,
#navcontainer ul a:link,
#navcontainer ul a:visited
{
background-color: #666666;
border: 0px solid #000000;
color: white;
padding: 0px 5px;
font-size:13px;
}

#navcontainer ul a:hover,
#navcontainer ul a:focus
{
background-color:#950000;
border: 0px solid black;
color: white;
}

/*current Link*/
#navcontainer ul a#current,
#navcontainer ul a#current:link,
#navcontainer ul a#current:visited { font-weight: bold; }

/*Second and subsequent levels*/
#navcontainer ul ul
{
font-size: 80%;
position: absolute;
top: 19px;
left: 0;
width: 100%;
border-top: none;
background-color:#950000;
}

#navcontainer ul ul li { display: inline; }

#navcontainer ul ul a,
#navcontainer ul ul a:link,
#navcontainer ul ul a:visited
{
background-color:#950000;
border: 0px solid #95b1bb;
color: white;
}

#navcontainer ul ul a:hover,
#navcontainer ul ul a:focus
{
background-color:#950000;
border: 0px solid black;
color: white;
}

/*current Link*/
#navcontainer ul ul a#subcurrent,
#navcontainer ul ul a#subcurrent:link,
#navcontainer ul ul a#subcurrent:visited { font-weight: bold; }

Das Problem ist, dass er die Unterkategorie des 2ten Menüpunktes setzt und den ersten gar nicht anzeigt.

Gruß
Moleman2
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück