zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Site- und Layoutcheck
Seite neu laden wie funktioniert dieses menü?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.08.2013, 15:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.08.2013
Beiträge: 10
Hisfantor befindet sich auf einem aufstrebenden Ast
Cool wie funktioniert dieses menü?

Hallo,
ich habe diese Seite gefunden: Brushed | Responsive One Page Template
da gibt es ein sehr interessantes Menü das erst mit der seite mit nach oben scrollt und dann dort stehen bleibt. Es ist schwer zu erklären seht es euch einfach mal an. Ich würde jedenfals wissen wie es funktioniert.

Hisfantor
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.08.2013, 16: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

Das funktioniert mir Javascript und jede Menge JQuery sowie CSS und HTML.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 19.08.2013, 00:21
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.08.2013
Beiträge: 242
mymaksimus befindet sich auf einem aufstrebenden Ast
Standard

Das ganze könnte man ganz ohne jquery nur mit css machen. stichwort: css transitions, css animations
Mit Zitat antworten
  #4 (permalink)  
Alt 19.08.2013, 17:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.08.2013
Beiträge: 10
Hisfantor befindet sich auf einem aufstrebenden Ast
Standard

kannst du auch sagen wie genau
Mit Zitat antworten
  #5 (permalink)  
Alt 19.08.2013, 23:30
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.08.2013
Beiträge: 242
mymaksimus befindet sich auf einem aufstrebenden Ast
Standard

Also erstmal liest du dir dashier durch.

Und dann versuch folgendes zu verstehen:
Du hast drei bereiche, ein menue,(oben) ein footer (unten) und den content (inder mitte). So. Im content sind dann verschiedene duvs mit "contents" sprich startseite, impressum, forum, in jeweils einem div. Jedes dieser duvs hat eine margin-top: -3000px; und die klasse "lala"
Wenn du nun auf einen menue punkt klickst bekommt das entsprechende div (mit js natuerlich) die klasse "lala visible", welche in css dann margin-top: 0; hat, und alle anderen divs die klasse "lala" (damit wird die aktuell sichtbarr auch wieder nach oben geschmissen.) Ausserdem hat die klasse "lala" die trnasition eingenschaften. (Transition: all, 2s; mit jedem praefix.)

Das ganze ist schwer zu erklaeren, und ich bin am handy... aber im kleinformat habe ich das jemandem schonmal erklaert, das war allerdings ein photo slideshow. Vielleicht kannst du auch etwas damit anfangen, wenn ich die jsfiddle finde... wsrte bitte..
Mit Zitat antworten
  #6 (permalink)  
Alt 19.08.2013, 23:32
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.08.2013
Beiträge: 242
mymaksimus befindet sich auf einem aufstrebenden Ast
Standard

Ok ich habs: hier. Das ist zwar verbuggt, aber es zeigt die funktionsweise, und ich kann das beim besten willen nicht am handy richtig machen.

Iel glueck und spass beim designen
Mit Zitat antworten
  #7 (permalink)  
Alt 21.08.2013, 17:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.08.2013
Beiträge: 10
Hisfantor befindet sich auf einem aufstrebenden Ast
Standard

Ok die Seite hab ich gelesen aber ich wüsste nicht wie mich das weiter bringen sollte.
Mit Zitat antworten
  #8 (permalink)  
Alt 21.08.2013, 21:46
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

@mymaksimus der Slider war nicht gefragt. Das Menü war der Punkt.

Folgendes: das Menü ist ein stinknormales Element. Wenn gescrollt wird und man mit dem Menü den oberen Rand erreicht wird diesem eine Klasse zugewiesen, die dann über CSS mit einer fixierten Positionsangabe festgesetzt wird. Benutzt wird dafür Waypoints (jQuery Waypoints)
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
  #9 (permalink)  
Alt 22.08.2013, 20:14
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.08.2013
Beiträge: 242
mymaksimus befindet sich auf einem aufstrebenden Ast
Standard

Okay er meinte das.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 26.08.2013, 21:55
Benutzerbild von lottikarotti
Ein ♥ für's Web
XHTMLforum-Mitglied
 
Registriert seit: 18.04.2012
Ort: Karlsruhe
Beiträge: 396
lottikarotti wird schon bald berühmt werden
Standard

Nabend,

hier mal eine simple jQuery-Variante: Fixierte Navigation mit jQuery

Beste Grüße,
lotti
__________________
Empfehlenswerte Links:
jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
css, javascript, seitenanalyse


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
html-css Menü funktioniert nicht in IE7 und IE6 acdc CSS 1 30.01.2011 17:50
CSS Menü auf Internet Explorer abstimmen raphi156 CSS 33 22.12.2010 10:10
bewegliche Fussleiste wenn Menü afgeklappt wird pauer CSS 11 02.06.2009 14:36
Umbruch in einem LI bei horizontalem Menü M4rco CSS 12 13.10.2006 11:26


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:21 Uhr.