Menü oberhalb des Hauptmenüs

  • Hallo Mario,


    wenn ich irgendwo fündig werden sollte, dann ganz sicher hier, Für (m)ein neues Projekt hätte ich gerne ein Hauptmenü, das dem der Website http://www.vodafone.de (ähnlich bei http://www.telekom.de) entspricht. Also:


    1. Ganz oben eine Auswahl (in meinem Fall: Privatkunden, Firmenkunden, Kundenportal)

    2. Darunter - nahtlos anschließend - das klassische (Zeta-)Hauptmenü

    3. Scrollt man hinunter, verschwindet das obere Menü (1.)


    Du hast das recht ähnlich schon umgesetzt: https://www.zella.de/v19-2/ferienwohnungen.html Wie hast Du das hinbekommen und ist dafür ggf. mal ein Widget geplant (mit Farbeinstellung für den Hintergrund und der Möglichkeit drei/vier Icons einzubinden)?


    Vom Layout her bin ich frei, tendiere aber in Richtung Campfire Responsive.


    Liebe Grüße und ein schönes Wochenende...


    Michael

  • Hallo Mario,


    hab's ausprobiert: https://hosting.zeta-producer.com/6509628295/index.html Wen ich jetzt noch einen blauen Hintergrund und bei Mouseover/aktivem Button diesen mit ein weißen Hintergrund versehen kann, bin ich (fast) glücklich.


    Was ich gar nicht verstehe ist allerdings die Positionierung des Menüs. Sie soll links mit dem Logo bündig sein. Das bringt mich nervlich fast an's Ende. Und die Smartphone-Ansicht ist etwas unglücklich bzw. passt sich die obere Menüleiste nicht an, wenn des Fenster verkleinert wird. Hier drei Bilder. Getestet wurde mit Opera. Im Edge sieht es etwas besser aus. Evtl. kann man die Leiste bei Smartphone-Ansicht und verkleinertem Bildschirm ausblenden?


    Viele Grüße und einen schönen Sonntag....


    Michael




    So soll es aussehen (und so sieht es im ZP 15.2 auch aus);





    So sieht es nach der Veröffentlichung im Opera-Browser aus:




    Und so sieht es auf einem Smartphone bzw. bei verkleinerter Ansicht des Fensters aus:



    Layout: Campfire Responsive, ZP 15.2

    • Offizieller Beitrag

    Das Ganze ist so ausgelegt damit es ohne weiteres zutun Resposive ist. Bei 3 Spalten müsste der Wert für die Spalten auf 33% angegeben werden. Das würde dann so aussehen: https://hosting.zeta-producer.com/6510327388/index.html


    Mit deinen Wünschen müsste man den Code ganz anders gestalten. Das würde dann so aussehen: https://hosting.zeta-producer.com/6510327388/topbar.html


    CSS:



    HTML:

    Code
    <div class="topbarzp">
    <a class="spaltentopbarzp" href="#"><span>Privatkunden</span></a>
    <a class="spaltentopbarzp" href="#"><span>Gewerbekunden</span></a>
    <a class="spaltentopbarzp" href="#"><span>Kundenportal</span></a>
    </div>
    • Offizieller Beitrag

    Ich habe das ganze nochmal verfeinert. Damit der Logobereich nicht so groß ausfallen muss habe ich diesen mit CSS nach unten gerutscht. Dieser wird beim Scrollen wieder nach oben korrigiert und wenn zurück gescrollt wird wieder hergestellt.

    https://hosting.zeta-producer.com/6510327388/topbar2.html


    Der Scroll-Effekt sieht auch sehr viel besser aus als bei Vodafone. 8o


    Hier nochmal der gesamte Code:


    CSS:



  • Hallo Mario,


    mal wieder ein FETTES DANKESCHÖN. Schaut klasse aus, muss den Code nur etwas anpassen: der Hintergrund des oberen Menüs sollte blau sein und der jeweils aktive Menüpunkt über einen weißen Hintergrund und blaue Schrift verfügen. Mal sehen, ob ich das hinbekommen.


    Herzliche Güße


    Michael

  • phil-web

    Hat das Label Umgesetzt hinzugefügt.