Dropdown Menü | Ungewöhnliche Aktion

Stef · 3. September 2018

Hey zusammen,

ich habe nun ein Dropdownmenü selbst erstellt. Es funktioniert auch alles.

Eines verstehe ich nur nicht. Wenn ich auf den Button Menü auf klicke wird mir das Menü angezeigt sowie ein Button zum Schließen des Menüs.

Wenn ich nun die Seite größer mache sollte nach den CSS-Angaben eigentlich das Menü normal dargestellt werden und nicht als Dropdownmenü.

Aber das tut es nicht. Das Menü bleibt dann vorhanden. Erst wenn ich die Seite neu lade wird wieder alles normal angezeigt.

Ist das normal?

Grüße,

Stef

Sempervivum · 3. September 2018

Um das zu untersuchen, müsste man den Code sehen, am besten live über einen Link.

Stef · 4. September 2018

Hey,

ich habe es nun mal hochgeladen. Der Link dazu lautet: http://stef97.bplaced.net/responsiveMenu/.

Das ist der Code:

HTML: index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test</title>

    <link rel="stylesheet" href="css/style.css">

    <script>
        window.onload = function(){

            var showMenu = document.getElementById("openMenu");
            showMenu.addEventListener("click", show);

            function show(){

                var dropdownmenu = document.getElementById("menu");
                var showMenu = document.getElementById("openMenu");
                var hideMenu = document.getElementById("closeMenu");

                dropdownmenu.style.display = "block";

                showMenu.style.display = "none";
                hideMenu.style.display = "block";

                hideMenu.addEventListener("click", hide);
                
            }

            function hide(){
                var dropdownmenu = document.getElementById("menu");
                var showMenu = document.getElementById("openMenu");
                var hideMenu = document.getElementById("closeMenu");

                dropdownmenu.style.display = "none";

                showMenu.style.display = "block";
                hideMenu.style.display = "none";
            }
        }
    </script>
</head>
<body>
    <header>
           <nav id="navigation">
               <div class="navBrand">
                   <a href="#">Brand</a>
               </div>
               <div class="navFlex" id="menu">
                   <ul>
                       <li><a href="#">Menüpunkt1</a></li>
                       <li><a href="#">Menüpunkt2</a></li>
                       <li><a href="#">Menüpunkt3</a></li>
                       <li><a href="#">Menüpunkt4</a></li>
                   </ul>    
               </div>
               <div id="dropdown">
                   <button id="openMenu" class="dropdownButtons">Menü auf</button>
                   <button id="closeMenu" class="dropdownButtons">Menü zu</button>
               </div>
           </nav>
    </header>

</body>
</html>

Alles anzeigen

CSS: css/style.css

*{
    margin: 0%;
    padding: 0%;
}

header{
    margin-bottom: 2%;
}
/* Navigation */

nav#navigation{
    display: flex;
    padding: 1%;
    background-color: #778899;
}

#navigation .navBrand{
    flex-direction: row;
    width: 60%;
}

.navBrand a{
    text-decoration: none;
    color: orange;
    font-size: 16pt;
}

.navBrand a:hover{
    text-shadow: 2px 2px #cc7b24;
}



#navigation .navFlex{
    flex-direction: row;
    width: 40%;
}

.navFlex ul li{
    display: inline;
    list-style-type: none;
    margin-right: 5%;

}

.navFlex ul li a{
    text-decoration: none;
    color: black;
    font-size: 16pt;

}

.navFlex ul li a:hover{
    border-bottom: 2px solid black;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.65);
}

/* Responsive Design */

#dropdown button#closeMenu, #dropdown button#openMenu{
    display: none;
}

.dropdownButtons{
    padding: 2% 1em;
    background-color: cyan;
    color: black;
    border: 0;
    box-shadow: 2px 5px rgba(0, 187, 204, 0.51);
}

@media screen and (max-width: 1430px) {

    #dropdown button#openMenu{
        display: block;
    }

    .navFlex{
        display: none;
    }

    .navFlex ul li{
        display: block;
        margin-right: 1.5%;
        margin-bottom: 20px;

    }

    .navFlex ul li a{
        text-decoration: none;
        color: black;
        font-size: 16pt;

    }

    .navFlex ul li a:hover{
        border-bottom: 2px solid black;
    }
}

Alles anzeigen

Grüße,

Stef

Arne Drews · 4. September 2018

Also bei mir stellt er das wie gewünscht dar, wenn ich die Fenstergröße ändere. Lediglich der "Button" Menu auf/zu bleibt stehen, wenn ich es größer ziehe, ich vermute, das Du das in den MediaQueries vergessen hast?

Stef · 4. September 2018

Ich habe ja in meinem CSS zu den Buttons folgendes stehen:

CSS

#dropdown button#closeMenu, #dropdown button#openMenu{
    display: none;
}

@media screen and (max-width: 1430px) {
    #dropdown button#openMenu{
        display: block;
    }

}

Das heißt wenn die Größe des Bildschirms maximal 1430px hat soll der openButton erscheinen. Alle die größer sind bekommen dann wieder die display:none zugeordnet.

Was ich mir denken kann ist, dass es mit dem Javascript zusammenhängt. Aber eigentlich sollte es doch nicht sein ?

Sempervivum · 4. September 2018

Zitat

Was ich mir denken kann ist, dass es mit dem Javascript zusammenhängt. Aber eigentlich sollte es doch nicht sein ?

Deinen Code habe ich nicht analysiert, aber generell ist es so, dass CSS-Eigenschaften, die Du mit Javascript setzt, eine höhere Priorität haben als solche, die Du in einer CSS-Datei setzt. Vermutlich ist das die Erklärung für dein Problem.

Zitat

Stef · 4. September 2018

Hey,

Okay. Ich habe es nun versucht zu fixen aber ohne Erfolg.

Eigentlich wollte ich es über classList.toggle(‚show‘); machen. Aber dies funktioniert einfach nicht. Nur die direkte Ansprache der display Eigenschaft funktioniert.

Grüße,

Stef

basti1012 · 5. September 2018

Zitat von Stef

Eigentlich wollte ich es über classList.toggle(‚show‘); machen. Aber dies funktioniert einfach nicht. Nur die direkte Ansprache der display

Meinst du das so

https://basti1012.bplaced.net/…rdner=html-seminar&id=339

Wäre eine reine CSS Variante nicht Sinn voller? Oder für dein Vorhaben nicht geeignet?

Stef · 5. September 2018

Hey,

ja genau so meine ich es.

Zitat

Wäre eine reine Css Variante nicht sinn voller ? oder für dein Vorhaben nicht geeignet ?

Ich möchte es gerne in Javascript erstellen.

Ich muss trotz der Anwendung von classList.toggle("show"); das Menü auf display block setzten weil sich sonst nur die value der Buttons ändert. Das positive ist daran, dass sich der Button dann wieder bei entsprechender Browserbreite ausgeblendet wird und wieder das normale Menü angezeigt wird.

Darum habe ich den anderen Weg genommen, dieser ist aber auch nicht der richtige. Ich weiß nicht warum das bei mir nicht funktioniert. In deinem Fiddle funktioniert es. Finde ich schon sehr komisch.

Grüße,

Stef

basti1012 · 6. September 2018

Zitat von Stef

Ich weiß nicht warum das bei mir nicht funktioniert. In deinem Fiddle funktioniert es. Finde ich schon sehr komisch.

Kannst du den nicht funktionierenden Code mal Online stellen? Dann können wir mal kucken ob das bei uns auch so ist oder nur bei dir .

Hast du vieleicht noch was eingebunden ( bootstramp oder so )? Die klasse "show" wird ja auch von anderen Scripten benutzt, und vieleicht überschneidet sich das bei dir ?.

Lösch doch mal die Cache,auch das hilf ab und zu .

Zitat von Stef

Ich muss trotz der Anwendung von classList.toggle("show"); das Menü auf display block setzten weil sich sonst nur die value der Buttons ändert. Das positive ist daran, dass sich der Button dann wieder bei entsprechender Browserbreite ausgeblendet wird und wieder das normale Menü angezeigt wird.

Da das in der Fiddel ja auch klappt muß bei dir ja noch irgendein störenfried sein.

Stell das doch mal bitte Online vieleicht findet sich der Fehler ja

Stef · 6. September 2018

Hey,

Zitat

Kannst du den nicht funktionierenden Code mal Online stellen? Dann können wir mal kucken ob das bei uns auch so ist oder nur bei dir .

Hast du vieleicht noch was eingebunden ( bootstramp oder so )? Die klasse "show" wird ja auch von anderen Scripten benutzt, und vieleicht überschneidet sich das bei dir ?.

Lösch doch mal die Cache,auch das hilf ab und zu .

Siehe Beitrag 3.

Zu dem Classlist ist dies mein Code:

HTML

<nav id="navigation">
               <div class="navBrand">
                   <a href="#">Test</a>
               </div>
               <div class="navFlex" id="menu">
                   <ul>
                       <li><a href="#">Menüpunkt1</a></li>
                       <li><a href="#">Menüpunkt2</a></li>
                       <li><a href="#">Menüpunkt3</a></li>
                       <li><a href="#">Menüpunkt4</a></li>
                   </ul>    
               </div>
               <div id="dropdown">
                   <button id="openMenu" class="dropdownButtons">Menü auf</button>
        
               </div>
           </nav>

Alles anzeigen

JavaScript

window.onload = function(){

            var button = document.getElementById('openMenu');
            button.addEventListener("click", responsiveMenu);

            function responsiveMenu(){

                var menu = document.getElementById("menu");
                var button = document.getElementById('openMenu');

                menu.classList.toggle("show");
                
                if(menu.classList.contains('show')){    
                      button.innerHTML='Menü zu';
                }else{
                    button.innerHTML='Menü auf';
                }

            }          
        }

Alles anzeigen

Sempervivum · 6. September 2018

Unter dem Link in #3 finde ich aber nicht den Code wieder, den Du zuletzt gepostet hast (auch nicht nach Ctrl+F5)?

basti1012 · 6. September 2018

Zitat von Stef

Hey,

Siehe Beitrag 3.

Ich gehe mal von aus das zwischenzeitig der Code geändert wurde oder ? Weil ich sehe da nur den Code wo kein toggle benutzt wird ,also nur der mit close und open Button.

Wurde die Css Datei auch geändert ? Ich kann da keine klasse "show" finden. Habe auch F5 gedrückt aber bleibt alles beim alten

Stef · 6. September 2018

Hey,

Du wolltest ja meinen älteren Code wo es nicht geht sehen. Daraufhin habe ich dir die beiden Codes gezeigt.

Ich muss dann in CSS auch eine Klasse Show erstellen?

Wenn ja, habe ich das nicht gemacht. Daran lag es dann bestimmt.

Werde es morgen austesten.

Stef

basti1012 · 6. September 2018

Vieleicht hatte ich mich falsch ausgedruckt. Ich meinte den Code wo du das mit den Classlist ausprobierst. Aber macht ja jetzt nix weil der Fehler wahrscheinlich gefunden wurde.

Du brauchst eine Klasse wo du display:none ( oder block ) reinschreibst bzw das was toggle machen soll. Man könnte auch Farben hin und her togglen aber meistens wird es ja für ein und ausblenden benutzt

Sempervivum · 6. September 2018

Was mich betrifft, so hatte ich dich, Stef, so verstanden, dass Du es mit classList versucht hattest und dass es nicht funktioniert hatte. Deshalb hatte ich mich für diesen Versuch mit classList interessiert.

Stef · 7. September 2018

Hey,

aso okay.

Das Problem habe ich nun gefunden. Ich habe keine Klasse namens show gehabt. Erst als ich diese erstellt habe hat alles funktioniert.

Danke!

Grüße,

Stef

Dropdown Menü | Ungewöhnliche Aktion

Jetzt mitmachen!

Teilen