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 ab €50 und einiges mehr>

      Kommentar

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

      Einklappen

      Themen: 56.459   Beiträge: 428.482   Mitglieder: 27.877   Aktive Mitglieder: 60
      Willkommen an unser neuestes Mitglied, jorna2a.

      Online-Benutzer

      Einklappen

      637 Benutzer sind jetzt online. Registrierte Benutzer: 1, Gäste: 636.

      Mit 2.057 Benutzern waren am 14.07.2019 um 11:45 die meisten Benutzer gleichzeitig online.

      Die neuesten Themen

      Einklappen

      SimpleSite

      Die neuesten Beiträge

      Einklappen

      Lädt...
      X