XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Responsive Menü funktioniert nicht mit Safari (iphone 6s) (http://xhtmlforum.de/showthread.php?t=74332)

html1979 28.03.2022 22:28

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

top 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 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 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).

http://www.basement-media.de/hamburger.png

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

top 29.03.2022 14:03

Was passiert wenn du das raus nimmst?

Code:

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


html1979 29.03.2022 14:17

You made my day:
Dann funktionierts ;)

Saustark, danke dir!


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:23 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023