Hallo liebe Community,
Habe bereits wie verrückt gegooglet und einiges ausprobiert, jedoch den gewünschten Effekt bisher nicht erreicht =[
Und zwar bin ich gerade dabei eine Webiste zu erstellen, welche schon so gut wie fertig ist.
Alles was mir noch fehlt ist ein FadeIn - Out Effekt für die ausklappbaren Einträge in meinem Menü.
Ich bin mir ziemlich sicher, dass JQuery die Antwort ist, habe es allerdings nicht geschafft dies umzusetzen.
Habe bisher kaum Erfahrung in Javascript.
Daher möchte ich euch bitten, mir eventuell Code und Erklärung zu posten um mein Ziel zu erreichen und zu verstehen.
Es wäre schon sehr dringend, da ich unter Zeitdruck stehe :/
muchas gracias!!
HTML-Codeausschnitt (Menü):
CSS:
Habe bereits wie verrückt gegooglet und einiges ausprobiert, jedoch den gewünschten Effekt bisher nicht erreicht =[
Und zwar bin ich gerade dabei eine Webiste zu erstellen, welche schon so gut wie fertig ist.
Alles was mir noch fehlt ist ein FadeIn - Out Effekt für die ausklappbaren Einträge in meinem Menü.
Ich bin mir ziemlich sicher, dass JQuery die Antwort ist, habe es allerdings nicht geschafft dies umzusetzen.
Habe bisher kaum Erfahrung in Javascript.
Daher möchte ich euch bitten, mir eventuell Code und Erklärung zu posten um mein Ziel zu erreichen und zu verstehen.
Es wäre schon sehr dringend, da ich unter Zeitdruck stehe :/
muchas gracias!!
HTML-Codeausschnitt (Menü):
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL]http://www.w3.org/TR/html4/loose.dtd[/URL]">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Ausklappmenu</title>
<link rel="stylesheet" type="text/css" href="2d-nav.css">
<!--[if IE]>
<style type="text/css" media="screen">
html {overflow-y:scroll;}
#menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {behavior: url(csshover.htc); font-size: 100%;}
#menu ul li a {height: 1%;}
}
</style>
<![endif]-->
</head>
</style>
<body>
<div id="menu" align="right"><font face="arial" size=-1>
<ul>
<li><a href="#"><font size=+0>Privat</font></a>
<ul>
<li><a href="#">Eintrag 1</a></li>
<li><a href="#">Eintrag 2</a></li>
<li><a href="#">Eintrag 3</a></li>
</ul>
</li>
</ul>
</font></div>
</body>
</html>CSS:
Code:
#menu { width: 51%; background: #fff; }
#menu ul { list-style: none; margin: 0; padding: 0; }
#menu a, #menu h2 {
font: 15px/18px arial, helvetica, sans-serif;
display: block;
border-width: 1px; border-style: solid; border-color: #fff #fff #fff #fff;
margin: 0; padding: 2px 3px; }
#menu h2 { color: #FFFFFF; background: #FFFFFF; text-transform: uppercase; }
#menu a { color: #424242; background: #ffffff; text-decoration: none;}
#menu a:hover { color: #a00; background: #fff; }
#menu li { position: relative; }
#menu ul ul {position: absolute; top: 0; left: 100%; width: 100%; text-align:left;}
div#menu ul ul, div#menu ul li:hover ul ul { display: none;}
div#menu ul li:hover ul, div#menu ul ul li:hover ul { display: block;}
