Ankündigung

Einklappen
Keine Ankündigung bisher.

Kontakt-Liste mit Auswahl des Landes = Einblenden der Kontaktdetails

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Kontakt-Liste mit Auswahl des Landes = Einblenden der Kontaktdetails

    Guten Abend,
    ich würde ganz gerne ein Drop-Down Menü einbinden mit der Auswahl des Landes und anhand des Landes wird dann die korrekte Kontaktperson angezeigt.
    Super wäre so etwas wie hier: https://www.lts-light.com/kontakt/ansprechpartner/
    (Ich hoffe den Link darf ich hier einstellen)

    Ich brauche nur die Liste bei International. Wie kann man sowas realisieren. (CSS, Java, html)

    Ich bin für jede Hilfe dankbar.

    Mein erster Versuch sieht so aus:

    HTML-Code:
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
     <style>
      .dropbtn {
      background-color: #4CAF50;
      color: white;
      padding: 30px 152px 30px 152px;
      font-size: 20px;
      border: none;
      cursor: pointer;
    }
    
    .dropbtn:hover, .dropbtn:focus {
      background-color: #3e8e41;
    }
    #myInput {
      border-box: box-sizing;
      background-image: url('searchicon.png');
      background-position: 14px 12px;
      background-repeat: no-repeat;
      font-size: 16px;
      padding: 10px 100px 10px 100px;
      border: none;
      border-bottom: 1px solid #ddd;
    }
    #myInput:focus {outline: 3px solid #ddd;}
    .dropdown {
      position: relative;
      display: inline-block;
    }
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f6f6f6;
      min-width: 400px;
      max-height:200px;
      overflow: auto;
      border: 1px solid #ddd;
      z-index: 1;
    }
    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }
    .dropdown a:hover {background-color: #ddd;}
    .show {display: block;}
     </style>
     <div class="dropdown">
      <button onclick="DropDownFunction()" class="dropbtn">
       International
      </button>
      <div id="myDropdown" class="dropdown-content">
       <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
       <a href="#about">
        Land 1
       </a>
       <a href="#blog">
        Land 2
       </a>
       <button type="button" onclick="buttonShow()">Land 3 Info anzeigen</button>
       <a href="#contact">
        Land 4
       </a>
       <a href="#custom">
        Land 5
       </a>
       <a href="#support">
        Land 6
       </a>
       <a href="#tools">
        Land 7
       </a>
      </div>
     </div>
    
     <div id="infoBox" style="width: 400px; padding: 5px; background-color: white; border: 2px solid #CCCCCC">
      Hier kommt die Zusatz-Info
      <p style="text-align: center; margin-top: 20px">
        <button type="button" onclick="buttonHide()">Schließen</button>
      </p>
    </div>
    
    <script>
      /* Liste einblenden */
    function DropDownFunction() {
      document.getElementById("myDropdown").classList.toggle("show");
    }
    function filterFunction() {
      var input, filter, ul, li, a, i;
      input = document.getElementById("myInput");
      filter = input.value.toUpperCase();
      div = document.getElementById("myDropdown");
      a = div.getElementsByTagName("a");
      for (i = 0; i < a.length; i++) {
        txtValue = a[i].textContent || a[i].innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
          a[i].style.display = "";
        } else {
          a[i].style.display = "none";
        }
      }
    }
    var info = document.getElementById("infoBox");
    info.style.display = "none"; // Box ausblenden
    info.style.position = "absolute";
    info.style.zIndex = 999;
    // Entweder fix auf der Seite platziert
    // info.style.left = "50px";
    // info.style.top = "100px";
    // Oder ein definiertes Stückchen unter dem Knopf
    info.style.marginTop = "10px";
    
    function buttonShow() {
      // Infobox anzeigen
      info.style.display = "";
    }
    function buttonHide() {
      // Infobox wieder ausblenden
      info.style.display = "none";
    }
     </script>

  • #2
    Fünf Tage vergangen, ist die Frage noch aktuell?

    Kommentar


    • #3
      Zitat von Sempervivum Beitrag anzeigen
      Fünf Tage vergangen, ist die Frage noch aktuell?
      Bei Leuten die ein "Problem" posten und dann netterweise den Links dalassen der das Problem nicht hat nehme ich an das er eh nicht antworten wird da er im nächsten Forum eine ähnliche Frage stellt.

      Stutzig macht mich nur der Beitritt im HP Forum von 2014 und 2019 der erste Post.
      https://arnego2.com <Webseiten, Umbau ab €80 und einiges mehr>

      Kommentar

      UNTERSTÜTZT UNS!

      Einklappen


      Für alle Amazon-Käufe, die ihr über diese Suchmaske tätigt, bekommen wir eine kleine Umsatzbeteiligung. Euch kostet es nichts mehr und wir können von den Einnahmen einen Teil unserer Kosten abdecken!

      Vielen Dank für eure Unterstützung!

      homepage-forum.de - Hilfe für Webmaster! Statistiken

      Einklappen

      Themen: 56.653   Beiträge: 428.483   Mitglieder: 28.275   Aktive Mitglieder: 60
      Willkommen an unser neuestes Mitglied, motorGlype.

      Online-Benutzer

      Einklappen

      206 Benutzer sind jetzt online. Registrierte Benutzer: 6, Gäste: 200.

      Mit 3.502 Benutzern waren am 23.01.2020 um 17:20 die meisten Benutzer gleichzeitig online.

      Die neuesten Themen

      Einklappen

      Die neuesten Beiträge

      Einklappen

      Lädt...
      X