Einzelnen Beitrag anzeigen
  #4 (permalink)  
Alt 29.03.2022, 12:42
html1979 html1979 ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.03.2022
Beiträge: 7
html1979 befindet sich auf einem aufstrebenden Ast
Standard

Hi,

leider wars das nicht.

Ich vermute eher, dass das Menü nach dem Klick auf den Menübutton nicht sichtbar ist. Der Klick ansich funktioniert.

Ich hab jetzt mal das hier grob zusammengenagelt:

Code:

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>Hamburger-Menü Test</title>

    <style>
    *,::before,::after{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Verdana', sans-serif;
    } 
    body {
      margin: 0;
      font-size:100%;
      background: #f6f8f9;
    }

    nav {
        display: flex;
        min-height:80px;
        width: 100%;
        background: #1c3464;
        align-items: center;
        padding: 0 50px 0 50px;
        flex-wrap: wrap;
        overflow: hidden;
        position: fixed;
        top: 0;
        z-index:200000;
        border-bottom: 4px solid #9acd32;
    }
    /* Navigation im Zustand ausgeklappt */
    ul.topmenu{
      display: flex;
      flex-wrap: wrap;
      list-style: none;
      position:absolute;
      right:20px;
    }
    ul.topmenu li{
      margin: 0 5px;
    }
    ul.topmenu li a{
      color: #f2f2f2;
      text-decoration: none;
      font-size: 1.1em;
      font-weight: 500;
      padding: 8px 15px;
      border-radius: 5px;
      letter-spacing: 0.05em;
      transition: all 0.3s ease;
    }
    ul.topmenu li a.active{
      color: #111;
      background: #fff;
    }
    ul.topmenu ul li a:hover {
      background:#526788;
    }
    
    input#hamburg {display:none}
  
    @media (max-width: 1200px) {

      ul.topmenu{
        position: fixed;
        top: 80px;
        left: -100%;
        background: #173460;
        height: 100vh;
        width: 100%;
        text-align: center;
        display: block;
        transition: all 0.3s ease;
        z-index:200000;
      }
  
      label.hamburg { 
        display: block;
        background: #555; 
        width: 75px; 
        height: 50px; 
        margin-left: auto; margin-right: auto;
        border-radius: 4px; 
        position:absolute;
        right:20px;
      }

      .line { 
        position: absolute; 
        left:10px;
        height: 4px; width: 55px; 
        background: #fff; border-radius: 2px;
        display: block; 
        transition: 0.5s; 
        transform-origin: center; 
      }

      .line:nth-child(1) { top: 12px; }
      .line:nth-child(2) { top: 24px; }
      .line:nth-child(3) { top: 36px; }

      /* Linien zum Kreuz werden lassen */
      #hamburg:checked + .hamburg .line:nth-child(1){
          transform: translateY(12px) rotate(-45deg);
      }

      #hamburg:checked + .hamburg .line:nth-child(2){
          opacity:0;
      }

      #hamburg:checked + .hamburg .line:nth-child(3){
          transform: translateY(-12px) rotate(45deg);
      }
    
      #hamburg:checked ~ nav { 
        height:500px;
        background-color: #9acd32;
      }
      
      #hamburg:checked ~ ul.topmenu { 
        left: 0;
      }
    
    }
  </style>
  </head>
<body>
    <nav >
        <input type="checkbox" id="hamburg">
        <label for="hamburg" class="hamburg">
          <span class="line"></span>
          <span class="line"></span>
          <span class="line"></span>
        </label>
          <ul class="topmenu">
            <li><a href="/" class="active">Menu 1</a></li>
            <li><a href="/">Menu 2</a></li>
            <li><a href="/">Menu 3</a></li>
            <li><a href="/">Menu 4</a></li>
          </ul>
    </nav>   
    Hello world!
</body>
</html>
Ich hab für dieses Beispiel extra auch mal einen anderen Menübutton verwendet. Das Ergebnis: Man kann den Menübutton anklicken aber das Menü zeigt sich auf dem iphone / Safari nur minimalst.

Hier ein Screenshot vom Firefox (Windows 10).



Beim iphone spitzelt nur der rot umrandete Bereich raus.
Der Rest ist nicht sichtbar aber die Menüpunkte sind anklickbar.
Mit Zitat antworten