Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 28.03.2022, 21:28
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 Responsive Menü funktioniert nicht mit Safari (iphone 6s)

Hi zusammen,

ich begreife einfach nicht, warum dieses Menü hier mit dem iphone6 (Safari) nicht funktioniert? Wenn man auf das Menü-Icon klickt, öffnet sich das Menü nicht.

Code:
<!doctype html>
<html lang="de" id="rootElement">
  <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;
    }
    /* +++++++++++++++++++++++++++++++++++++++++++++++ Navigation */
    nav {
        display: flex;
        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;
    }
    nav ul{
      display: flex;
      flex-wrap: wrap;
      list-style: none;
      position:absolute;
      right:20px;
    }
    nav ul li{
      margin: 0 5px;
    }
    nav ul 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;
    }
    nav ul li a.active{
      color: #111;
      background: #fff;
    }
    nav ul li a:hover {
      background:#526788;
    }
    nav .menu-btn img{
      color: #fff;
      cursor: pointer;
      display: none;
    }
    input[type="checkbox"]{
      display: none;
    }

    @media (max-width: 1200px) {
      nav{
        padding: 0px 10px 0px 20px;
      } 
      .menu-btn {
        position:absolute;
        right:20px;
      }
      nav .menu-btn img{
        display: block;
      }
      #click:checked ~ .menu-btn i:before{
        content: "\f00d";
      }
      nav ul{
        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;
      }
      #click:checked ~ ul{
        left: 0;
      }
      nav ul li{
        width: 100%;
        margin: 40px 0;
      }
      nav ul li a{
        width: 100%;
        margin-left: -100%;
        display: block;
        font-size: 1.3em;
        transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      }
      #click:checked ~ ul li a{
        margin-left: 0px;
      }
      nav ul li a.active,
      nav ul li a:hover{
        background: none;
        color: cyan;
      }
    }
  </style>
  </head>
<body>
    <nav >
        <input type="checkbox" id="click">
        <label for="click" class="menu-btn">
            <a><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAhCAIAAAAzse47AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAZUlEQVRIiWP8//8/A+0BEx3sGLVm1Bq6WcOCSyItM+fz58/EG2RuZlqQl0OyNXv27iPeDgYGBvzZHGegSUtJkWQNHx8fHlnG0cKGdDCa0rCC0ZRGdTCa0rCC0ZQ2as2oNaPW4AMAM3MvRji4G34AAAAASUVORK5CYII="></a>
        </label>
          <ul>
            <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>
Habt ihr einen Tipp für mich?

Grüßle
Daniel
Mit Zitat antworten
Sponsored Links