Dropdown Menü | Ungewöhnliche Aktion

  • 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

  • Hey,


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


    Das ist der Code:



    Grüße,

    Stef

  • 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?

  • 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 ?

  • 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
  • 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

  • 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

  • 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 .


    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

  • 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:

  • 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

  • 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

  • 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

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!