Probleme mit verstecktem Menü (CSS display Status ändern)

6n4mpf

Grünschnabel
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:
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).
 
Das geht sehr gut auch ohne Javascript, wenn man den Checkbox-Trick verwendet:
Code:
    <style>
        #dropdown-content {
            display: none;
        }
        #hamburger:checked + #dropdown-content {
            display: block;
        }
    </style>
    <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">
                    <label for="hamburger">toggle menu

                      <img src="img/icons/menu.svg" alt="Menu" onclick="myFunction()"> <!--id="active"-->
                      <p>Menu</p>
                    </label>
                 </li>
                 <li class="outside">
                      <img src="img/icons/search.svg" alt="Suche">
                      <p>Suche</p>
                 </li>
            </ul>
       </nav>
       <input type="checkbox" id="hamburger">
       <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>
Die Checkbox muss direkt vor dem Element liegen, das aus- und eingeblendet werden soll.
Die Checkbox kann unsichtbar gemacht werden.
Die Position des Labels für die Checkbox ist beliebig.
 
Schonmal vielen Dank für deine Antwort. Deine Code funktioniert soweit auch ganz gut, nur ist er leider nicht valide. Finde es aber gut, dass es auch Möglichkeiten gibt, die man mit reinem HTML & CSS umsetzen kann, da bin ich ein großer Freund von. Bin heute noch auf folgende Seite gestoßen (https://www.w3schools.com/howto/howto_css_dropdown.asp), vielleicht ist ja etwas von diesem Code für mein Menü abwandelbar?
 
Interessanter Hinweis mit der Validität, dem werde ich mal nachgehen.
Vorgefertigte Menüs gibt es sehr viele, aber es ist manchmal schwierig, in der Fülle das zu finden, das genau das macht, was man sich vorstellt.
 
Ich habe es jetzt mal mit dem Validator überprüft:
1. CSS: The @charset rule may only occur at the start of the style sheet. Please check that there are no spaces before it.
2. Element p not allowed as child of element label in this context. (Suppressing further errors from this subtree.)
1. hat mit dem Checkbox-Trick nichts zu tun und lässt sich leicht beheben, indem Du das @charset direkt hinter das <style> platzierst oder an den Anfang der Datei, wenn Du das CSS ausgelagert hast.
2. Hier wird man mit einer kleinen Einschränkung konfrontiert in der Form, dass im label-Tag nicht alle Tags erlaubt sind, hier <p>. Lässt sich aber auch leicht beheben, indem Du z. B. ein span verwendest und entspr. formatierst.
 
PS: Zu dem Menü bei w3schools muss man noch sagen, dass Hover-Effekte problematisch sind, weil man, in diesem Fall das Menü, nicht zu Gesicht bekommt, wenn man mit einem Touch-Gerät unterwegs ist. Besser mit Klick einblenden.
 
Mach es via jQuery :)

Code:
$(‘.deineKlasse‘).on(‚click‘, function() { $(this).css(‚display‘, ‚block‘); }
);

Am besten mit einer IF Funktion zum Prüfen ob Display auf none oder Block steht :)
 
Zurück