Menü oberhalb des Hauptmenüs

MichaelW · 4. Januar 2020

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

Mario · 4. Januar 2020

Teste mal ob dieser Code für dich der richtige wäre. https://www.zella.de/code/topbar.html

Wenn das passt kann ich mal schauen ob da was geht Scrollt man hinunter, verschwindet das obere Menü

Eventuell werde ich mal probieren DIESES auch als Top-Bar umzusetzen.

MichaelW · 5. Januar 2020

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

Mario · 5. Januar 2020

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:

CSS

<style>
.topbarzp {
position:absolute;
left:58px;
top:0;
z-index:30000;
}
.spaltentopbarzp{
float: left;
font-size: 14px;
background:blue;
padding: 4px 20px 4px 20px;
text-align: center;
text-decoration: none;
transition: all 0.4s ease;
}
a.spaltentopbarzp {
color: #fff !important;
text-decoration: none;
transition: all 0.4s ease;
}

.spaltentopbarzp:hover {
background:#fff !important;
}
a.spaltentopbarzp:hover {
color: #000 !important;
}
.spaltentopbarzp:active {
background:#fff !important;
}
a.spaltentopbarzp:active {
color: #000 !important;
width: 33%;
}

@media (max-width: 500px) {
.spaltentopbarzp {padding: 4px 6px 4px 6px;}
.topbarzp {left:0;}
}
@media (max-width: 319px) {
.spaltentopbarzp {font-size: 10px; text-transform: uppercase;}
}
</style>

Alles anzeigen

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>

Mario · 5. Januar 2020

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.

Hier nochmal der gesamte Code:

CSS:

CSS

<style>
header {
padding-top: 30px;
transition: all 0.25s;
}
.topbarzp {
position:absolute;
left:58px;
top:0;
z-index:30000;
}
.spaltentopbarzp{
float: left;
font-size: 14px;
background:blue;
padding: 4px 20px 4px 20px;
text-align: center;
text-decoration: none;
transition: all 0.4s ease;
}
a.spaltentopbarzp {
color: #fff !important;
text-decoration: none;
transition: all 0.4s ease;
}

.spaltentopbarzp:hover {
background:#fff !important;
}
a.spaltentopbarzp:hover {
color: #000 !important;
}
.spaltentopbarzp:active {
background:#fff !important;
}
a.spaltentopbarzp:active {
color: #000 !important;
width: 33%;
}

@media (max-width: 500px) {
.spaltentopbarzp {padding: 4px 6px 4px 6px;}
.topbarzp {left:0;}
}
@media (max-width: 319px) {
.spaltentopbarzp {font-size: 10px; text-transform: uppercase;}
}
</style>

Alles anzeigen

CSS

HTML:
<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>

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(window).scroll(function(){
if(jQuery(this).scrollTop()>=50){
jQuery('header').attr('style','padding-top: 0px !important;');
}
else if (jQuery(this).scrollTop()<50) {
jQuery('header').attr('style','padding-top: 30px !important')
}
})
})
</script>

Alles anzeigen

MichaelW · 6. Januar 2020

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

Mario · 13. Dezember 2021

TOP BAR

MichaelW · 14. Dezember 2021

Dankeschön. Wunscherfüllung nennt man das

Menü oberhalb des Hauptmenüs

phil-web 4. November 2023

Teilen