|
|||
Interaktives Menü gesucht
Hi Leute,
ich habe eine Seite wie diese hier gemacht: https://www.hide.io/ Nun funktioniert das alles wonderbra und wenn man im Menü auf die jeweiligen Anker klickt, scrollt der Browser auch an die richtigen Stellen, aber ich hätte das gerne so wie bei HIde.io. Sprich: Wenn man scrollt, soll der auch herausfinden wo man sich gerade befindet und dort den Punkt im Menü hin setzen. Jemand ne' Ahnung ob es da was vorgefertigtes gibt, was man anpassen kann? Wäre echt toll, weil von JS hab ich nicht so viel Ahnung um das selbst zu programmieren. Lg, skrippi |
Sponsored Links |
|
|||
Hallo,
zunächst fällt mir bei https://www.hide.io/ auf, dass dort die Sprungziele nicht in der Adressbar erscheinen. Damit meine ich, dass ein Klick auf einen herkömlichen Anker, also <A href="#anker"> dazu führt, dass #anker an die URL in der Adressbar angehängt wird. So kann man diese kopieren, wo anders öffnen und landet wieder an der gleichen Stelle. Um auch mit Javascript dieses #anker zu setzen, kannst du den Befehl history.replaceState benutzen. Insbesondere, wenn das mit dem Hervorheben klappen soll, musst du die URL beim onload/während des Ladens des Dokuments interpretieren. Soviel als Tipp. Zum hervorheben musst du alle Links, die dafür in Frage kommen, durchiterieren und untersuchen, ob das aktuell aktive Sprungziel gleich dem des Links ist. Aber Achtung: im Dokument steht zum Beispiel: <A href="#anker">, aber document.getElementsByTagName('a')[richtigeNummer].href liefert dir http://dieDomain/derPfad/seite.html#anker Falls du außerdem mit Querystrings arbeitest, muss der Anker hinter dem Querystring angehängt werden, also seite.html?Qurey#anker und nicht seite.html#anker?Query Eventuell ist es hilfreich, den aktuellen Anker (in der Adressbar) und den hervorgehobenen Link zu ändern, wenn der Benutzer manuell wo anders hin scrollt. Hierfür document.onscroll = fkt bzw. addEventListener('scroll', fkt, false); verwenden. Um Links hervorzuheben, würde ich das Class-Attribut ändern, das geht mit element.classname = ... Ich hoffe, das deckt das Problem im Gröbsten ab. Geändert von MitjaStachowiak (30.10.2013 um 11:54 Uhr) |
Sponsored Links |
|
|||
Ich danke dir für die ganzen Tipps und deine Hilfe/Mühe.
Dennoch habe ich keinen Kurs in JS belegt. Ich kann zwar Sachen modifizieren aber keine kompletten Codes schreiben, dafür müsste ich viel tiefer in die Materie einsteigen. Ich werde es dann einfach nur mit Ankern machen und gut ist. Dann weiß man halt nicht immer wo man ist... |
|
|||
Warum machst du es dann nicht als normale Seiten.
Ich sehe denn Sinn irgendwie nicht darin mit Anker auf Positionen zu springen anstatt auf eine Seite zu gelangen. Der Nachteil hingegen ist, dass gerade mobile User dann unnötig Daten herunterladen müssen die sie sich sonst vielleicht gespart hätten.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Menü auf Startseite funktioniert nach FORM SUBMIT nicht mehr | Ceres82 | (X)HTML | 3 | 23.08.2013 22:00 |
Darstellungsproblem | flohpapa | CSS | 3 | 16.12.2009 09:55 |
Hilfe bei CSS Menue gesucht | CSS_Beginner | CSS | 2 | 21.09.2009 18:03 |
Umbruch in einem LI bei horizontalem Menü | M4rco | CSS | 12 | 13.10.2006 12:26 |
Navigation - Menü | T.S. | CSS | 6 | 18.02.2006 19:49 |