1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Navigationsmenü beim scrollen oben fixieren

Dieses Thema im Forum "Design" wurde erstellt von Cowboy of Bottrop, 25. Februar 2016.

Schlagworte:
  1. Cowboy of Bottrop

    Cowboy of Bottrop Well-Known Member

    Registriert seit:
    14. Februar 2007
    Beiträge:
    122
    Zustimmungen:
    0
    Hallo Leute,

    ich bin im Netz bereits öfter über (WordPress)Seiten gestolpert, bei denen das Menü horizontal unter einer Headergrafik liegt und mit hochschrollt, dann aber am oberen Bildrand fixiert wird und so immer sicht- und klickbar ist. Wie wird das umgesetzt? Mit reinem CSS? Oder braucht man da JS für?

    Auf der Seite, auf ich das gerne umsetzen würde, müsste ich wohl den div#header-menu-wrap ansprechen, wenn euch das hilft. Diese ID finde ich im CSS 3x:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Das ist der Theme-Standard, bei dem das Menü oben aus dem Bild verschwindet.

    Wenn ihr mir verraten könnt, wie ich das Menü im sichtbaren Bereich halte, wäre das eine feine Sache.

    LG,
    Markus aka Cowboy
     
  2. maxe

    maxe WPDE-Team
    Mitarbeiter

    Registriert seit:
    1. Mai 2008
    Beiträge:
    18.536
    Zustimmungen:
    95
    bring mal einen Link zum Blog!
     
  3. SirEctor

    SirEctor WPDE-Team
    Mitarbeiter

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    10.730
    Zustimmungen:
    140
    Das wird für gewöhnlich per JS bzw. jQuery umgesetzt.

    Mit Javascript sähe das so in etwa aus
    PHP:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Sobald der Div oben angekommen ist, bekommt der Div eine zusätzliche Class, die dann per CSS gestyled werden kann ( z. B. mit position:fixed; )
     
  4. Cowboy of Bottrop

    Cowboy of Bottrop Well-Known Member

    Registriert seit:
    14. Februar 2007
    Beiträge:
    122
    Zustimmungen:
    0
    @maxe Es geht um diese Seite: http://goo.gl/7Jp78i

    @SirEctor Danke, muss ich mir mal anschauen. Mit JS und jQuery habe ich bislang nicht viel gemacht.

    LG,
    Markus aka Cowboy
     
  5. Cowboy of Bottrop

    Cowboy of Bottrop Well-Known Member

    Registriert seit:
    14. Februar 2007
    Beiträge:
    122
    Zustimmungen:
    0
    Eine Frage noch, SirEctor, kommt der Code in den Header der Seite? Also vor </head>? Oder könnte man das auch in den Footer packen? Genau so, wie es oben steht, erfüllt es zumindest im Header seine Funktion nicht.

    PHP:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Danke und LG,
    Markus aka Cowboy
     
    #5 Cowboy of Bottrop, 26. Februar 2016
    Zuletzt bearbeitet: 26. Februar 2016
  6. Cowboy of Bottrop

    Cowboy of Bottrop Well-Known Member

    Registriert seit:
    14. Februar 2007
    Beiträge:
    122
    Zustimmungen:
    0
    Nun gut, ein bisschen ergänzt und mit jQuery, schon funktioniert es:
    PHP:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Ich habe auch festgestellt, dass die anzusprechende ID #nav ist, die im CSS aber auch auf die Breite festgelegt werden muss. Das Script rufe ich im Footer auf. Bis hier her schon mal Danke für die Denkanstöße.

    Was mich noch stört: Die Navigation verschwindet bei angemeldeten Usern hinter der Adminbar. Wie lässt sich das einstellen, dass die Navigation unter der Adminbar hängen bleibt? Trotz des Wissen, dass ich im PHP mit is_admin_bar_showing() die Anzeige der Adminbar abfragen kann, fehlt mir die Idee...

    LG,
    Markus aka Cowboy
     
  7. dbeyer14

    dbeyer14 Member

    Registriert seit:
    12. Oktober 2015
    Beiträge:
    15
    Zustimmungen:
    0
    Na prima. Und ich will meins wegbringen und es gelingt nicht. Wer kann mir einen Tipp geben, wo ich das Menü verschwinden lassen kann?
    Theme: Zerif Lite
    Link: https://www.ghostwriter-arbeiten.de/


    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
    #7 dbeyer14, 27. Februar 2016
    Zuletzt von einem Moderator bearbeitet: 27. Februar 2016
  8. maxe

    maxe WPDE-Team
    Mitarbeiter

    Registriert seit:
    1. Mai 2008
    Beiträge:
    18.536
    Zustimmungen:
    95
    Soweit ich weiß bekommt die wp admin-bar einen z-index von 99999, also müsstest du deinen z-index dementsprechend anpassen.
     
  9. helix

    helix Well-Known Member

    Registriert seit:
    28. Juli 2011
    Beiträge:
    1.808
    Zustimmungen:
    26
    Noch einfacher. Wenn dein Theme die WP body_class eingebunden hat, hat <body> bei eingeloggten Benutzern zusätzlich die Klasse .logged-in.
    Also kannst du dein css entsprechend ergänzen. Die Definition für nicht eingeloggte Benutzer bleibt stehen. Und drunter kommt die genauere Definition für die eingeloggten:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    wobei xz für die Höhe der Adminbar steht. Weiß nicht auswenig, wieviel das ist, kann sein, 80px.

    Gruß
    helix

    @dbeyer14: kannst du für deine Frage bitte einen Extra-Thread aufmachen? Wird hier sonst sehr unübersichtlich. Danke.
     
  10. Cowboy of Bottrop

    Cowboy of Bottrop Well-Known Member

    Registriert seit:
    14. Februar 2007
    Beiträge:
    122
    Zustimmungen:
    0
    Super! Das war genau das Richtige, helix. Vielen Dank!

    Die Höhe der Adminbar ist übrigens 32px.

    @maxe: Wenn ich mich nicht irre, würde ich mit einem angepassten z-index das Menü über die Adminbar legen. Das ist jedoch nicht gewünscht, weil auch unerfahrene Benutzer an der Seite mitarbeiten und irritiert wären, wenn diese Leiste da oben (würden die sagen :-o) plötzlich nicht mehr da ist.

    LG,
    Markus aka Cowboy
     
  11. SirEctor

    SirEctor WPDE-Team
    Mitarbeiter

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    10.730
    Zustimmungen:
    140
    Ich blende mir die Admin-Leiste immer direkt aus und würde mich wundern, warum das Menü nicht ganz oben sitzt. Mit der Lösung wundert sich also immer jemand, aber ich denke für euren Bereich ist das vertretbar.
     
  12. helix

    helix Well-Known Member

    Registriert seit:
    28. Juli 2011
    Beiträge:
    1.808
    Zustimmungen:
    26
    Grins. Ja, ich hatte mir überlegt, ob ich empfehlen soll, die Adminbar generell fürs Frontend auszublenden (geht über die functions.php). Aber irgendwie hatte ich den Eindruck, dass das in dem Fall (noch weitere User beteiligt) zu Irritation führen könnte.

    Evtl. wäre noch auszuchecken welche Kombination von body-classes eigentlich ausgegeben wird, wenn jemand in seinem User-Profil die Adminbar ausgeblendet hat. Falls welche von den unerfahreneren Benutzern überraschend schnell Erfahrung sammelt – was ja prinzipiell wünschenswert wäre …

    Gruß
    helix

    Ergänzung: und danke für die 32 Pixel. 80 wäre wohl etwas mächtig …
     
  13. Cowboy of Bottrop

    Cowboy of Bottrop Well-Known Member

    Registriert seit:
    14. Februar 2007
    Beiträge:
    122
    Zustimmungen:
    0
    Das ist das schöne an WordPress, es gibt viele Möglichkeiten. Derzeit wird niemand der Benutzer die Adminbar ausblenden, was künftig wird, keine Ahnung. Ich persönlich nutze sie gern.

    Der Frage, welche Klassen WP setzen, sollte man in der Tat mal nachgehen.

    LG,
    Markus aka Cowboy
     
    #13 Cowboy of Bottrop, 28. Februar 2016
    Zuletzt bearbeitet: 28. Februar 2016
  14. Cowboy of Bottrop

    Cowboy of Bottrop Well-Known Member

    Registriert seit:
    14. Februar 2007
    Beiträge:
    122
    Zustimmungen:
    0
    Hab mir mal den erzeugten Seitenquelltext angesehen. Bei eingeblendeter Adminbar bekommt der Body auch die Klasse "admin-bar", also wähle ich diese aus, statt "logged-in". Damit ist die Eventualität, dass jemand die Adminbar ausblendet, auch abgedeckt.

    LG,
    Markus aka Cowboy
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden