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

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


    CSS
    1. #dropdown button#closeMenu, #dropdown button#openMenu{
    2. display: none;
    3. }
    4. @media screen and (max-width: 1430px) {
    5. #dropdown button#openMenu{
    6. display: block;
    7. }
    8. }

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

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

  • 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