mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Di 23.04.2024 23:16 Benutzername: Passwort: Auto-Login

Thema: Tabnavigation animieren vom 14.03.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Tabnavigation animieren
Autor Nachricht
skate-rock
Threadersteller

Dabei seit: 29.08.2003
Ort: Osnabrück
Alter: -
Geschlecht: Männlich
Verfasst Fr 14.03.2008 12:20
Titel

Tabnavigation animieren

Antworten mit Zitat Zum Seitenanfang

Tach!

Ich habe eine Listennavigation die animiert werden soll.
Das funktioniert folgendermaßen: ein background-image befindet
sich hinter jedem link. dieses soll man erst sehen, wenn man
mit der maus drüber geht. So weit, so gut:

Code:
ul li a.menu { width:110px; background-image:url(img/navi/startbg.png); background-repeat:no-repeat; background-position:0 -47px; }
ul li a.menu:hover { background-image:url(img/navi/startbg.png); background-repeat:no-repeat; background-position:0 0; }


Dann sieht der Navipunkt aus wie ein hängender Reiter. Nun hätte
ich das ganze aber gerne einfach fließender und nicht einfach so
abgehackt, deshalb denke ich, das Ganze sollte doch eigentlich relativ
einfach mit jQuery machbar sein, oder?

Ich möchte praktisch, dass das background-image von oben (-47px)
nach unten (0) "reinfährt" oder irgendwie fadet.

Jemand Ahnung von jquery und kann mir sagen wie ich das hinbekomme? Lächel

Bin jetzt schon sehr dankbar!

Gruß
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
pixelpapst303

Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht: Männlich
Verfasst Fr 14.03.2008 12:28
Titel

Antworten mit Zitat Zum Seitenanfang

dafür musst du nicht zwingend gleich auf jquery und co springen... kleines eigenes js reicht auch...

Code:

document.getElementById("Navipunkt").style.backgroundPosition = "0px "+xyz+"px";


und xyz lässte dann in ner schleife von 0 bis -47 laufen... müsste klappen
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 14.03.2008 12:38
Titel

Antworten mit Zitat Zum Seitenanfang

http://www.hesido.com/web.php?page=animatedmenus
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
skate-rock
Threadersteller

Dabei seit: 29.08.2003
Ort: Osnabrück
Alter: -
Geschlecht: Männlich
Verfasst Fr 14.03.2008 12:41
Titel

Antworten mit Zitat Zum Seitenanfang

danke schonmal! leider habe ich null ahnung von JS & Co, deshalb
bastel ich mir das alles immer aus schnippseln zu recht. so kann ich mit
deinem JS code leider bisher nichts anfangen.. Grins

jQuery wollte ich deshalb verwenden, weil es auf der seite eh schon
läuft, daher dachte ich es wäre vllt sinnvoll darauf aufzuspringen. um
vielleicht nochmal zu zeigen was ich gerne hätte: http://www.webdesignerwall.com/demo/jquery/animated-hover1.html

nur möchte ich nicht das die gelbe box darüber einfadet, sondern
stellt euch enfach vor, dass stattdessen das gleiche mir dem hintergrund
der blauen menüpunkte passiert. leider bekomme ich den jquery code
nicht umgestrickt.. *Schnief*

//@m: schau ich mir gerade mal an!

danke schonmal!


Zuletzt bearbeitet von skate-rock am Fr 14.03.2008 12:43, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
SURE612

Dabei seit: 02.12.2005
Ort: Bärlin / CB
Alter: -
Geschlecht: Männlich
Verfasst Fr 14.03.2008 13:00
Titel

Antworten mit Zitat Zum Seitenanfang

das kann für vieles genommen werden
http://demos.mootools.net/Fx.Morph

aber wenn du sagst, keine js kenntnisse is etwas schwierig
(ich habe aber auch nicht viel und es trotzdem benutzt)
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen Bild animieren???
Logo animieren
Bild animieren..
Linien Animieren
[JS/CSS] CSS-Hover mit JS animieren?
Buttonreihe animieren
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.