Navigation FadeIn, FadeOut

ZipZek

ZipZek

Mitglied
Hi Community,
da ich immernoch versuche eine Navigation ähnlich wie bei mobilant.de zu erstellen und meine Versuche in Flash (http://www.tutorials.de/forum/flash...it-wechselnden-links-gesucht-mobilant-de.html)
kläglich gescheitert sind habe ich es mal mit HTML/CSS versucht. So weit bin ich gekommen: http://philvip.ph.ohost.de/navi/navigation.html

Jetzt fehlt nurnoch der Fade-In/Out Effekt. Ich weiß zwar dass es MooFX/Tools, Prototype, Prototip, Jquery und weiß der Geier alles gibt, aber umgehen damit kann ich nicht, da ich nicht wirklich JavaScript kann.

Kann mir da Jemand weiterhelfen? Ich wäre Demjenigen sehr verbunden ;)

Gruß,
Phil
 
Hi,

http://www.javascript-fx.com/development/elemfader/demo2.html sieht da ganz vielversprechend aus.

  • Script downloaden und im Dokumentheader aufrufen:
Code: 
<script src="JSFX_ElemFader.js" type="text/javascript"></script>
  • CSS-Regel im Stylesheet aufnehmen und ggfs. die Opacity-Werte tunen:
Code: 
.elemFaderGray {
position:relative;
filter:alpha(opacity=40); 
-moz-opacity:0.4;
display: block;
}
  • Notwendige Ergänzungen im HTML-Quelltext:
Code: 
<body onload="JSFX.fadeElemAuto()">

<ul id="nav">

        <li id="liProdukt" class="on"><a href="#" class="elemFaderGray"><span>Produkt</span></a>
        <ul>
                <li><a href="#">Brunelleschi</a></li>
                <li><a href="#">Alberti</a></li>
                <li><a href="#">Palladio</a></li>
                <li><a href="#">Michelangelo</a></li>

                <li><a href="#">Bramante</a></li>
        </ul></li>
        <li id="liLeistungen" class="off"><a href="#" class="elemFaderGray"><span>Leistungen</span></a>
        <ul>
                <li><a href="#">Mackintosh</a></li>
                <li><a href="#">Guimard</a></li>
                <li><a href="#">Horta</a></li>

                <li><a href="#">van de Velde</a></li>
        </ul></li>
        <li id="liSupport" class="off"><a href="#" class="elemFaderGray"><span>Support</span></a>
        <ul>
                <li><a href="#">Sullivan</a></li>
                <li><a href="#">Le Corbusier</a></li>
                <li><a href="#">Mies</a></li>

                <li><a href="#">Gropius</a></li>
                <li><a href="#">Yamasaki</a></li>
        </ul></li>
        <li id="liBestellen" class="off"><a href="#" class="elemFaderGray"><span>Bestellen</span></a>
        <ul>
                <li><a href="#">Venturi</a></li>
                <li><a href="#">Eisenman</a></li>

                <li><a href="#">Stern</a></li>
                <li><a href="#">Graves</a></li>
                <li><a href="#">Gehry</a></li>
        </ul></li>
        <li id="liKontakt" class="off"><a href="#" class="elemFaderGray"><span>Kontakt</span></a>
        <ul>
                <li><a href="#">Xenakis</a></li>

                <li><a href="#">Lynn</a></li>
                <li><a href="#">Diller+Scofidio</a></li>
                <li><a href="#">Zellner</a></li>
                <li><a href="#">Hadid</a></li>
        </ul></li>
</ul>

</body>
  • Fertig :-)

mfg Maik
 
Kannst mir ja eine disziplinarische Verwarnung auf's Auge drücken (wenn du in einem meiner Beiträge die gelbe/rote Karte entdeckst) :p

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück