Hallo zusammen,
ich bin aktuell dabei den Relaunch einer Website zu programmieren und getreu dem Motto "mobile first" habe ich natürlich mit der mobilen Version begeonnen, mit der ich bisher soweit auch zufrieden bin. Nun möchte ich aber zur besseren Übersichtlichkeit das Navigationsmenü über einen Button einblenden können, welches standardmäßig nicht angezeigt werden soll. Dementsprechend habe ich das Menü (mit der ID "dropdown-content") im CSS auf display:none gesetzt und möchte diesen Status nun beim Betätigen des Menübuttons auf display:block ändern.
Im Head meines HTML Dokuments habe ich dafür folgendes eingetragen:
Und im Body der Website dies:
Leider funktioniert dieser einfache Code nicht und ich kann mir nicht erlären, woran das liegt. Ich hoffe mir kann jemand von euch bei der Problemlösung helfen und ggf. lässt sich noch ein Fallback einbauen für Browser, die Javascript nicht unterstützen (bspw. das der Menübutton dort auf eine andere Seite verweist als normaler Link).
ich bin aktuell dabei den Relaunch einer Website zu programmieren und getreu dem Motto "mobile first" habe ich natürlich mit der mobilen Version begeonnen, mit der ich bisher soweit auch zufrieden bin. Nun möchte ich aber zur besseren Übersichtlichkeit das Navigationsmenü über einen Button einblenden können, welches standardmäßig nicht angezeigt werden soll. Dementsprechend habe ich das Menü (mit der ID "dropdown-content") im CSS auf display:none gesetzt und möchte diesen Status nun beim Betätigen des Menübuttons auf display:block ändern.
Im Head meines HTML Dokuments habe ich dafür folgendes eingetragen:
Javascript:
<script>
function myFunction() {
document.getElementByID("dropdown-content").style.display = "block";
}
</script>
Und im Body der Website dies:
HTML:
<nav id="mainmenu">
<nav id="mobile">
<ul id="mobile_nav">
<li class="outside">
<img src="img/icons/home.svg" alt="Home">
<p>Home</p>
</li>
<li id="mobile_menu" onclick="myFunction()">
<img src="img/icons/menu.svg" alt="Menu" onclick="myFunction()"> <!--id="active"-->
<p>Menu</p>
</li>
<li class="outside">
<img src="img/icons/search.svg" alt="Suche">
<p>Suche</p>
</li>
</ul>
</nav>
<ul id="dropdown-content">
<li><a href="">Neuigkeiten</a></li>
<li><a href="">Forum</a></li>
<li><a href="">Fanshop</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">Kontakt</a></li>
</ul>
<ul id="searchbar">
<li>
<input type="search" name="search" placeholder="Suche">
</li>
</ul>
</nav>
Leider funktioniert dieser einfache Code nicht und ich kann mir nicht erlären, woran das liegt. Ich hoffe mir kann jemand von euch bei der Problemlösung helfen und ggf. lässt sich noch ein Fallback einbauen für Browser, die Javascript nicht unterstützen (bspw. das der Menübutton dort auf eine andere Seite verweist als normaler Link).