Div-Box verschieben möglich?

[.DE]

Hey Leuts.
Natürlich ist es möglich eine Div zu verschieben, per Drag&Drop. Nun habe ich mir aber gedacht, dass es eine Starseite gibt, auf der genau mittig eine nav (divbox) liegt.
Wenn man auf eine der Piktogramme klickt, soll die Divbox langsam hochsliden und dort festsitzen, wie eine normale Navi. Danach soll er die Seite laden.
Meint ihr, das ist umsetzbar mit den folgenden 4 Möglichkeiten: HTML5, CSS3, JS, jQuery?
Anbei mal ein Bildchen zur visualisierung.

Legende
Schwarz -- Ausgangsposition
Rot -- Endposition
Blau -- Langsame Bewegung der Box
Grün -- Schnelle Bewegung der Box

Kann sich jemand vorstellen wies funktionieren könnte? Wichtig: Kein Flash!
Grüße
.DE

 

[das_micha]

klar! brauchst nichtmal html5 und css3.
jquery langt vollkommen. Das was du willst ist ein grundbefehl von jquery. schau dir mal http://api.jquery.com/animate/ an. da sind beispiele bei wie es geht.
und das laden des eigentlichen inhalts geht mit jq beispielsweise über load

 

[_linx_]

Sieh dir einmal http://weyermann.christianklauenboesch.ch an, das ist mit jQuery aufgebaut und funktioniert etwa ähnlich wie du willst

 

[.DE]

Ja richtig linx. Soetwas ähnliches!
Ich hab sowas auch schon mit jQ gefunden, nur leider habe ich bisher nicht gefunden, wie es auf Klick funktioniert...
Also: Man klickt in der Navigation denk Punkt "About" an, die Div schiebt sich nach oben und der Content wird eingeblendet.
Funktioniert sowas auch? Ich bin nicht so tief in jQuery

Danke Micha und Linx!

Edit: Hab grade gefunden das es geht, doch ich komm nicht ganz dahinter, wie genau das alles funktioniert.
Gibt es von sowas auch nen Tutorial oder sowas? :S

 

[_linx_]

$('#ein_link').click( function() {
    // dein code hier
});

http://api.jquery.com/click/

Edit: Wenn du die Div einklappen und ausklappen willst: http://api.jquery.com/toggle/

Wenn du den Text ändern willst in der Div: http://api.jquery.com/html/

 

[.DE]

Ich werd mich mal versuchen. Danke Leute!

 

[.DE]

Ich kriegs nicht hin.
Hat einer ein fertiges jQuery dafür?

Nach der Animation (also die ich oben visualisiert habe) soll die Seite /sites/portfolio.html geladen werden. :/ Funktioniert bei mir nicht.

 

[_linx_]

Also noch mehr fertig als das, was ich dir geliefert habe ist fast unmöglich...

Poste doch mal was du bis jetzt hast

 

[.DE]

Bisher leider nichts.
Ich versteh es nämlich leider nicht so ganz und die Animation über jQuery ist für mich neu. Komme nicht so ganz damit klar, da das Clickelement ein Image in einer Klasse ist und der zu animierende Element das Element <nav>. Also der komplette Container.
Irgendwie haut es bei mir nicht wirklich hin und die Zeit drängt (Dienstag Abgabe). Wäre schade, wenn ich diesen Haupteffekt auf meiner Seite aufgeben zu müssen. Vielleicht habe ich mir aber auch mal wieder zu viel vorgenommen

Grüße
.DE

 

[Schniko]

| iMac 27" i5 Quad-Core |
Nutzung für Web- und Medien-Designs.

Sagt deine Signatur.. Da solltest du dich besser in jQuery einarbeiten. Die Tipps oben sind in der Tat schon sehr gut und geben eigentlich alles her, was man braucht. Schau dir den Quelltext der Beispiele an (Tipp: öffne die jquery-demos in einem neuen Fenster, geht bei Link. Da kann man dann Code besser studieren).

Was heißt Abgabe an Dienstag? Das berühmte Hausaufgabenproblem...Sorry, aber das klingt immer so negativ mit, nach dem Motto "hier macht mal, ich hab gerade keine Lust, mich damit zu beschäftigen".

 

[.DE]

Dann hast du mich falsch verstanden.
Ich verstehe nur nicht, wie ich das ganze zusammensetzen kann mit (z.B. mehreren Durations).
Es will bei mir nicht so ganz klappen, deshalb habe ich um Rat gefragt.

Edit:
Ich habs hinbekommen. Mein Fehler war einfach, dass ich den nav-Befehl (HTML5) falsch behandelt habe und es somit schief lief.
Danke an alle für die Hilfe!