Menü geht auf iOS nicht

Colin · 30. Dezember 2018

Hallo zusammen,

auf einer Webseite habe ich ein Menü programmiert. Bei kleinem Display ist es ein Dropdown-Menü. Unter Android wie Windows geht es (öffnet sich bei Mouseover), unter iOS öffnet es sich bei Mouseover nicht. Versteht jemand, warum? Wo ist der Fehler?

HTML ist:

Code

<div class="navigation">
    <div class="flex-navigation">    
       <div><img src="pics/logo_k.png" alt="Ferienwohnung 'Gute Laune'" height="40px"></div>
       <div class="big-screen">
          <a class="textlink"  href="index.html">HOME</a>&nbsp;&nbsp;|&nbsp;&nbsp;
          <a class="textlink"  href="ausstattung.html">AUSSTATTUNG</a>&nbsp;&nbsp;|&nbsp;&nbsp;
          <a class="textlink"  href="preise.html">PREISE</a>&nbsp;&nbsp;|&nbsp;&nbsp;
  <a class="textlink"  href="kontakt.html">KONTAKT</a>
       </div>
       <div class="small-screen"><div id="menu"><ul><li>
         <h2 class="textlink">MEN&#220;</h2> 
         <ul>
            <li><a class="textlink" style="background: #ffffff; display: block; width: 80px; border: 1px; padding: 2px;" href="index.html">HOME</a></li> 
            <li><a class="textlink" style="background: #ffffff; display: block; width: 80px; border: 1px; padding: 2px;" href="ausstattung.html">AUSSTATTUNG</a></li>
            <li><a class="textlink" style="background: #ffffff; display: block; width: 80px; border: 1px; padding: 2px;" href="preise.html">PREISE</a></li>
            <li><a class="textlink" style="background: #ffffff; display: block; width: 80px; border: 1px; padding: 2px;" href="kontakt.html">KONTAKT</a></li> 
         </ul>
         </li></ul></div>
         <div style="clear: both;"></div>
       </div>
    </div>
  </div>

Alles anzeigen

In der CSS-Datei habe ich hierfür:

Code

@media (max-width: 750px)
  {
  .big-screen
    {
    display: none;
  }
}
@media (min-width: 751px)
  {
  .small-screen
    {
    display: none;
  }
}

.navigation {
   position: fixed;
   font-size: 20px;
   top: 0;
   left: 0; 
   right: 0;
   Background-color: #ffffff;
   opacity: 0.9;
   filter: alpha(opacity=90); 
}

#menu { 
   width: 100%; 
   padding: 0 10px;
   background: none; 
   font-size: 0.5em; 
   line-height: 1.2; 
   float: right; 
}

#menu ul { 
   float: left; 
   width: 100px; 
   list-style-type: none;
   background: #ffffff; 
   }  
   
#menu li { 
   position: relative; 
   } 

#menu ul ul { 
   position: absolute; 
   z-index: 2; 
   display: none; 
   }
   
#menu ul li:hover ul { 
   display: block; 
   }

*html #body {behavior: url(csshover3-source.htc); font-size: 100%;} 
*html #menu ul li a {height: 1%;}

Alles anzeigen

Danke für eure Hilfe!!!

BG Colin

Colin · 30. Dezember 2018

Ok ich hab es - hier steht die Lösung: https://css-tricks.com/forums/…-states-on-touch-devices/

Code

onclick = ""

im div des Menüs und es geht

MrMurphy · 31. Dezember 2018

Hallo

Schön dass du eine Lösung für dich gefunden hast.

Deshalb nur als Info für Dritte, die diesen Beitrag lesen: Bei HTML5 wird der HTML-Quelltext deutlich schlanker gehalten und Wiederholungen vermieden. Mit aktuellem HTML könnte der Quelltext folgendermaßen aussehen:

Code

<nav class="navigation">
      <figure>
         <img src="pics/logo_k.png" alt='Ferienwohnung "Gute Laune"'>
      </figure>
      <div>
         <a href="index.html">Home</a>
         <a href="ausstattung.html">Ausstattung</a>
         <a href="preise.html">Preise</a>
         <a href="kontakt.html">Kontakt</a>
      </div>
   </nav>

Alles anzeigen

Wer will kann für die Navigation auch eine Liste verwenden. Ein Muss ist eine Liste jedoch nicht.

Genau so sollten keine Inhalte versteckt werden, da damit die Benutzerfreundlichkeit verschlechtert und Barrieren geschaffen werden. Da viele Besucher bei sich JavaScript blockiert haben sollten Webseiten grundsätzlich auch ohne JavaScript funktionieren.

Die Gestaltung erfolgt dann mittels CSS3. Also zum Beispiel auch mit Flexbox.

CSS-Anweisungen wie float, clear, position, display: none oder z-index sind dann für die Navigation nicht mehr erforderlich.

Gruss

MrMurphy

Menü geht auf iOS nicht

Jetzt mitmachen!

Teilen

Tags