Wie kann ein responsiv ausklappendes DD-Menü, das in einer Gridzelle ist, den Content der Gridzellen darunter überlappen?

[Matinee]

Hallo,

ich stelle gerade die erste von drei Websites von WP auf "statisches" HTML/CSS um (mit Hilfe von VSC).

Mein Basislayout desktop-first ist ein typisches Artikellayout, ein dreispaltiges Grid mit grid-template-areas.

Im Media Query für Smartphones wird daraus ein zweispaltiges Grid, ebenfalls mit grid-template-areas, wobei die beiden Navs (headnav und sidenav) je eine Spalte in der zweiten Zeile einnehmen. Darunter kommt in der 3. Zeile dann der main-Content (h1, Inhaltsverzeichnis, Text). Siehe HTML-Code und Grid-Code fürs MQ unten.

Mittels JS (das einzige, das ich habe) und der darin angestoßenen Klassen "headnavmenue-zeigen" und "sidenavmenue-zeigen" werden die im Smartphone default ausgeblendeten DD-Menüs per Button-Klick dann eingeblendet. Siehe CSS-Code im MQ unten.

Das funktioniert auch alles. ABER: Mit dem Ausklappen des DD-Menüs wird der main-Content (h1 ect.) darunter (3. Gridzeile) nach unten verschoben. Ich hätte gern für beide Navs ein "overlay" des ausklappenden DD-Menüs über dem main-Content, der an seinem Platz bleibt. Ein Musterbild unten zeigt so einen overlay.

position absolute und hoher z-index für das ul-Menü sowie position relative für parent <nav> funktioniert nicht: main wird zwar nicht mehr verschoben, aber das ul-Layout geht komplett verloren, ich sehe nur noch die nackten Linktexte (wie transparent) und Teile des Rahmens. Es ist auch nicht overlay, man sieht Linktexte und main-Text beide gleichzeitig.

Ein mit Grid-features bewirktes explizites überlappendes Positonieren der beiden Navs mit main dürfte auch nicht helfen, da der overlay ja nur beim Ausklappen erwünscht ist und nur das ul-Menü betreffend, nicht die ganzen Navs.

Wie geht das, möglichst unter beibehaltener Verwendung von grid-template-areas im MQ? Bei der zweiten umzustellenden Site wird mich die Sache auch desktop betreffen, weil dort die horiz. Nav in eigener Gridzelle ein ähnlich ausklappendes DD-UNTERmenü hat.

Ich bin nur Hobby-Coder und habe recherchiert, aber keine Lösung gefunden. Vielleicht kann mir hier jemand helfen.

HTML der headnav (sidenav im Grunde identisch):

<nav class="headnav" aria-label="label1">
<button class="headnav-button" aria-expanded="false" type="button">Menü 1<span class="button-pfeil">▼</span></button>
<ul class="headnav-haupt-ul">
<li><a href="url1">Linktext1</a></li>
<li><a href="url2">Linktext2</a></li>
<li><a href="url3">Linktext3</a></li>
<li><a href="url4">Linktext2</a></li>
<li><a href="url5">Linktext5</a></li>
<li><a href="url6">Linktext6</a></li>
</ul>
</nav>

Grid-Code MQ und Einblenden des Menüs nach User-Klick per JS:

@media screen and (max-width: 600px) {
  div.grid-container { 
      display: grid;
      max-width: 600px; /
      grid-template-columns: 1fr 1fr; 
      grid-template-rows: auto auto; 
      grid-template-areas: 
      "header header"
      "headnav sidenav"
      "main main"
      "aside aside"
      "footer footer"; 
  }

  nav.headnav {
    grid-area: headnav;
    width: fit-content; 
    overflow: visible; 
    position: relative; /* resp Code zwecks overlay !!! */
  }


  /* responsiver Code: Mit dieser Klasse blendet JS das default ausgeblendete HeadnavMenü im Smartphone nach User-Klick ein; */
  ul.headnav-haupt-ul.headnavmenue-zeigen {
      display: block;
      position: absolute; /* resp Code zwecks overlay !!! */
      z-index: 9999; /* resp Code zwecks overlay !!! */
  } 
}

[Rolf B]

Hallo Matinee,

deine Screenshots sind von deiner Website? Oder zeigst Du andere Webseiten, bei denen es so funktioniert wie Du Dir das denkst? Zumindest tremontrentals verschiebt ebenfalls, und zwar nach links. Der andere Screenshot sieht so aus wie es dein Wunsch ist, scheint mir. Ein echter Link auf deine Baustellenseite wäre sicher hilfreicher als Screenshots.

Grundsätzlich sollte dein CSS funktionieren. Tut es das nicht, ist die Ursache in anderen Wechselwirkungen zu finden.

Mein Ansatz bei so etwas ist: Prüfe mit den Entwicklertools, ob deine CSS Regeln überhaupt greifen oder von anderen Regeln überschrieben werden.

Rolf

[Matinee]

Hallo Rolf,

danke für die schnelle Antwort.

deine Screenshots sind von deiner Website? Oder zeigst Du andere Webseiten, bei denen es so funktioniert wie Du Dir das denkst? Zumindest tremontrentals verschiebt ebenfalls, und zwar nach links. Der andere Screenshot sieht so aus wie es dein Wunsch ist, scheint mir.

Es sind zwei andere Websites, die zeigen, wie ich das overlay meiner beiden DD-Menüs im Smartphone-MQ (und bei meiner zweiten Website dann analog als DD-UNTERmenü in der desktop-Ansicht der Headernav) gern hätte.

Ich habe jetzt nochmal ein screenshot von meiner Baustellen-Site hier ergänzt, das zeigt, wie mit dem offenbar "üblichen" code (absolue, relative, z-index) es jetzt aussieht:

Grundsätzlich sollte dein CSS funktionieren. Tut es das nicht, ist die Ursache in anderen Wechselwirkungen zu finden.

Mein Ansatz bei so etwas ist: Prüfe mit den Entwicklertools, ob deine CSS Regeln überhaupt greifen oder von anderen Regeln überschrieben werden.

Rolf

Das mit position absolute plus z-index beim ul und position relative beim nav müsste klappen? Das wäre ja super, aber ich habe gelesen, dass ein Grid ein Überlappen auf diese Weise nicht zulässt. Der neue screenshot zeigt ja nur die schwarzen Buchstaben der Linktexte, die auch den main-Text nicht überlappen.

Was genau sollte ich im FF Inspector prüfen?

Ein echter Link auf deine Baustellenseite wäre sicher hilfreicher als Screenshots.

Die Site ist so bei mir im Visual Studio Code-Editor. Ich habe das noch nie gemacht, aber wenn es hilft, könnte ich ggf. die Codes auf so einem fiddle-Dings reinstellen. Wobei das gesamte Stylesheet schon seeehr lang ist...

[Rolf B]

Hallo Matinee,

Der neue screenshot zeigt ja nur die schwarzen Buchstaben der Linktexte, die auch den main-Text nicht überlappen.

Popups, die überlappen sollen, brauchen einen Hintergrund und eventuell auch einen Rand, um sie abzugrenzen. Standardmäßig haben HTML-Elemente keinen Rand und einen transparenten Hintergrund.

Eine einfache Hintergrundfarbe vergibst Du mit background-color.

Ein Popup, das aus einem Grid-Item herausragt, ist kein Problem. Der z-index ist nötig, weil es sich sonst unter die nachfolgenden Gridzellen schiebt. Da reicht aber zumeist z-index:1, es sei denn, du hantierst noch anderweit mit der z-Anordnung herum.

Rolf

[Matinee]

Hallo Rolf,

ich habe dem im MQ extra eingeblendeten ul per

/* responsiver Code: Mit dieser Klasse blendet JS das default ausgeblendete HeadnavMenü im Smartphone nach User-Klick ein; */
  ul.headnav-haupt-ul.headnavmenue-zeigen {
      display: block;
      position: absolute; /* resp Code zwecks overlay !!! */
      z-index: 9999; /* resp Code zwecks overlay !!! */
  }

keine weiteren Stylings wie z.B. background-color, border usw. gegeben, weil ich dachte, die im Basislayout und vorher im MQ gemachten ul-Stylings gelten ergänzend und zusätzlich weiter.

Aber ich muss diese Stylings für den obigen Selektor ("Einblendungs-ul") offenbar alle dort nochmal wiederholen. Das war der Denkfehler. Potzblitz.

Mit einer background-color habe ich jetzt das gewünschte overlay. Wobei ich mir sicher bin, irgendwo gelesen zu haben, dass das mit overlay/position in einem Grid nicht funktioniert. Irgendwas sei da grundsätzlich anders im Grid, man müsse es quasi zwingen zu solchen overlays (andere klappen natürlich) und das ginge dann halt nicht immer wie gewünscht. Egal.

Ein Popup, das aus einem Grid-Item herausragt, ist kein Problem.

Bei der nächsten Site habe ich in der desktop-Ansicht eine horiz. header-Nav in ihrer eigenen Gridzelle. Und diese klappt ein DD-UNTERmenü aus einem der Menü-Items aus. Das gilt dann alles genauso und sollte ebenfalls in dieser Weise über die Gridzelle darunter overlay ausklappen?

[Rolf B]

Hallo Matinee,

weil ich dachte, die im Basislayout und vorher im MQ gemachten ul-Stylings gelten ergänzend und zusätzlich weiter.

Da denkst du richtig.

Gab es denn darüber eine Hintergrundfarbe für dieses ul? Beachte: background-Eigenschaften werden nicht vererbt, und Sammeleigenschaften setzen alle enthaltenen Einzeleigenschaften.

   background-color: red;
   background: no-repeat;

Zeile 2 setzt background-repeat auf no-repeat UND (unter anderem) entfernt die Hintergrundfarbe rot (es müsste dann der Wert aus der darunterliegenden Kaskadenstufe gelten).

Rolf

[Matinee]

Hallo Rolf,

Gab es denn darüber eine Hintergrundfarbe für dieses ul?

Nein, das war beim nav.

Die Stylings für die beiden Navs waren ziemlich aufwendig für mich, weil auf jeder Ebene, nav, ul, li, a irgendwas Bestimmtes zu machen war und insgesamt auch relativ viel. Die meisten Stylings desktop-first sind beim nav und bei den a.

list-style-type: none scheint tatsächlich vom normalen ul-Styling weiter zu gelten, background-color nicht, weil nicht vererbt. Offenbar hatte ich zwar Recht mit dem Weitergelten der normalen ul-Styles, aber keine zutreffende Einschätzung darüber, welche Stylings tatsächlich beim ul wirksam waren und was nur so aussah.

Hier sind vollständig alle Stylings für die headernav, desktop-first (Basislayout):

nav.headnav {
    grid-area: headnav; 
    width: fit-content; 
    background-color:#fffbf1; 
    border: 1px solid #000000; 
    border-top-left-radius: 6px; 
    border-top-right-radius: 6px; 
    border-bottom-left-radius: 6px; 
    border-bottom-right-radius: 6px; 
    box-shadow: #6A3333 3px 3px 3px; 
    margin-top: 0px; 
    margin-bottom: 0px; 
    overflow: visible; 
}


ul.headnav-haupt-ul {
    list-style-type: none; 
    display: inline-block; 
    width: 100%; 
}

.headnav-haupt-ul li { display: inline-block; }

.headnav-haupt-ul li > a {
    display: block; 
    width: auto; 
    font-family: Arial, sans-serif;
    font-size: 0.875rem; 
    text-decoration: none; 
    padding-left: 13px; 
    padding-right: 13px; 
    padding-top: 14px; 
    padding-bottom: 14px; 
    outline: none; 
    white-space: normal; 
    border-style: solid; 
    border-color: #000000; 
    border-right-width: 1px; 
    border-bottom-width: 1px; 
}

/* Der zwecks Resp. nachträglich im HTML ergänzte Menü-Button wird desktop-first ausgeblendet und erhält diverse Stylings; */
button.headnav-button {
    display: none; 
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 15px;
    padding-left: 15px;
    font-family: Arial;
    font-size: 1rem;
    background-color:#fffbf1; 
}

/* Styling des Pfeiles; U-Bericht  ? */
button.headnav-button > span.button-pfeil {
    margin-left: 15px; /* seitlicher Abstand des Buttonpfeiles zur Buttonbeschriftung;  ? */
}

Mit meiner Vermutung im letzten post, dass das overlay analog dann auch so für ein DD-UNTERmenü aus einer horiz. Nav desktop in eigener Gridzelle klappen sollte, liege ich richtig? Ist ja im Grunde "dasselbe" Szenario, nur desktop und halt ein UNTERmenü, dass DD ausklappt, in eine andere Gridzelle hinein/darüber.

[Rolf B]

Hallo Matinee,

zunächst einmal: Du kannst Dir Schreibarbeit sparen, wenn Du Sammeleigenschaften verwendest.

Statt

    border-top-left-radius: 6px; 
    border-top-right-radius: 6px; 
    border-bottom-left-radius: 6px; 
    border-bottom-right-radius: 6px; 

geht auch einfach

    border-radius: 6px; 

Falls die Radien pro Ecke unterschiedlich sind, gibst Du hinter border-radius einfach alle 4 an, beginnend oben links, im Uhrzeigersinn. Die volle Erklärung ist reichlich komplex, für den Fall hier reicht es so.

Wenn Du margin-top und margin-bottom setzen willst, kannst Du statt dessen "margin-block" verwenden, um den "oberen" und "unteren" Rand, passend zur Schreibrichtung, in einer Eigenschaft zu setzen.

Padding lässt sich schreibrichtungsabhängig mit padding-block und padding-inline setzen, oder "klassisch" mit der padding-Sammeleigenschaft. Dann wird das alles schonmal deutlich kürzer.

Ränder kann man als border: 1px solid green; setzen und dann ggf. nochmal die border-width anpassen.

Die Font-Angaben font-size und font-family kann man als font: size family zusammenfassen, z.B. font: 0.9rem Arial,sans-serif; – was ich deshalb rot gemacht habe, weil man Arial besser Zyrial genannt hätte, damit es dort in der Liste steht, wo es hingehört. Es gibt, gerade für den Bildschirm, deutlich bessere sans-serif Schriften. Bevor Du Arial als Family listest, nimm lieber NUR sans-serif.

Aber grundsätzlich hast Du recht: so ein Menü verlangt eine Menge an CSS.

Weiterer Hinweis: Paddings und Margins definiert man heute nicht mehr in px, sondern in em oder rem, damit sie sich an die Font-Einstellungen anpassen. Als Faustregel gilt 1em = 16px, aber das ändert sich natürlich, wenn Du die font-size anpasst. Denk nicht in px, denk daran, dass in ein em horizontal ungefähr 2 Zeichen^[1] passen und mach die Abstände entsprechend. Fang mit 0.25em und 0.5em an und wenn Du meinst, das leicht anpassen zu müssen, mach von da aus weiter.

aber keine zutreffende Einschätzung darüber, welche Stylings tatsächlich beim ul wirksam waren und was nur so aussah.

Was Du in den Entwicklerwerkzeugen in allen Details überprüfen kannst. Einmal die geltenden CSS Regeln und welche Eigenschaften darin verwendet werden und welche nicht, und zum anderen die Liste der tatsächlichen Eigenschaftswerte.

Beispielsweise im Self-Wiki kannst Du für jede Eigenschaft nachschauen, ob sie vererbt wird oder nicht.

Rolf

---

1. Ganz grob. Es hängt natürlich auch hier am verwendeten Font, ob das passt. ↩︎

[Matinee]

Hallo Rolf, danke für deine Anregungen.

zunächst einmal: Du kannst Dir Schreibarbeit sparen, wenn Du Sammeleigenschaften verwendest.

Ich weiß, ich verwende diese Kurzschreibweisen meistens nicht. Bei border z.B., wenn alle drei Sachen gefragt sind, verwende ich "1px solid black" ganz oft, das ist intuitiv sofort verständlich und brauche ich oft.

padding, margin, border-radius und box-shadow schreibe ich meistens aus, weil es für mich so sofort nachvollziehbar und verständlich ist, wenn ich nach Fertigstellung dann vielleicht mal wieder in 6 oder 9 Monaten die Site und ihre Codes anschaue. Im Langzeitgedächtnis ist da kaum noch was drin, die Syntax der Kurzschreibweisen kenne ich da nicht mehr und auch für die anderen Sachen hole ich meine handgeschriebenen Erklärungen hervor (was habe ich warum so oder anders gemacht).

Wenn alle vier Werte die gleichen sind, könnte ich natürlich border-radius: 6px schreiben. Warum ich das da nicht gemacht habe, weiß ich nicht mehr. Wahrscheinlich wollte ich es erst mit unterschiedlichen Werten machen.

Paddings und Margins definiert man heute nicht mehr in px, sondern in em oder rem, damit sie sich an die Font-Einstellungen anpassen. Als Faustregel gilt 1em = 16px, aber das ändert sich natürlich, wenn Du die font-size anpasst.

Damit habe ich mich vor 2 Monaten näher befasst. Ich weiß noch, dass ich das Browserdefault von 1rem/em = 16px nicht verändern werde, sondern als verlässliche, gleich bleibende Größe immer beibehalten werde. Font-size habe ich konsequent von px auf rem umgestellt, dafür gibt es gute Gründe, z.B. wegen der Acc. Margin/padding stelle ich evtl. am Schluss noch um auf rem, wenn ich fertig bin mit der Umstellung der Site. Das sind halt schon viele Werte dann...

Was Du in den Entwicklerwerkzeugen in allen Details überprüfen kannst.

Ja, der FF Inspector ist ein wirklich hilfreiches Tool. Manches habe ich erst mit der Zeit durch Rumprobieren entdeckt.

Es gibt, gerade für den Bildschirm, deutlich bessere sans-serif Schriften. Bevor Du Arial als Family listest, nimm lieber NUR sans-serif.

Ich verwende Arial nur für Navi-Links und einige Buttons, weil sie eng ist und ich oft längere anchors in den Nav-Links habe. Wenn die Schriftgröße nicht zu klein ist, taugt sie dafür, finde ich. Und als klassische Standardschriftart ist sie auf jedem PC drauf. Für Fließtext und Überschriften ist sie nicht gut.

Bei den Navs müsste ich erst alles kontrollieren, wie sich eine andere Schriftart auswirkt und irgendwas zu lang wird, kacke umbricht in eine 2. Zeile usw., auch auf anderen Sites. Hier bei den beiden DD-Buttons wäre es aber eine extra Sache ohne Risiko. Was gäbe es als serifenlose Alternative für "Menü 1"?

[Gunnar Bittersmann]

@@Rolf B

weil man Arial besser Zyrial genannt hätte, damit es dort in der Liste steht, wo es hingehört.

😍

Was Erik sagte.

Fun fact: Bei der auf diese Präsentation folgenden hatte ich Arial verwendet. Das war die zu 30 Jahren SELFHTML – und damals war SELFHTML in Arial gesetzt.

🖖 Live long and prosper

[Rolf B]

Hallo Gunnar Bittersmann,

Was Erik sagte.

Weiß ich doch. Aber bei "whatfontis.com" gibt's über 8000 Fonts mit Z und Zarial wäre damit längst nicht am Ende der Liste.

Zyrial ist immerhin FAST am Ende, es folgen nur noch 7 mit Zyu oder Zyx oder Zyz am Anfang. Selber schuld 😉. Zzzarial ist mir zu unaussprechlich.

Rolf

[Der Martin]

Hallo,

Zzzarial ist mir zu unaussprechlich.

keine Schriftart, sondern ein Ort in Kalifornien: Zzyzx

Da geht das Gerücht, dass die Gemeindeväter unbedingt wollten, dass ihr Ort in alphabetischen Listen immer ganz am Schluss steht.

Einen schönen Tag noch
 Martin