Navigation wie auf iwc.com mit iQuery?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
ansprechen
antwort
beispiel
code
display
effekt
empfehlen
funktion
grund
helfen
http
kontrollieren
navigation
nummer
paar
problem
queue
software
url
vorhaben
-
Hallo
Wie bekomme ich so eine Navigation wie auf iwc.com hin. Ich möchte auch, dass wenn man in über den Text oder ein Bild fährt, dass ein Tag nach unten hervor kommt. Könnt ihr mir ein Tutorial empfehlen, Link, Code oder Hilfestellung geben? Natürlich bin nicht ganz neu auf dem Gebiet jQuery. Wahrscheinlich brauche ich so was ähnliches:
$(document).ready(function(){ $("a").click(function(){ $(this).blur(); }); $("navi").mouseover(function(){ $(this).stop().animate({height:'150px'},{queue:false, duration:600,}) }); $("navi").mouseout(function(){ $(this).stop().animate({height:'50px'},{queue:false, duration:600,}) }); });
Aber genau fehlt mir das Wissen. (wie z.B so ein Effekt heißt)
Über eine Antwort würde ich mich freuen. (auch jede Anregung kann mir helfen)
Vielen Dank JU -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Der Effekt heißt Slider-Effekt. Naja Tutorials kann ich dir leider keine Empfehlen da ich diese Effekte immer aus der Seite rauskopier und an meine Bedürfnisse anpass.
Aber vom grund her wird das wie folgt realisiert: Du musst einfach einen Link in deine Seite einbauen und mit einem mouse-hover-Effekt ansprechen. Dann brauchst du eben die Funktion welche eine solchen Effekt erzeugt. Man muss eben noch kontrollieren welchen div man aufklappen will.
Gruß S.Brosch -
software-brosch schrieb:
Der Effekt heißt Slider-Effekt. Naja Tutorials kann ich dir leider keine Empfehlen da ich diese Effekte immer aus der Seite rauskopier und an meine Bedürfnisse anpass.
Aber vom grund her wird das wie folgt realisiert: Du musst einfach einen Link in deine Seite einbauen und mit einem mouse-hover-Effekt ansprechen. Dann brauchst du eben die Funktion welche eine solchen Effekt erzeugt. Man muss eben noch kontrollieren welchen div man aufklappen will.
Gruß S.Brosch
Danke für deine Antwort. Slider? Heißt auch der Effekt in der Naviagtion Slider?
Aber vielen Dank für die Anleitung, werde ich mal probieren. -
Hier hast du ein paar Beispiele: http://www.1stwebdesigner.com/css/36-eye-catching-jquery-navigation-menus/
Die Nummer 9 trifft dein Vorhaben ziemlich gut allerdings möchtest du das ganze ja nach unten öffnen, dürfte aber eigentlich kein Problem sein. Hoffe es hilft dir eventuell weiter, ansonsten hilft dir Google sicherlich auch noch.
Gruß S.Brosch -
software-brosch schrieb:
Hier hast du ein paar Beispiele: http://www.1stwebdesigner.com/css/36-eye-catching-jquery-navigation-menus/
Die Nummer 9 trifft dein Vorhaben ziemlich gut allerdings möchtest du das ganze ja nach unten öffnen, dürfte aber eigentlich kein Problem sein. Hoffe es hilft dir eventuell weiter, ansonsten hilft dir Google sicherlich auch noch.
Gruß S.Brosch
Vielen Dank für die Antwort. Ich bin bis jetzt weiter gekommen. Ein kleines Problem habe ich aber noch:
Ich möchte eine Verzögerung einbauen, aber wo hin soll ich das .delay() hinsetzen?Bei mir funktioniert es dann immer nicht:
$(document).ready(function(){ $(".navi").click(function(){ $("#sub").blur(); }); //When mouse rolls over $(".navi").mouseover(function(){ $("#sub").stop().animate({height:'300px'},{duration:600,}) $("#sub").style.display="block"; }); //When mouse is removed $(".navi").mouseout(function(){ $("#sub").stop().animate({height:'0px'},{queue:false, duration:600, }) $("#sub").style.display="none"; }); });
Wenn du mir helfen könntest wäre das super!
JU -
trueweb schrieb:
Wieso verwendest du nicht slideDown() und slideUp?
Wie würde das dann bei meinem Beispiel aussehen? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage