Probleme mit fixierter NavBar (WD11)

Voenics schrieb am 27.12.2015 um 12:58 Uhr

Ich habe eine senkrecht fixierte NavBar mit Ankern auf die jeweiligen Sprungstellen einer Seite eingerichtet und das geht soweit gut. Was mich stört, ist die ständige Anzeige des ersten Menüpunktes der NavBar in der Farbe des Mouseover, obwohl die erreichte Position auf der Seite einem anderen Menüpunkt entspricht.

Mouseover-Farbänderungen sind durchaus erwünscht, auch wenn sie nach dem Anklicken nicht bleiben, aber dann sollte auch der erste Menüpunkt durch die ständige Mouseoverfarbe keine falsche Position vermitteln. 

Eigentlich wünsche ich mir, dass der jeweilige Menüpunkt mit der Mouseoverfarbe die erreichte Seitenstelle markiert - so wie es bei Links zu anderen Seiten funktioniert. Da dies aber wohl nur mit der Funktion Seiteneffekt geht - was für mich nicht in Frage kommt - wäre mir schon geholfen, wenn die Mouseoverfarbe des ersten Menüpunktes nur bei tatsächlichem Mouseover erscheint. 

Kommentare

BeRo schrieb am 27.12.2015 um 14:45 Uhr

[...] Was mich stört, ist die ständige Anzeige des ersten Menüpunktes der NavBar in der Farbe des Mouseover [...]

Bei einer "normalen" NavBar ist das so gewollt, weil die aktuell angezeigte Seite damit als aktiv gekennzeichnet wird.

Bei einer NavBar die ausschließlich Sprungziele (Anker) referenziert, passiert das nicht. Da bleiben alle Buttons inaktiv, es sei denn, Du positionierst den Mauszeiger auf einen Button (MouseOver Effekt).

[...] Eigentlich wünsche ich mir, dass der jeweilige Menüpunkt mit der Mouseoverfarbe die erreichte Seitenstelle markiert [...]

Auch das ist machbar.

Du musst dazu lediglich die MouseOver Grafik der einzelnen Buttons der NavBar in separate Ebenen legen und sie an der gewünschten Position fixieren. Dann sorgst Du mit dem Animationseffekt dafür, dass die jeweils passende Grafik eingeblendet wird, wenn der zugehörige Anker im Browser Fenster sichtbar wird.

Hier gibt's die passende online Demo dazu und hier findest Du die Projektdatei zum Download, für eigene Experimente.

Viel Erfolg

Zuletzt geändert von BeRo am 27.12.2015, 14:45, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Voenics schrieb am 27.12.2015 um 14:56 Uhr

Was soll ich sagen ! Leider kann man den Danke-Button nur einmal drücken ....

Solche Anleitungen sind genau mein Niveau Das bekomm ich hin !

Vielen Dank

Voenics schrieb am 04.01.2016 um 16:56 Uhr

Nur eine Frage noch: Gibt es eine einfache Möglichkeit, dass die eingeblendete Grafik solange bleibt, bis der nächste Anker erreicht ist ?

So wie beschrieben funktioniert es schön, nur verschwindet die Grafik, sobald der zugehörige Anker aus dem Bildschirm wandert. Bei längerem Scrollen zwischen zwei Ankern weiß man dann gar nicht, wo man sich auf der Seite befindet ......

Ich habe mir probeweise damit geholfen, die Anker so groß zu machen, dass sie aneinander stoßen .... nicht schön, aber geht. Hat jemand eine bessere Lösung ?

 

BeRo schrieb am 04.01.2016 um 17:24 Uhr

[...] Ich habe mir probeweise damit geholfen, die Anker so groß zu machen, dass sie aneinander stoßen [...]

Das ist die beste Lösung für Dein Problem.

Über die Optik der Lösung musst Du Dir keine Gedanken machen, wenn Du als Anker z. B. eine transparente- und damit für den Besucher Deiner Site unsichtbare Grafik (Balken) einbaust...

Du sollest die Grafiken (Balken) aber nicht aneinander stoßen lassen. Wenn Du sie mit ein paar hundert Pixeln Abstand anordnest, wird das Ergebnis "geschmeidiger" aussehen. Außerdem sollte der untere Balken nach unten über den Seitenrand hinausragen, damit beim Klick auf den Button "Bottom" tatsächlich der untere Seitenrand sichtbar wird. Andernfalls wird nicht ganz nach unten gescrollt...

Ich habe die Demo entsprechend geändert (klick)

Viel Erfolg

Zuletzt geändert von BeRo am 04.01.2016, 17:24, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Voenics schrieb am 04.01.2016 um 18:33 Uhr

OK, so geht's gut. Danke für den Tip.

Habe alle Anker sowie auch alle eingeblendeten Overlays jeweils in einer eigenen Ebene untergerbracht - wegen der Übersichtlichkeit. Das funktioniert, man braucht wohl nicht für jedes Overlay eine eigenen Ebene.