Frage Menu ein und ausblenden

[jan1996]

Hallo,

Ich schaffe es einfach ncht, das menu ein und aus zu blenden.

Was mache ich verkehrt?

Spoiler: Html

<nav id="menu">
           <ul>
            <li><a href="#screen1">Home</a></li>
            <li><a href="#screen2">Aktuelles</a>         
            <ul>
            <li><a href="#screen3">Jahr 2017</a></li>
            <li><a href="#screen3">jahr 2016</a></li>
            </ul>
            </li>
            <li><a href="#screen3">Mitglieder</a></li>
            <li><a href="#screen4">Download</a>
            <ul>
            <li><a href="#screen3">Newsletter</a></li>
            <li><a href="#screen3">Satzung</a></li>
            </ul>
            </li>
            <li><a href="#screen5">Kontakt</a>
           <ul>
            <li><a href="#screen3">Mitglied werden</a></li>
            </ul>
            </li>
            <li class="close"><a href="" id="menuhide">&uarr; Menü schließen</a></li>
        </ul>
</nav>
       <div class="open">
          <a href="" id="menushow">&darr; Menü Öffnen</a>
       </div>

Spoiler: CSS

.open{
   display:none;
}
.close{
   display:none;
}
@media only screen and (max-width: 1080px) {


nav {
   position: fixed;
    top: 0;
    left: 0;
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
     display:none;
}


.close{
   display:block;
}

.open{
   display:block;
   position:fixed;
   top:0;
   left:0;
    text-align: center;
   background-color: #333;
    width:100%;
    padding:18px 18px;
}

Spoiler: JAVASCRIPT

$(function(){

    $('#menushow').click(function(){
  
   if ( document.getElementById('menu').style.display == 'none' ) {
      document.getElementById('menu').style.display = 'block';
   }
      });

    $('#menuhide').click(function(){
  
   if ( document.getElementById('menu').style.display == 'block' ) {
      document.getElementById('menu').style.display = 'none';
   }
      });

Gruß


Jan

 

[basti1012]

Wie soll das den mal aussehen?
Ich weiß ja nicht, was du da genau vorhast, deswegen wollte ich nicht so viel ändern. Hätte ich aber gerne gemacht :)
Oben steht Menü öffnen und im Menü steht schließen.
Damit kannst du jetzt ein und aus schalten, wie du es wahrscheinlich vorhattest.
*** Link entfernt, weil nicht mehr erreichbar ***
Finde dein Vorhaben bis jetzt etwas umständlich, aber du bist ja noch am Bauen. Meld dich, wenn was ist, oder Hilfe brauchst.
Aber guck mal nach reinen CSS Menüs. Da gibt es schon reichlich, die fertig sind und ohne Javascript laufen. Ohne Javascript ist immer die bessere Lösung, wenn möglich. Aber muss jeder selber wissen

 

[Aaron3219]

Also es ist auf jeden Fall schon mal Fehlerhaft.
Bei deinem Javascript-Code fehlt die schließende Klammer, selbiges gilt für dein CSS-media-querie.

Javascript kann deutlich gekürtzt werden. Warum benutzt du die lange Version von Vanilla, wenn du schon JQuery am Anfang verwendest?

Schau dir die Toggle-Funktion von JQuery an. Damit kannst du deinen JS-Code auf 3. Zeile kürzen.

 

[basti1012]

Ich frage mich eigentlich wie sinnvoll es ist ,dieses

$(function(){
bla bla
})

zu benutzen.
Ich hatte das bis jetzt noch nie gebraucht.
Was sagt ihr dazu ?
Brauch man das überhaupt ?

 

[Aaron3219]

@basti1012 das ist Sinnvoll und nennt sich self-invoking-Function.

Das Prinzip dahinter ist, dass sie die Möglichkeit geben, Funktionen auszuführen, ohne sie im Global-Namepsace laufen zu lassen.
Globale Variablen sind dann also nur innerhalb dieser self-invoking-Funktion benutzbar.
So entsteht nicht das Problem, dass du aus Versehen Variablen überschreibst.

Edit:
Habe da noch mal was rausgesucht:
http://blog.mgechev.com/2012/08/29/...t-or-immediately-invoked-function-expression/
Das gibt dir alle Infos die du brauchst.

 

[Tronjer]

Das Prinzip dahinter ist, dass sie die Möglichkeit geben, Funktionen auszuführen, ohne sie im Global-Namepsace laufen zu lassen.

Richtig. Außerdem wartet es auf den Aufbau des DOM. Ist also ein Ersatz für $(document).ready().

 

[jan1996]

Danke für eure Antworten.

Ich habe leider nicht so viel Ahnung von Javascript.

Ich habe jetzt eine lösung gefunden die funkioniert

function showhide(id) {
       var divelement = document.getElementById(id);
       if(divelement.style.display == 'none')
          divelement.style.display = 'block';
       else
        divelement.style.display = 'none';
}

Gruß

Jan

 

[Aaron3219]

So und das hier ist meine Lösung:

<a onclick="$('#menu').toggle();" id="menushow">&darr; Menü Öffnen</a>

Dabei ist das hier:

onclick="$('#menu').toggle();"

alles was du brauchst.

Ich hoffe du verzichtest auf deine Lösung, auch wenn sie funktioniert. Nur du benutzt eh schon JQuery, warum also vanilla-JS.