mein erstes Hamburger Menü

[der henry]

Hallo,

ich habe mir mein erstes Hamburger Menü aus diversen Beispielen zusammen gestellt, das ich mit php in die Ausgabe der Seite integriere.#

Leider bin ich auf ein Problem gestoßen, das ich nicht selbst lösen kann.

Nachfolgend mein Problem mit dem Menü. Die Überschriften sollten in einer Linie laufen, nach unten ist es dann egal. Aktuell wird es genau umgekehrt gemacht ... ?????

**Überschrift 1**
    Menü 1
    Menü 2
    Menü 3                       **Überschrift 3**
    Menü 4                            Menü 1
    Menü 5    **Überschrift 2**       Menü 2
    Menü 6        Menü 1              Menü 3
    Menü 7        Menü 2              Menü 4 

Das ist die "Menüdatei" (nur ein Teil)

<nav role="navigation">
    <details>
    <summary><span>Menü</span></summary>
    <ul id="menu">  
      <li><a class="menuueberschrift" aria-current="page">Übersicht</a></li>
      <li><a class="menu" href="#">Das ist ein sehr langer Text</a></li>      
      <li><a class="menu" href="bild_t1.php">T1</a></li>
      <li><a class="menu" href="bild_t2.php">T2</a></li>
      <li><a class="menu" href="#">Kontakt</a></li>
      <li><a class="menu" href="#">Seite 3</a></li>      
      <li><a class="menu" href="#">Seite 4</a></li>
    </ul>
    <ul id="menu1">
      <li><a class="menuueberschrift" aria-current="page">Trends</a></li>
      <li><a class="menu" href="#">Das ist ein sehr langer Text</a></li>
      <li><a class="menu" href="#">Seite 3</a></li>      
      <li><a class="menu" href="#">Seite 4</a></li>
     </ul>
  .....
......    
    <ul id="menux">
      <li><a class="menuueberschrift" aria-current="page">System</a></li>
      <li><a class="menu" href="datapointsPage.php">Edit Datapoints</a></li>
      <li><a class="menu" href="#">Seite 3</a></li>      
      <li><a class="menu" href="#">Seite 4</a></li>
      <li><a class="menu" href="systeminfo.php">Systeminfo</a></li>
    </ul>
    </details>
  </nav>

Und dazu die passende css Datei

nav summary {
  list-style-type: "☰";
  font-size: 1.5rem;
  position: fixed;
  top: 45px;
  left: 10px;
  z-index: 100;
  cursor:pointer;
}

nav summary:hover {
  font-size:2.0em;
  text-shadow: 2px 2px 5px white;
}

nav summary span {
  font-size: 0px;
}

nav details[open] summary {
  list-style-type: "✖";
  color: red;
}

nav details {
  position: absolute;
  top: 45px;
  left: 10px;
  background-color: DarkGrey;
  z-index: 100;
  border: double indigo;
}

nav ul {
  margin-top: 1.3em;
  margin-right: 2.2em;
  display: inline-block;
}

a { 
	color: indigo);
	font-size: 1.2em;
}

li { margin-bottom: 3px; }

.menuueberschrift
{ color: black; 
  font-weight: bold; 
  text-decoration: underline;
  font-size: 1.3em;
}

.menu:hover { color: yellow; }
.menu:focus { color: yellow; }

Eventuell sieht einer sofort was das Problem ist 🤔

Vielen Dank !!

PS: Bin auch für Tipps zur Verbesserung/Optimierung dankbar.

[Gunnar Bittersmann]

@@der henry

Eventuell sieht einer sofort was das Problem ist 🤔

Nein, niemand. Weil du vergessen hast mitzuteilen, wo man sich das ansehen kann. Du erwartest doch nicht von uns, dass wir uns selbst eine Testseite anhand deines Codes erstellen, oder?

🖖 Live long and prosper

[Rolf B]

Hallo Gunnar,

Nein, niemand

Eine Live-Demo ist immer gut, aber man kann auch aus Code den Fehler erkennen.

Die ul werden per display:inline-block nebeneinander gestellt, damit werden sie an ihrer Baseline ausgerichtet: der Unterkante. Man kann vielleicht irgendwas mit first oder last baseline hexen, würde ich aber gar nicht versuchen.

Henry, verwende Flexbox mit flex-flow: row wrap, um die ul nebeneinander zu stellen, wenn genug Platz ist. Und dann align-items:start, damit die drei Menüs nach oben ausgerichtet werden.

Ob aber details ideal für den Zweck ist, bezweifle ich. Screenreader lesen da merkwürdige Dinge vor. Wir haben im Wiki zwei Artikel (Dropdown-Menü und Flyout-Menü), die Dir weitere Hilfestellung geben können. Dort ist auch die Details-Idee erwähnt und kommentiert.

Rolf