Responsive Dropdown Menü Navigation (nur mit CSS) Tutorial Deutsch

[@coding-kurzundknapp]

Code: Document mycompany Home Products Ebooks Courses Apps About Login ----------------------------------------------------------------------------------------- :root{ --background-color: #314453; --darker-background-color: #243848; --accent-color: #41DCE1; --text-color: #FFFFFF; --navbar-height: 80px; } *{ margin: 0; padding: 0; font-size: 22px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: var(--text-color); } html{ height: 100%; } body{ height: 100%; } nav{ height: var(--navbar-height); background-color: var(--background-color); display: flex; justify-content: space-between; align-items: center; } nav .logo{ margin-left: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 35px; font-variant: small-caps; text-decoration: none; } nav ul{ height: 100%; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; list-style: none; } nav li{ height: 100%; width: 150px; text-align: center; position: relative; } nav li:hover{ background: var(--accent-color); } nav ul a{ height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; text-decoration: none; } .dropdown{ height: min-content; width: 200px; background: var(--background-color); display: none; flex-direction: column; position: absolute; left: 0; top: var(--navbar-height); } .dropdown li{ height: 70px; width: 100%; } .dropdown li a{ justify-content: flex-start; padding-left: 30px; width: calc(100% - 30px); } nav li:hover .dropdown{ display: flex; } nav input[type="checkbox"]{ display: none; } .expandable_li{ display: flex; justify-content: center; align-items: center; } .toggle_button{ width: 30px; height: 23px; position: absolute; top: 25px; right: 25px; display: none; flex-direction: column; justify-content: space-between; } .bar{ height: 4px; width: 100%; background: var(--text-color); border-radius: 100px; } @media(max-width: 850px){ .toggle_button{ display: flex; } nav ul{ height: min-content; width: 100%; background-color: var(--background-color); display: none; position: absolute; top: var(--navbar-height); } nav li{ height: min-content; width: 100%; } nav ul a{ padding: 30px 0; } .expandable_li{ display: block; } .expandable_li label{ padding: 30px 0; cursor: pointer; display: block; } .expandable_li:hover .dropdown{ display: none; } .expandable_li input[type="checkbox"]:checked ~ .dropdown{ display: block; } .dropdown{ position: static; width: 100%; } .dropdown li{ padding: 0; display: block; position: static; background: var(--darker-background-color); } .dropdown li a{ width: 100%; padding: 0; justify-content: center; } #toggle_button:checked ~ ul{ display: block; } }

Das ist wirklich CSS Oberliga. Viel zu lernen und zu verstehen für mich. Danke für das Tutorial.. wird direkt mal nachgebastelt 👍

[@kidopa_fotografie]

Genial, kurz, knackig und voll mit Info's, die auch noch verständlich erklärt werden. 👍

[@jurgensubat2827]

Kurz und knapp, ohne viel Schnickschnack mit dem Fokus aufs Wesentliche. Klasse!

[@bkruemmel3178]

Das Turtorial ist mit abstand das beste zu dem Thema. Ich danke Dir für das Video und deiner Erklärung. Mach weiter so...😀

[@michaelstrau3495]

Echt gut gemacht. Um deiner Sprache hinterherzukommen brauchte ich zwar 0,75 Geschwindigkeit und bei deiner Geschwindigkeit zum Mittippen 0,5. aber zum Glück kann man ja runterregeln. Weiter so.

[@marcel_wendler]

Cool. Das ihr abkürzende Schreibweisen benutzt hat einen einen weiteren Lerneffekt nebenbei.

[@kaim.8462]

Dieses Video hat mir AMTLICH weitergeholfen :)

[@felixdergott5172]

Königliches Video + Erklärung, einfach top

[@iceman280782]

Super erklärt und bringt mich zudem was ich derzeit brauche. Zudem wird auch das mit dem Drop-down erklärt und wie man es auch für Smartphones programmieren kann, erklärt. Findet man nicht überall. Die css variablen sind neu für mich und werden jetzt im Projekt implementiert. Vielen Dank und weiter so mit qualitativ hochwertigen content mit deutscher Sprache 😅

[@IamOkqy]

Gut gemacht! hat mir sehr weiter geholfen, vor allem weil ich Flex nicht verstanden habe! 👑

[@Kawa4Mike]

Danke für das gute Video. Kurz und knapp, genau auf den Punkt gebracht. Es hat mir sehr geholfen. Vielen Dank ((-;

[@timomoehlenkamp6420]

Hervorragendes Tutorial! Vielen Dank!

[@TheSandLex]

Sehr cooles Tutorial! Hat alles geklappt. Konnte es durch die tolle, einfache Struktur super verwenden und einen (Mega) Dropdown MenüPunkt einbauen. :root werde ich jetzt immer für fixe Farben und Höhen verwenden. Thankxxx.

[@psychedelic-chi]

Top! Vielen Dank für dein Video!

[@MartinEckertStuttgart]

Bin erst jetzt auf euren Kanal gestoßen. Toll erklärt. Vielen Dank. Das beste was ich bisher gefunden habe. Einen kleinen Vorschlag habe ich noch, da der User in der mobilen Ansicht ja nicht weiß, dass er klicken kann um das Submenü aufzurufen. Ein kleines Chevron (˅) oder Dreieck (▾) hinter dem Wort "Products" löst das. Könnte man für das PC-Menü auch ausblenden.

[@svenergy5058]

Ich finde die Idee sehr gut, aber ich schaffe es leider nicht das umzusetzen, hättest du eine Idee?

[@lorddion508]

Dieser Moment wenn man das um 4:30 Nachts, bevor man schlafen geht, schaut und man denkt man hat unabsichtlich 300% Geschwindigkeit eingestellt. 🤣🤣 Trotzdem super erklärt. Vielen Dank.

[@Defzan]

4:19 Uhr hier😂

[@paula_vt]

Super Video! Vielen Dank ;)

[@cabo2313]

Kompetent. Einzige Kritik: zu schnell gesprochen und daher für die, die es anschauen, oft schlecht zu verstehen, so dass man's wiederholen muss. Didaktisch ist das nen minus, denn man macht ja Tutorials zur Lehre für andere. Plus ist dann jedoch der veröffentlichte Code, so kann man ihn in Ruhe anschauen. 👍

[@coding-kurzundknapp]

Danke für dein Feedback.

[@bjornprompeler9424]

sehr cooles Tutorial und tolle Tips, besonders var(--navbar-height) zu definieren und bei nav Höhe und zum Abstand / top für nav li zu nutzen hat mir sehr gefallen. Wäre das gleiche für das padding bei nav ul a und .expardable li sinnvoll oder spricht etwas dagegen? Vielen Dank und bestimmt nicht das letzte Video was ich von Dir schaue :D

[@coding-kurzundknapp]

Vielen Dank! Gute Idee. Dadurch, dass das padding in beiden Fällen gleich sein soll, ist es auf jeden Fall sinnvoll.

[@n4botz]

@Jeremy Slichcin Du musst lediglich eine neue Variable erstellen und auf gleiche Weise einsetzen. unter root: --navbar-padding-left: 10px; sowie im weiteren CSS mit var(--navbar-padding-left); verwenden.

[@ichmega1238]

Wollte fragen ob du den Quellcode auch als Datei hast (zum downloaden)

[@asensiodias1593]

Es wäre mega, wenn du immer deinen Quellcode mitgeben könntest ;) Ansonsten weiter so und gerne mehr zu HTML&CSS gerade in Verbindung mit JavaScript

[@n4botz]

Die Höhe für das und Element sollte man nicht auf 100 Prozent setzen, da diese so nicht mehr mit dem Inhalt wachsen und abgeschnitten werden. Eine Höhe für das Element ist überflüssig, da ohnehin nur der Inhalt des im Viewport des Browsers angezeigt wird. Weise dem und Element einfach mal eine unterschiedliche "border" zu, füge dann Inhalte in den ein (z.B. ) und schau dir an, welche Auswirkung die "fixe" Höhe von 100 Prozent hat. Verwende daher besser anstelle von "height" ein "min-height" und nutze "vh" (viewport-height) als Einheit. Wobei bei einer Mindesthöhe auch die 100 Prozent genutzt werden können.

[@das_Baerchens]

Ich fande es sehr interessant. Abo hast du.

[@coding-kurzundknapp]

Freut mich, danke!

[@Low2234]

Sehr cooles Tutorial! Ich habe noch nie programmiert und wollte fragen in welchem programm du deinen code schreibst? Außerdem, hat wer diese NAvigation zufällig schon auf dobe Portfolio eingebaut?

[@stdavid_]

Visual Studio Code

[@ichmega1238]

@@stdavid_ gibt es sowas ähnliches auch für Handys?

[@stdavid_]

@@ichmega1238 Auf Tablets oder Handys kannst du nicht wirklich gut programmieren, aber notfalls geht noch „Koder Code Editor“. Vielleicht krieg man auch Visual Studio Code irgendwie zum Laufen, da es ja eine Webanwendung ist. Musst du mal im Internet gucken.

[@ichmega1238]

@@stdavid_ es hat bei mir mal mit visual studio code geklappt aber fand ich nicht gut aber danke für die Handy-Alternative

[@StixxLetsPlay]

absolut genial, vielen dank dafür. das gibt mir einiges an wissen. Ich habe noch versucht das Hamburger Icon so gestalten, dass es beim anklicken zu einem x wird. bin allerdings kläglich gescheitert. hast du dazu noch eine möglichkeit?

[@tomsturm9597]

Hallo und vielen Dank für das Tutorial! Klasse! Ich habe das Menü nachgebaut und es funktioniert soweit. Jedoch auf einem iPad lässt sich das Dropdownmenü zwar öffnen, jedoch nicht wieder schließen - in der Desktopansicht. Am Pc und in der Mobile-Ansicht funktioniert Alles prima, aber auf dem iPad habe ich kein "hover". Was kann ich tun, damit die Checkboxen "unchecked" werden, wenn ich bspw. auf das Display des iPad tippe (praktisch in den Body hinein, außerhalb des Menüs). Momentan MUSS ich eine Auswahl im Dropdownmenü treffen, damit das Dropdownmenü auch wieder schließt. Herzlichen Dank im voraus für Deine Hilfe!

[@Schorsch180]

sehr gutes Video

[@zenamillan2086]

Danke für das super Video! Sieht ja echt nice aus, nur funzt bei mir das mit den Menu wenns Display klein ist (die drei Balken) leider nicht . Es verschwindet einfach komplett alles, und das obwohl ich sicherheitshalber den kompletten Code kopiert habe. Woran kann das liegen?

[@rogerschneiter]

Hallo. Meine Navigation ist links angeheftet, warum nicht rechts? Also das erste Item, About ist links direkt nebem dem Logo... Warum das?

[@kugelrilli4843]

Hallo ich habe ein Problem, und zwar habe ich mehrere Dropdowns, wenn ich allerdings auf der Mobilen Version einen Link anklicke öffnet sich nicht das dazugehörige Dropdown, sondern immer das am obersten liegende. Wieso ist das so, und wie kann ich diesen "Fehler" beheben ?

[@coding-kurzundknapp]

Hi, das Problem liegt höchst wahrscheinlich bei den IDs der anderen Dropdown Lis. Das input mit der jeweiligen Checkbox muss in jedem Fall eine eigene einzigartige ID haben, damit das dazugehörige label auch auf jeden Fall auf die richtige Checkbox verweist. Wenn du das Dropdown Menü also kopiert hast, kann es sein, dass du vergessen hast, eigene IDs festzulegen. Somit verweist das for Attribut der labels immer auf dieselbe Checkbox. Nämlich auf die des ersten Dropdowns. So würde das korrekt aussehen, wenn du mehrere Dropdowns haben möchtest: Products Ebooks Courses Apps About Ebooks Courses Apps Wie du siehst, verweist hier beim About Label das for Attribut auf "about_check". Wenn das auf "products_check" verweisen würde, wäre damit die Checkbox des Products Lis gemeint. Dann tritt dein Problem auf. Ich hoffe ich konnte dir weiterhelfen ;)

[@solusquinto]

Generell ein Top-Tutorial, danke für die Mühe! Jedoch addressiert es ein paar Probleme leider nicht bzw. finde ich als Anfänger die Lösung dafür nicht. 1) Die Breite der einzelnen li in der Nav-Leiste ist auf 150px festgelegt. Es wäre jetzt schön, wenn sich die Textgröße dieser Breite anpassen würde. 2) Das äußerste Dropdown wandert aus dem Bildschirm heraus. Wäre toll, wenn es sich entsprechend anpassen würde, sodass es nicht aus dem sichtbaren Bereich hinaus wandert. Vermutlich total einfache Problemchen, wäre für Hinweise dankbar.

[@coding-kurzundknapp]

Danke für dein Feedback. Hier ein paar Vorschläge für die beiden Probleme: 1) Du kannst statt "width: 150px" auch "min-width: 150px" festlegen. Auf die Weise sind die Lis mindestens 150px breit und werden breiter, wenn ihr Inhalt mehr Platz braucht. So muss man nicht die Textgröße anpassen. Außerdem solltest du dem expandable_li ein padding links und rechts geben, damit es besser aussieht. 2) Das äußerste Dropdown ist ja ein Kindelement des letzten Lis in der nav. Deshalb kannst du es mit "nav li:last-child .dropdown" ansprechen. Hier kannst du dann entweder die width anpassen oder den left Wert mit negativem Vorzeichen nach links verschieben (zum Beispiel left: -15px). Ich hoffe ich konnte dir weiterhelfen ;)

[@solusquinto]

@@coding-kurzundknapp Fantastisch, danke für die schnelle Antwort. Versuche ich direkt morgen umzusetzen. By the way ... bin froh deine Tutorials gefunden zu haben. Habe .root und variables vorher sonst noch nirgends gesehen ... vermutlich waren die zu "basic" ... kA. Werde das aber ebenfalls direkt morgen umsetzen. Macht alles viel cleaner.

[@solusquinto]

@@coding-kurzundknapp Hey nochmal! Das mit dem last child hat schon mal gut funktioniert, allerdings betrifft das Problem mit dem Bildschirmrand auch das vorletzte "child". Ich hatte gehofft es mit "nth child" addressieren zu können, aber das scheint nicht möglich oder ich habe es in ( ) falsch addressiert. Hatte dort das betreffende label eingetragen. Ansonsten sehe ich nur noch die Möglichkeit die Reihenfolge zu ändern :(

[@florianrmnn8347]

Das Dropdown menu funktioniert super jedoch habe ich ein Problem, unzwar würde ich es gerne wie einen Button benutzen den ich dann mit zb einer url verknüpfen kann damit ich darauf direkt weitergeleitet werden kann jedoch weiß ich nicht wie ich es hier verknüpfen soll ?

[@sagiciphantom]

Moinsen!🙋🏻‍♂️ Kennst du vielleicht eine Lösung für das folgende Problem? Undzwar hatte ich mit OceanWp und Elementor eine Onpage-Website gebaut. Aber alles Rechtliche (Datenschutz, Impressum und Haftungsausschluss) hat seine eigene Seite bekommen. Wenn ich beim Header wieder auf Startseite, Leistungen etc. klicke ändert sich oben NUR der Permalink, Aber ich gelange nicht wieder auf die Startseite. Es geht nur wenn man auf das Logo klickt. Wie kann ich bspw. von der Datenschutz-Seite wieder zurück auf die Startseite kommen, ohne auf das Logo zu klicken? Liebe Grüße, Firat✌🏼

[@mitchelix1797]

Leider läßt sich diese navigation auf Onepages nicht schließen, also wenn ich auf einer OnePage einen Link benutze dann bleibt die navigation offen . was muss ich tun damit das Menu schließt?

[@programmierenlernen6650]

Hey, sehr hilfreiches Tutorial! Funktioniert alles perfekt und sieht auch gut aus. Bei mir verschwindet aber leider der Kasten von der Checkbox nicht. Habe schon vieles ausprobiert, aber kann es einfach nicht fixen. Hast du eine Idee an was das liegen könnte?

[@coding-kurzundknapp]

Vielen Dank! Bei 6:18 setze ich das Display aller checkboxen in der Nav auf none. Falls du das schon gemacht hast, könntest du in den Developer tools (element untersuchen) nachschauen, ob du das Display eventuell an einer anderen Stelle überschreibst.

[@programmierenlernen6650]

@@coding-kurzundknapp Erst einmal vielen Dank für die Antwort. Ich habe das jetzt auch noch überprüft, aber irgendwie will es einfach nicht funktionieren... 🤔überschrieben wird auf jeden Fall nichts

[@programmierenlernen6650]

Hab's jetzt gefixt. Habe im CSS Code #toggle_button auf "display:none" gesetzt. Weiß zwar nicht, ob das die beste Lösung ist, aber es funktioniert

[@Avalon7272]

Ziehe ich direkt das Browserfenster kleiner, klappt alles mit responsive. Der kleine Hamburger kommt und alles ist gut. Wechsle ich aber mit Ctrl+Shift+M in den Chrome Entwicklertools in die Gerätesymbolleiste und simuliere dort die Ansicht bei verschiedenen Geräten, klappt es nicht mehr. Beispielsweise ersteckt sich die Navbar dann nicht mehr über die ganze Seite, hat rechts einen weißen Balken und auch der Hamburger kommt nicht mehr. Verlasse ich diesen Modus und mache das alles wieder im normalen Browserfenster, klappt es. Wo könnte das Problem liegen?

[@coding-kurzundknapp]

Die Entwickler Tools zeigen das manchmal nicht richtig an. Was ich da manchmal mache ist folgendes: Mit STRG + Mausrad Scrollen. Dann kommt oben rechts ein kleines Popup, was dir zeigt wie viel Prozent Zoom grade da ist. In diesem Fenster einfach auf "Zurücksetzen" klicken. Das löst bei mir meistens die Anzeigefehler in den Entwickler Tools.

[@timo3613]

Sehr gutes Video, hat mir sehr viel geholfen. Eine Sache will aber einfach nicht gelingen. Und zwar möchte ich die Texte innerhalb der ausgeklappten Drops zentrieren, so wie in der Dropdownauswahl. Was muss ich in der CSS ändern?

[@timo3613]

Ich hab nun doch noch eine Lösung gefunden. Und zwar hab ich die .dropdown li a wie folgt geändert: justify-content: flex-start; padding-left: 15px; align-items: center; justify-content: center; width: calc(100% - 30px); kannst du mir kurz sagen ob das so richtig war? optisch sind die Texte im ausgeklappten Dropdown mittig

[@coding-kurzundknapp]

@@timo3613 Ja, das hast du richtig gemacht. Mit justify-content: center; und align-items: center; kannst du den Inhalt eines Flex-elements zentrieren. Beachte aber, dass du das "justify-content: flex-start;" wieder weg machst. Es ist nicht zu empfehlen eine Eigenschaft zwei mal im selben Selektor zuzuordnen. Grüße

[@timo3613]

@@coding-kurzundknapp ich habe nun ein weiteres Problem bezgl. der Farben. Meine background color ist blau. Meine Textfarbe fürs Navigationsleiste ist gelb. Die Textfarbe für die komplette Seite ist ebenfalls blau. Das Problem ist nun, dass die Textfarbe der Reiter, welche sich ausklappen lassen, ebenfalls blau sind. Der Rest stimmt. Wo muss ich ansetzen?

[@timo3613]

hat sich erledigt, habe das label hinzugefügt und bearbeitet 😀

[@krixiii]

Hey, ich kann bei der mobilen Ansicht dann nicht auf die Striche("expandable_li")klicken damit sich das Menü öffnet, hab das Video nochmal geschaut um meinen Fehler zu entdecken, aber übersehe etwas. Weiß jemand woran es liegen könnte?

[@Novaliz78]

Erst einmal Danke für deine Mühe. Aber wieso kann man den Code nicht einfach zum Download anbieten? Es ist ja super, wie du alles erklärst, aber am Ende würde ich gerne den funktionierenden Code haben, da man beim Mitschreiben einfach Fehler macht. Ich schaue das Video nun zum dritten Mal, aber habe immer irgendwo einen Fehler, den ich nicht ausfindig machen kann. Als Anfänger hat man es da schwer. Das ist echt mühsam!

[@ichmega1238]

Ich will den Code auch als Detei zum downloaden 😂🤣

[@thatsmetv7226]

Problem schon gelöst oder brauchst du noch Hilfe?

[@kingaamii9099]

sehr gutes tutorial aber könnten sie bitte den html und css code anpinnen?

[@KarlOttoFranz]

super

[@jannnicja8520]

Könntest du ein video dazu machen, dass wenn man zb auf Product clickt das man auf die seite weitergeleitet wird?

[@foto-maker107]

Wenn du meinst auf deiner eigenen Website eine weitere Seite zu verlinken, dann musst du in demselben Ordner eine zweite .html Datei angeben (z.b.: "2_seite.html") dann verlinkst du in der Hauptseite den Link: Seite 2

[@Linuxdirk]

Die mobile Variante könnte man auch mit :focus machen start checkbox.

[@tillmannsinger9016]

Welches Farbthema verwendest du für deinen Code?

[@coding-kurzundknapp]

Ich habe mir für Visual Studio Code die Extension "Material Theme" geholt und in den Settings unter Workbench -> Appearance -> Color Theme das "Material Theme Darker High Contrast" Farbthema ausgewählt.

[@johannesstudent8631]

Hilfe ! ! ! Mein Togglebutton will nicht… Die Bars werden angezeigt und die Checkpoints funktioniert (cursor verändert sich) Mögliche Fehler/Probleme: Das nav liegt in einem header. Der header hat einen niedrigeren z-Index zugewiesen als das nav. Habe versucht dem tugglebutton auch einen z Index zu geben, hilft aber nicht … Danke

[@AtomTCP]

tnx bro

[@vcdresdene.v.1630]

Wenn ich mehrere Dropdown habe, wie bekomme ich es hin, dass, wenn ich in der mobilen Version ein Dropdown öffne, die anderen dabei schließen?

[@vcdresdene.v.1630]

Auch wenn man das Hamburger erneut anklickt, wie kann man alle Einstellungen wieder auf 0 setzen, sodass es beim erneuten anklicken nicht mit den zuvor geöffneten Dropdown startet?

[@tomr.6585]

Lehrreiches Video, aber könntest du evtl den Code in die Beschreibung packen zur Fehlehrsuche ? Bei mir funktionier nur die Hälfte haha

[@josyhaas8809]

wenn man ein zweites dropdown haben möchte braucht man dazu eine zweite ul oder nicht?

[@fabiannachname9135]

Ja. Jedes Li, was ein dropdown haben soll, ist gleich aufgebaut: 1. input (mit type checkbox) 2. label (für die checkbox) 3. ul (mit class dropdown) Bei 1:35 siehst du den Aufbau.

[@SCHLVFMVNGEL]

Sehr gutes Tutorial, das hat meinen Code nochmal ein bisschen aufgeräumt! Jetzt hätte ich nur noch die Frage, ob und ggf. wie ich in der Lage bin, dass die Navbar (beim Scrollen) stets oben fixiert ist. Soweit ich weiß, funktioniert eine fixed position aufgrund der Nutzung von Flexbox nicht... Wenn du da eine Idee hättest, würdest du mir ordentlich weiterhelfen! :)

[@coding-kurzundknapp]

Danke für das Lob! Bei dei nav kannst du problemlos position: fixed; festlegen. Du solltest nur dann darauf achten, die width auf 100% zu setzen und den z-index hoch anlegen. Zum Beispiel 10. Bei der nav also Folgendes hinzufügen: nav{ position: fixed; width: 100%; z-index: 10; } Viel Erfolg!

[@Fentanylcult]

Ich hab alles nachgemacht jedoch funktioniert das nicht . Hat das was mit html 5 zu tun ? Da es anscheinend nicht mehr benutzt wird . Trotzdem Danke

[@Fentanylcult]

Ich hab die Browsercach gelöscht und jetzt geht es

[@johnmuller6678]

@@Fentanylcult Am besten immer mit Strg + F5 reloaden, nicht nur mit F5; das löscht direkt beim Reload den Cache, ohne über das Menü gehen zu müssen. Dass ich mir das angewöhnt habe, hat mir die eine oder andere Frustration erspart. 😬

[@kevinlobisch4924]

Digger geiles Tutorial, aber wie schon beim letzten Mal, hast du vergessen, die Funktion auszuführen, wenn man auf die Links klickt, dass das Drop-Down-Menü danach geschlossen wird. Ich hab das damals mit Java gelöst, aber wie mache ich das hier?????

[@kevinlobisch4924]

ich brauche dringend deine hilfe, komme alleine nicht weiter

[@florianrmnn8347]

@@kevinlobisch4924 hast du es geschafft !? habe dass selbe Problem

[@thiemomelhorn3781]

Dieses Video ist im Grunde genommen schon gut erklärt aber dennoch zu schnell.

[@nilspeters3486]

Moin, danke dir für das Klasse Video. Das war genau was ich suchte. Leider wird in der Mobil Version bei mir nicht das DropDown Menü angezeigt. Wirklich alles klappt aber eben das nicht. Ich hab nun 8x das ganze ab Minute 8 mit meinem Code verglichen. Könntest du mir helfen? Leider finde ich kein Impressum damit ich dir persönlich schreiben kann. Grüße

[@coding-kurzundknapp]

Hi, wenn du sagst, dass du den Code ab Minute 8 mehrfach abgeglichen hast, kann es sein, dass der Fehler vielleicht ganz am Anfang beim HTML-Teil liegt. Vielleicht ist da eine Kleinigkeit schiefgelaufen. Hier mal zwei Sachen, die du überprüfen solltest: 1. Das For-Attribut vom Products Label und die ID der Checkbox sollten auf jeden Fall übereinstimmen, damit die Checkbox gecheckt werden kann. Das ist notwendig, um das dropdown ein- und auszuschalten. 2. Das Dropdown Menü sollte auf jeden Fall das letzte Kindelement des expandable_lis sein. In CSS verweisen wir nämlich mit dem Geschwisterselektor ~ , der nur für nachfolgende Geschwisterelemente gilt.

[@nilspeters3486]

@@coding-kurzundknapp moin. Danke dir für die schnelle Antwort. Schaue ich mir nachher an. Falls du helfen kannst/ nebenbei auch Jobs machst vielleicht kannst du mir bei meiner Seite helfen damit es nicht wie das Jahr 2000 aussieht. Brick-tracker de meine Daten findest du im Impressum. Grüsse

[@raltler]

Gutes Video, aber du sprichst etwas schnell. So als hätte man die Geschwindigkeit auf 1,5 gestellt.

[@joelwaelchli]

Könntest du denn Code herausgeben, bei mir hat es nicht funktioniert Liebe deine Videos

[@coding-kurzundknapp]

Danke für das Lob. Den Code habe ich jetzt als Kommentar angepinnt. Viel Erfolg!

[@m42ears]

Coding - kurz und knapp? Eher wohl schnell und hastig. Was los mit Euch CCs? Habt ihr das immer eilig wenn ihr solche Filmchen macht? Ich weiss, ich koennt das Video langsamer ablaufen lassen, mach ich aber nicht. Kannst Dein Wissen behalten. *Furz

[@canagenx-official]

Viel viel zu schnell bro

[@Toro-Tor]

sorry, kann dich nicht verstehen !!! 👎 Ich schreib dir ganz langsam, weil ich weis dass du nicht so schnell lesen kannst - aber bemühe dich mal normal zu sprechen, ohne dass ich die vidoe-geschwindigkeit rum-schrauben muss.

[@coding-kurzundknapp]

Danke für das Feedback.

[@svenergy5058]

HILFE! Ich habe den Code eingefügt und möchte nun darüber einen Banner setzen, aber egal was ich mache, danach verschwindet das Hamburger Menü, ich checks einfach nicht, kann mir jemand helfen? #header{ width: 100%; height: 130px; background: url(bilder/headbanner.jpg) no-repeat 5% 45%; background-position: left; }