• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

FadeIn&Out für eine Navi

P

Philastan

Mitglied
Guten Tag,

ich suche schon seit einiger Zeit nach einer Navigation die Ähnlich wie die Navi mit dem Namen "Superfish" Demo funktioniert, mit dem einzigen unterschied, das auch das FadeOut funktioniert.

Kennt jemand eine gute Alternative?

lg

Phil
 
Dort wird ja bereits jQuery verwendet. Das kannst Du auch für ein fadeOut verwenden (Funktion animate()).
 
Wenn das funktionieren würde, hätte ich dieses Thema nicht eröffnet ;)
Es ist nicht mit dieser Navi möglich - und ich habe ebenfalls schon lange gegooglt.
 
Auf der von dir verlinkten Seite wird das JavaScript-Framework MooTools für diese Animation eingesetzt. Bei MooTools solltest Du auch eine Anleitung dafür finden.
 
So ich versuch es jetzt selber zu schreiben, da mir dieses ganze zusammengebastel von Codes als nicht wirklich förderlich erscheint.

Code: 
<script type="text/javascript">
$('#dropdown_ul').mouseover(function() {
  $('#dropdown_li').fadeIn('slow');
});
</script>

HTML: 
<ul id="dropdown_ul">
	<a href="#">abc</a>
	<li id="dropdown_li"><a href="#">abc</a></li>
        <li id="dropdown_li"><a href="#">abc</a></li>
</ul>

HTML: 
ul {
	margin:0;
	padding:0;
	z-index:1000;
	height:40px;
}

#dropdown_li {
	width:100px;
	margin-top:20px;
	overflow:hidden;
	z-index:1000;
	display:none;
}

So müsste es doch eigentlich funktionieren, das ich nach dem ich mit der Maus über "dropdown_ul" fahre "dropdown_li" angezeigt wird. Sieht jemand den Fehler? Und geht es das ich statt "#dropdown_li" einfach "li" verwende?

lg Phil
 
Erstellt im eigenen Interesse bitte durch einfaches Kopieren testbare Beispiele. Es ist mühsam, immer erst den gesamten HTML-Rahmen hinzuzubasteln und jQuery einzubinden.

HTML: 
<ul id="dropdown_ul">
    <a href="#">abc</a>
    <li id="dropdown_li"><a href="#">abc</a></li>
    <li id="dropdown_li"><a href="#">abc</a></li>
</ul>

Das erste a-Element ist an der Stelle nicht zulässig. IDs sind zudem einzigartig, dürfen also nich doppelt vergeben werden. Nutze Klassen. Oder…

Und geht es das ich statt "#dropdown_li" einfach "li" verwende?
Zum Vergrößern anklicken....

…mach das, ja.

Hier ein etwas verbessertes Beispiel. Was das erste a-Element in der Liste angeht, wusste ich nicht, wie das genau gedacht ist. Deshalb habe ich es nicht verändert.

Das Beispiel ist nicht gerade perfekt.

HTML: 
<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Meine Seite</title>
        <style type="text/css">

            ul {
                margin:0;
                padding:0;
                z-index:1000;
                height:40px;
            }

            #dropdown_ul li {
                width:100px;
                margin-top:20px;
                overflow:hidden;
                z-index:1000;
                display:none;
            }
        </style>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function () {
                $('#dropdown_ul').mouseover(function() {
                    $(this).children('li').fadeIn('slow');
                });
            });
        </script>
    </head>

    <body>

        <ul id="dropdown_ul">
            <a href="#">abc</a>
            <li><a href="#">abc</a></li>
            <li><a href="#">abc</a></li>
        </ul>

    </body>

</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben