H
handprintdesign
Guest
Folgende Situation:
Ich habe eine horizontale Navigation mit mehreren Link-Elementen. Bitte keine Kommentare zu überflüssigen Tags, mir ist bewusst das Joomla nicht den schönsten Quelltext erzeugt :hmpf:. Mal sehen, was ich da noch mit Overwrites ausbügeln kann...
Mittels CSS bekommt jeder der Links ein entsprechendes Hintergrundbild wenn er als active augezeichnet ist oder mit der Maus überfahren wird.
Um das grafisch etwas aufzupeppen, möchte ich nun das Hintergrundbild nicht einfach beim Überfahren mit der Maus anzeigen sondern mehr oder weniger langsam einblenden und ebenso beim mouseout wieder ausblenden. Browser mit deaktiviertem JavaScript zeigen das Hintergrundbild weiterhin einfach durch die CSS-Pseudoklasse :hover an.
Zusätzlich, wenn möglich: Wird z.B. item3 mit der Maus überfahren, wird nicht nur das background-image langsam eingeblendet sondern auch das background-image vom aktiven Element (also in diesem Fall parent active item1) ausgeblendet.
Ich wär für einen praktikablen Lösungsansatz sehr dankbar, da sich meine JavaScript-Kenntnisse in Grenzen halten.
Ich habe eine horizontale Navigation mit mehreren Link-Elementen. Bitte keine Kommentare zu überflüssigen Tags, mir ist bewusst das Joomla nicht den schönsten Quelltext erzeugt :hmpf:. Mal sehen, was ich da noch mit Overwrites ausbügeln kann...
HTML:
<ul class="menu">
<li class="parent active item1"><a href="#"><span>Startseite</span></a></li>
<li id="current" class="item3"><a href="#"><span>Über Uns</span></a></li>
<li class="parent item4"><a href="#"><span>Organisation</span></a></li>
<li class="parent item5"><a href="#"><span>Fachbereiche</span></a></li>
<li class="parent item6"><a href="#"><span>Aktivitäten</span></a></li>
</ul>
Code:
#header ul.menu li.item1 a:hover, #header ul.menu li.item1.active a {
background: url(../images/item1_bg.png);
}
#header ul.menu li.item3 a:hover, #header ul.menu li.item3.active a {
background: url(../images/item3_bg.png);
}
usw.
Zusätzlich, wenn möglich: Wird z.B. item3 mit der Maus überfahren, wird nicht nur das background-image langsam eingeblendet sondern auch das background-image vom aktiven Element (also in diesem Fall parent active item1) ausgeblendet.
Ich wär für einen praktikablen Lösungsansatz sehr dankbar, da sich meine JavaScript-Kenntnisse in Grenzen halten.