0
Ich versuche, ein Dropdown-Menü anzuzeigen, wenn die Größe des Bildschirms kleiner als 500px ist. Später werde ich die Navbar entfernen, so dass dieses Menü es auf kleinen Geräten ersetzt.window.innerWidth Wenn nicht ausgelöst
Code sieht gut aus und die Warnung Feuert aber das Menü nicht angezeigt.
TLDR: Brauchen Sie das Menü Show zu machen, wenn die Bildschirmgröße kleiner als 500px
JSFiddle: https://jsfiddle.net/mcgettrm/y4edsu73/
Code:
var dropDownFunction = function(){
\t var menuContent = document.getElementById("dropDownMenuClass");
\t menuContent.classList.toggle("menuShow");
}
var windowWidth = window.innerWidth;
\t if(windowWidth < 500){
\t \t alert("window is too small");
\t \t
\t \t var dropDownMenu = getElementById("dropDownMenu");
\t \t dropDownMenu.classList.toggle("mainMenuShow");
\t \t
\t \t
\t \t
\t }#dropDownMenu {
\t
}
.dropDownMenuClass{
\t display:none;
}
.mainMenuShow{
\t display: block;
}
#dropDownMenuContent {
\t
}
.dropDownMenuContentClass {
\t display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
\t width:100%;
\t text-align: center;
}
#dropDownMenuContent a {
\t color: black;
\t padding: 12px 16px;
text-decoration: none;
display: block;
\t
}
#dropDownMenuContent a:hover {
\t background-color: #f1f1f1;
}
#dropDownButton {
\t width:100%;
\t background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.menuShow {
\t display: block;
}<div id="dropDownMenu" class="dropDownMenuClass">
\t \t \t \t \t <button onclick="dropDownFunction()" id="dropDownButton">MENU</button>
\t \t \t \t \t <div id="dropDownMenuContent" class="dropDownMenuContentClass">
\t \t \t \t \t \t <a href="index.html">Home</a>
\t \t \t \t \t \t <a href="about.html">About</a>
\t \t \t \t \t \t <a href="itprojects.html">IT Projects</a>
\t \t \t \t \t \t <a href="languageprojects.html">Language Projects</a>
\t \t \t \t \t \t <a href="contact.html">Contact</a>
\t \t \t \t \t \t <a href="essays.html">Essays</a>
\t \t \t \t \t </div>
\t </div>
Eine alternative Art und Weise zu tun, Dies ist mit [Medienabfragen] (https://stackoverflow.com/questions/3605058 1/media-query-not-taking-effect-auf-browser-resize). – BSMP