1
Ich habe eine Weile mit dem Dropdown-Code Code herumspielen. Die Ressourcen hier haben mir bisher nicht geholfen Wenn du zufällig einen relevanten Link findest, teile ihn bitte hier :) Mein Hauptproblem ist, dass das Dropdown-Menü nicht angezeigt wird. Ich schätze Ihre Hilfe sehr.Dropdown-Menü Fehler [CSS, HTML, Javascript]
Hier ist das entsprechende Skript :)
<script type="text/javascript">
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
Hier ist meine Arten
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: lightgrey;
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* The container <div> - needed to position the dropdown content */
.topnav {
position: relative;
}
ul.topnav li a:hover:not(.active) {
background-color: grey;
}
ul.topnav li a.active {
background-color: #2a8d7b;
}
ul.topnav li.right {
float: right;
}
@media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {
float: none;
}
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:focus {
background-color: #3e8e41;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
Hier ist mein HTML
<div>
<ul class="topnav">
<li>
<a onclick="myFunction()" href="#" class=dropbtn ">Filter</a>
</li>
<div id="myDropdown " class="dropdown-content ">
<a href="# ">Link 1</a>
<a href="# ">Link 2</a>
<a href="# ">Link 3</a>
</div>
<li><a href="#news ">Profile</a></li>
<li><a href="#contact ">Contact</a></li>
<li class="right "><a href="#about ">Impressum</a></li>
</ul>
</div>
Dieser Code stammt aus http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown –
Ihre erste '' hat ein nicht geschlossenes Klassenattribut (fehlende '' '), und danach alle Ihre Attribute haben ein nachstehendes Leerzeichen. Als Nächstes müssen Sie die hinzugefügte '.show' Regel implementieren. ... w3school ...? Oh mein. Benutze das nicht. –
Danke Chris. Gibt es Websites, die Sie empfehlen? – sabsa