PHP Forum

PHP Forum (http://www.selfphp.de/forum/index.php)
-   HTML, CSS und JavaScript Help! (http://www.selfphp.de/forum/forumdisplay.php?f=24)
-   -   Drop Down Menü Java Script Hilfe! (http://www.selfphp.de/forum/showthread.php?t=25791)

Joko 22.02.2016 19:14:49

Drop Down Menü Java Script Hilfe!
 
Hi zusammen hier! Bin neu hier und bräuchte Hilfe!
Und zwar habe ich Probleme mit dem Drop Down Menü für mein Schachspiel. Ich habe einen mehrfach Auswahl bei dem Feld Spiel aber kriege es nicht hin bei den weiteren Menüpunkten in der Auswahl Anzeige wie zB Spieler weitere Auswahlpunkte zu bekommen. Ich füge mal den Quellcode ein vll kann jemand helfen. Habe heut schon mehrere Std damit verbracht(bin neu im programmieren).
HTML-Code:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

li.dropdown {
    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);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.show {display:block;}
</style>
</head>
<body>

<ul>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Spiel</a>
    <div class="dropdown-content" id="myDropdown">
      <a href="#">Neues Spiel</a>
      <a href="#">Letzten Spielstand laden</a>
      <a href="#">Spieler einladen</a>
    </div>
    <li><a href="#news">Spieler</a></li>
      <li><a  href="#home">News</a></li>
      <li><a href="email.php">Kontakt</a></li>
      <li><a href="impressum.php">Impressum</a></li>
  </li>
 
 
 
</ul>


<script>

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}


window.onclick = function(e) {
  if (!e.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    for (var d = 0; d < dropdowns.length; d++) {
      var openDropdown = dropdowns[d];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>


</body>
</html>



Alle Zeitangaben in WEZ +2. Es ist jetzt 09:15:48 Uhr.

Powered by vBulletin® Version 3.8.3 (Deutsch)
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.