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.414   Beiträge: 428.247   Mitglieder: 27.803   Aktive Mitglieder: 72
      Willkommen an unser neuestes Mitglied, qieb111.

      Online-Benutzer

      Einklappen

      596 Benutzer sind jetzt online. Registrierte Benutzer: 4, Gäste: 592.

      Mit 1.625 Benutzern waren am 17.03.2018 um 18:52 die meisten Benutzer gleichzeitig online.

      Die neuesten Themen

      Einklappen

      • Rauch17
        Antwort auf Fliesen im Wohnzimmer
        Fliesen im Wohnzimmer ist nicht so gute Idee. Ich empfehle nur Holzfußboden, besonders wenn man im Sommer barfuß gerne läuft....
        Gestern, 19:07
      • Rauch17
        Antwort auf Geschenk fur Chefin?
        Letztes Mal habe ich meiner Chefin eine Orchidee mit Lindt Schokolade geschenkt. Sie war sehr froh.
        Gestern, 19:05
      • Rehnat
        Antwort auf Geschenk fur Chefin?
        Sind ja wirklich so einige gute Ideen zusammengekommen, hoffe, sie haben dir dann auch helfen können?
        Aber, ich finde, dass deine Idee auch toll war... Kann mich meinem Vorschreiber auf jeden Fall anschließen, denn ich finde auch, das es nicht immer so einfach ist ein passendes Geschenk zu finden....
        Gestern, 12:48
      • Mr.Kennedy
        Antwort auf Webseite Domain Namen ändern?
        Sehr hilfreich. Ich konnte meine Domain zu kennedy-translations.com ändern. Danke
        Gestern, 12:32
      • Localfu
        Antwort auf Überwachung der Website-Verfügbarkeit
        Hi Peter,
        ich kann das auch kostenlos machen ohne euer kostenpflichtiges Tool und einige Webhoster bieten das kostenlos zum Service an. Zudem sind die Ausfalzeiten extrem selten. Jenachdem welchen Webhoster man hat. CULA.IO wäre für mich keine Alternative und würde bei mir die Kosten unnütz...
        Gestern, 12:16

      Kostenlose Homepage bei Jimdo!

      Einklappen

      Jimdo

      Die neuesten Beiträge

      Einklappen

      Lädt...
      X