zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Responsive Menü funktioniert nicht mit Safari (iphone 6s)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.03.2022, 21:28
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
  #2 (permalink)  
Alt 29.03.2022, 12:13
top top ist offline
Benutzer
neuer user
 
Registriert seit: 06.01.2021
Beiträge: 33
top wird schon bald berühmt werden
Standard

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 ;) */
    }
 ...
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 29.03.2022, 12:34
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.210
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 29.03.2022, 12:42
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
  #5 (permalink)  
Alt 29.03.2022, 13:03
top top ist offline
Benutzer
neuer user
 
Registriert seit: 06.01.2021
Beiträge: 33
top wird schon bald berühmt werden
Standard

Was passiert wenn du das raus nimmst?

Code:
    nav {
...
        overflow: hidden;
...
    }
Mit Zitat antworten
  #6 (permalink)  
Alt 29.03.2022, 13:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.03.2022
Beiträge: 7
html1979 befindet sich auf einem aufstrebenden Ast
Standard

You made my day:
Dann funktionierts

Saustark, danke dir!
Mit Zitat antworten
Antwort

Stichwörter
responsive menu, safari

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


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


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:56 Uhr.