zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Navigation Automatisch verschieben

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.12.2013, 10:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.12.2013
Beiträge: 2
Franklin befindet sich auf einem aufstrebenden Ast
Frage Navigation Automatisch verschieben

Hallo Leute

Ich bin neu im Gebiet der Webentwicklung. Ich komme von der Desktop Applikations Entwicklung und habe mich an ein Website Projekt für einen Kollegen gewagt.

Er hat folgende Vorstellung: Auf der Startseite ist oben in der Mitte das Logo Gross zu sehen. Darunter ist das Navigationsenü. Klickt man nun auf einen der Navigationslinks dann sollte sich das logo verkleinern und das Navigationsmenü nach oben verschieben, und der Content sollte dann unterhalb des Navigations Menu ersichtlich sein.

Natürlich sollte das Logo mit einer Animation verkleinert werden.

Mein Problem ist das ich keinen Ansatz habe wie ich das am besten lösen kann.

Hat jemand einen guten Tipp wie ich das hinbekommen kann?

Danke für eure Unterstützung

Franklin
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 30.12.2013, 11:47
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.066
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Hat jemand einen guten Tipp wie ich das hinbekommen kann?
Ja, du wirst dich mit JavaScript und / oder JQery beschäftigen müssen.

Ein noch besserer Tip: Lass es sein. Solche Effekte nerven in der Regel nur und funktionieren nicht, wenn JavaScript beim Besucher blockiert ist. Und nein - kaum jemand wird extra für deine Seite JavaScript zulassen. Erfahrungsgemäß werden bei solchen Spielereien häufig zudem kleine Bildschirme bzw. Viewpoints, wie bei Smartphones und Tablets üblich, ausser acht gelassen, obwohl die heutzutage bereits über 50% der Internetsurfer benutzen.

Gruss

MrMurphy
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 03.01.2014, 09:54
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.12.2013
Beiträge: 2
Franklin befindet sich auf einem aufstrebenden Ast
Standard

Ich entschuldige mich das ich nicht schneller geantwortet habe.
Hatte über neujahr ein kleinen Skiunfall.


Danke für deine Tipps. Werde mich mal über JS und JQuery ein bisschen informieren und dann ein sehen ob wir das mit oder ohne diesen Animationen machen werden.

Gruss Franklin
Mit Zitat antworten
  #4 (permalink)  
Alt 10.01.2014, 09:00
Benutzer
neuer user
 
Registriert seit: 24.12.2013
Beiträge: 57
leex279 befindet sich auf einem aufstrebenden Ast
Standard

Schau dir mal an:
CSS3 Animations

Inzwischen sollte man das auch mit HTML5 und CSS3 hinbekommen.
Habs selber noch nicht ausprobiert, aber wenn du dich weiter informierst kriegst es vielleicht hin wie dus dir vorstellst und das OHNE JS!
Mit Zitat antworten
  #5 (permalink)  
Alt 13.01.2014, 09:56
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 485
dazzle89 wird schon bald berühmt werden
Standard

Ist auch mit reinem CSS machbar.

Das Problem wird nicht die Animation sein, sondern ein Klick-Event per CSS zu erzeugen. Und das ist meines Wissens nur mit labels und entsprechenden for-Attributen möglich.
Mit Zitat antworten
  #6 (permalink)  
Alt 13.01.2014, 23:47
Benutzer
neuer user
 
Registriert seit: 24.12.2013
Beiträge: 57
leex279 befindet sich auf einem aufstrebenden Ast
Standard

ja geht ..siehe:
Edit fiddle - JSFiddle
Mit Zitat antworten
  #7 (permalink)  
Alt 14.01.2014, 00:29
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Nee, geht nicht.
Lies dir noch mal genau die Aufgabenstellung durch.

Dein Click geht nur wenn das zu ändernde Element ein Geschwister- oder Kindelement ist, aber bei der Frage des TE handelt es sich um ein Elternelement.

Zitat:
Auf der Startseite ist oben in der Mitte das Logo Gross zu sehen. Darunter ist das Navigationsenü.
Die Antwort von MrMurphy trifft es meiner Meinung nach genau.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #8 (permalink)  
Alt 14.01.2014, 08:59
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 485
dazzle89 wird schon bald berühmt werden
Standard

@explanator:

Im Quelltest würde ja normalerweise zuerst das Logo und dahinter dann die Navigation auftauchen. So wäre das an sich nicht möglich. Daher könnte man doch mit position:absolute arbeiten und die Reihenfolge von Logo und Navi ändern, oder nicht?

Wenn man hier eine reine CSS-Lösung anwendet, wird bloß das Markup meiner Meinung nach nicht so schön sein, weil in der Naiv mit Labels gearbeitet werden muss.

Dennoch wäre jQuery wohl die schönste Lösung.
Mit Zitat antworten
  #9 (permalink)  
Alt 14.01.2014, 09:55
Benutzer
neuer user
 
Registriert seit: 24.12.2013
Beiträge: 57
leex279 befindet sich auf einem aufstrebenden Ast
Standard

ja stimmt dann gehts nicht.

Bin auch der meinung das er Jquery verwenden sollte. Ist jetzt auch nicht das aufwendigste.

Einfach mal jquery-animations googlen. Gibts beispiele wie sand am mehr.
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
animation, css, html, navigationsmenü, php

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Ausrichtung Kalender greece4u CSS 20 14.05.2012 14:32
Navigation ist nicht mittig Schokokrapfen CSS 29 20.09.2011 00:19
Problem mit Navigation safari CSS 12 20.04.2011 12:11
Float-Problem? mischaef CSS 33 20.10.2010 17:20
Javascript UL Navigation im IE6 ven CSS 7 29.04.2008 16:29


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:51 Uhr.