DropDown-Menu Links für Handy?

Windoofs10  23.05.2024, 16:22

Irgendwie kann man mit dem Firefox unter Android nicht mehr direkt Dateien öffenen oder es wurde so sehr geändert, dass ich nicht weiß, wie.

Wollte es eig mal testen aber naja...

mahid123 
Beitragsersteller
 23.05.2024, 16:35

es funktioniert weder in dem ich es mit meinem iphone öffne noch bei google mit nem html viewer

Windoofs10  23.05.2024, 16:37

Hast du es mit einem richtigem, vollwertigem Browser (zb. Firefox) probiert?

mahid123 
Beitragsersteller
 23.05.2024, 16:41

nein hab ich nicht (meinst du auf meinem smartphone), aber es wäre wichtig dass es auf safari auch funktioniert

1 Antwort

Ich versuche mal zu verstehen was dein Problem ist und werde dir meine Variante hier posten. Ich versuche so gut wie möglich an deinem Beispiel anzupassen:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Language Selection</title>
  <style>
    .dropbtn {
      font-size: 16px;
      border: none;
      cursor: pointer;
      background: none;
    }
    
    .dropdown {
      position: relative;
      display: inline-block;
    }
    
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }
    
    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }
    
    .dropdown-content a:hover {
      background-color: #f1f1f1;
    }
    
    .dropdown-content.show {
      display: block;
    }
    
    @media (max-width: 768px) {
      .dropdown-content {
        position: static;
      }
    }
  </style>
</head>
<body>
  <nav class="gtco-nav" role="navigation">
    <div class="container">
      <div class="row">
        <div class="col-sm-2 col-xs-12">
          <div id="gtco-logo"><a href="index.html">Endo<em>scopy</em></a></div>
        </div>
        <div class="col-xs-10 text-right menu-1 main-nav">
          <ul>
            <li class="active"><a href="#" data-nav-section="home">Home</a></li>
            <li><a href="#" data-nav-section="about">Über uns</a></li>
            <li><a href="#" data-nav-section="practice-areas">Anwendungsbereiche</a></li>
            <li><a href="#" data-nav-section="technics">Operationstechniken</a></li>
            <li><a href="#" data-nav-section="our-team">Unser Team</a></li>
            <li class="btn-cta"><a href="#" data-nav-section="contact"><span>Kontakt</span></a></li>
            <li class="dropdown">
              <button class="dropbtn">Deutsch ∨</button>
              <div class="dropdown-content">
                <a href="italiano.html" class="italiano">Italiano</a>
                <a href="english.html" class="english">English</a>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </nav>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      var dropdownButton = document.querySelector(".dropdown .dropbtn");
      var dropdownContent = document.querySelector(".dropdown .dropdown-content");
      dropdownButton.addEventListener("click", function(event) {
        event.stopPropagation();
        dropdownContent.classList.toggle("show");
      });
      window.addEventListener("click", function(event) {
        if (!event.target.matches('.dropbtn')) {
          if (dropdownContent.classList.contains("show")) {
            dropdownContent.classList.remove("show");
          }
        }
      });
      var dropdownOptions = document.querySelectorAll(".dropdown-content a");
      dropdownOptions.forEach(function(option) {
        option.addEventListener("click", function(event) {
          event.stopPropagation();
        });
      });
    });
  </script>
</body>
</html>

Viel Erfolg

Woher ich das weiß:Berufserfahrung – Ich bin gelernter Mediengestalter Digital und Print(IHK)