Responsive Menü funktioniert nicht mit Safari (iphone 6s)

html1979 · #1 (**permalink**) 28.03.2022, 22:28

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

top · #2 (**permalink**) 29.03.2022, 13:13

Ich bin mir nicht sicher, da ich gerade keinen Safari zum Testen habe.

Wenn ich mich recht entsinne hatte ich mal ein ähnliches Problem und es lag hier dran:

Code:

...
    input[type="checkbox"]{
      display: none;
    }
 ...

Versuch es mal mit folgendem:

Code:

...
    input[type="checkbox"] {
      position: fixed; /* holt den Schalter aus dem Elementfluss heraus */
      margin: -0.5em 0 0 -100vw; /* verschiebt es nach links aus dem Sichtfeld */
      top: 50vh; /* verhindert in manchen Browsern größere Sprünge beim Versuch dort hin zu scrollen, wenn es durch den Klick fokussiert wird ;) */
    }
 ...

cloned · #3 (**permalink**) 29.03.2022, 13:34

Ein a-tag in einem label-tag macht keinen Sinn. Ein a-tag ist ein Link, du hast hier keinen Link. Auch braucht ein link ein href Attribut. Entferne den Tag am besten, der ist unnötig.

html1979 · #4 (**permalink**) 29.03.2022, 13:42

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.

top · #5 (**permalink**) 29.03.2022, 14:03

Was passiert wenn du das raus nimmst?

Code:

    nav {
...
        overflow: hidden;
...
    }

html1979 · #6 (**permalink**) 29.03.2022, 14:17

You made my day:
Dann funktionierts

Saustark, danke dir!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Responsive Design bei iPhone 6 nicht möglich	Overtone	CSS	2	16.01.2015 09:05
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten	mazzo	CSS	10	05.04.2012 18:32
Probleme mit Safari und einem CSS Menü	webfabrik	CSS	4	08.01.2008 12:43
Überall funktioniert nur im IE6 nicht -> Flyout Menü	churchill	CSS	3	16.11.2006 16:48
Warum funktioniert mein Menü so?	Zen5656	CSS	1	29.10.2006 16:32