Mobile Navigation mit HTML CSS und JavaScript

[@Xcf_341]

Alter sieht das geil aus und denke auch mal wenn man das später ohne das Video nachbaut lernt man sehr viel dazu! Vor allem es verbindet halt alles miteinander (html, css und js) . Besten Dank 🎉📝🧩👀

[@ProgrammierenMario]

Herzlichen Dank! Freut mich 🙂

[@tomscall3811]

Da sieht man mal wieder, was du kannst. Sehr schönes Beispiel. Komplexer als ich gedacht habe. Schon sehr anspruchsvoll. Ich dachte jetzt kommt so ein einfaches Hamburger Menu.

[@ProgrammierenMario]

Hallo Tom, vielen lieben Dank. Freut mich sehr wenn’s gefällt. ✌️🙂

[@n4botz]

Optisch sieht die Navigation zwar ansprechend aus und mag so funktionieren, bezüglich der Umsetzung gibt es aber ein paar Kritikpunkte. - Das HTML Markup ist nicht valide, da zwischen den und den Elementen keine anderen Elemente stehen dürfen - Das Element für die Icons ist im Grunde überflüssig - In CSS sollte man möglichst lange "Selektorketten" z.B. mithilfe von Klassen vermeiden (Stichwort: Spezifität) - DRY ⇾ Don't repeat yourself, hier vor allem beim Aufbau des CSS und der Wiederholung von gleichen CSS-Regeln. Insgesamt aber ein leicht nachvollziehbares Tutorial für Anfänger. Ich würde in Zukunft nur darauf achten, dass der gezeigte Code auch semantisch korrekt (valide) ist.

[@ProgrammierenMario]

Vielen Dank für dein Feedback. Grüße :)

[@VinceKueng]

HTML, CSS und JS in einem Video, so habe ich nun auch etwas besseres Verständnis zu JS, wunderbar! Dazu auch die Handy-Navigation anstatt dem Hamburger Menü, was willst mehr. Vielen Dank Mario

[@ProgrammierenMario]

Super wenn alles gepasst hat. Vielen Dank für dein Feedback ✌️

[@saschabohm5343]

Top erklärt. Danke für das Video 👍

[@ProgrammierenMario]

Freut mich natürlich. Danke ✌️🙂

[@MediaworkerOnTour]

Absolut Klasse!!

[@ProgrammierenMario]

Vielen Dank 🙏

[@rive9314]

Das war wirklich richtig gut gemacht und erklärt. Vielen, vielen Dank🙏

[@ProgrammierenMario]

Das freut mich sehr!

[@cuyvaldar3924]

richtig kreative Idee, sehr gutes Video, gerne auch mal mehr Videos zu so kleinen Raffiniertheiten

[@ProgrammierenMario]

Alles klar, vielen Dank ✌️🙂

[@tobiasnoth2675]

Du bist fantastisch!!

[@ProgrammierenMario]

Herzlichen Dank ✌️

[@Marcinemos]

[@ProgrammierenMario]

Gern geschehen 😊

[@rapier64]

Super Video. Vielen Dank dafür Mario!!!😀

[@ProgrammierenMario]

Sehr gerne ✌️🙂

[@MyOliver64]

Einfach Weltklasse! Eigentlich so einfach und doch effektiv. Wenn es 5 Daumen hoch gäbe, würdest du alle von mir bekommen, oder besser gleich den Pokal: 🏆.

[@ProgrammierenMario]

Herzlichen Dank! Freut mich das ich dir weiterhelfen konnte :)

[@julienkrecke2872]

sehr gute videos! bitte hör nie auf

[@ProgrammierenMario]

Sehr gerne und vielen Dank 🙂

[@ralph2.0]

Super Sache, aber echt Anspruchsvoll. Ich dachte hier kommt eine Navigation mit HTML , CSS und JavaScript. Hu heftig. wo finde ich nochmal den Quelltext? Aber echt super die Navigation Ralph

[@ProgrammierenMario]

Naja ist ja auch nur HTML, CSS und JavaScript :) Der Source Code ist hier --> github.com/ProgrammierenM/mobile-bottom-navigation

[@georgiyankov2084]

Vielen Dank! :)

[@ProgrammierenMario]

Sehr gerne 🙂

[@Maasch]

Kranker scheiss!! Geil!!!

[@ProgrammierenMario]

Fröhliche Weihnachten ✌️🙂

[@TobCraft]

sehr gut geworden 😁 das ist ziemlich krass! das müsste youtube auch haben 😂in rot

[@ProgrammierenMario]

Vielen Dank! :)

[@TobCraft]

@@ProgrammierenMario es macht spaß dir zuzuschauen weil du das richtig gut kannst 👍👍

[@oliverdaniel4577]

Ich bin schwer beeindruckt, was du alles so aus dem "nichts" zauberst. R E S P E K T !!!

[@ProgrammierenMario]

Danke dir ✌️

[@peterk.2925]

Ich habe mir schon mehrere Videos angeschaut wo es um die Erstellung einer Navbar geht. Die meisten machen immer ul li a. Aber warum eigentlich nicht nur die a-tags in ein div?

[@ProgrammierenMario]

Hallo Peter, keine Liste zu verwenden kann dir vllt. ein paar Sekunden sparen. Dies ist aber nicht der richtige Weg sowas umzusetzen. Neben uns werden die Websites auch von Bots angeschaut oder von Blinden welche Screen Reader verwenden. Und dafür ist es wichtig, korrektes HTML zu schreiben. Wenn du eine Liste von Dingen hast, verwende eine Liste. Man gewöhnt sich schnell daran. Es ist somit auch leichter selbst die Semantik im HTML zu erkennen. Du weißt direkt um was es sich handelt, bei nav > ul > li > a Du weißt sofort was es ist und was es tut. Das gleiche gilt dann auch bei der Selektierung in den CSS Dateien. Dies kann bei umfangreichen Files ein "Gamechanger" sein um so schneller zu verstehen welche Anweisung für was zuständig ist. Klar letztendlich muss jeder selbst entscheiden. Nebenher hat es auch folgenden Effekt. Wenn sich ein -Tag innerhalb eines -Tags befindet, erhält das -Tag automatisch dieselbe Höhe und Breite wie . Wenn du das also nicht machst, wirst du feststellen, dass du nur auf den Text klicken kannst, anstatt auf das gesamte Element, in das du das einfügst. Hoffe ich konnte es dir erklären und dir damit etwas weiterhelfen. Grüße ;-)

[@peterk.2925]

@@ProgrammierenMario Ja das hat es mir sehr gut erklärt. Danke Mario 🙂

[@fumano2679]

Kann man auch alle anderen sections verstecken und immer nur das aktive anzeigen lassen?

[@ProgrammierenMario]

Ja das ist grundsätzlich möglich. Ich würde es allerdings so machen das du es auf mehrere Seiten aufteilst und prüfst welche Seite gerade aktiv ist und dann das entsprechende Bubble aktiv schaltest. Schon allein wegen SEO. Wenn du aber ein anderes Ziel verfolgst, brauchst du das natürlich nicht. :)

[@fumano2679]

@@ProgrammierenMario ich meine jetzt zum Beispiel sowas wie Instagram, da hat man die Navigation und wenn man auf ein Element der Navigation clickt, dann wird nur dieser Bereich geladen anstatt, dass man auf eine andere Seite weitergeleitet wird.

[@sennlich]

maus auf handy ist eher selten oder

[@ProgrammierenMario]

Kommt drauf an. Es gibt da so Adapter wo du eine Maus anschließen kannst ;)

[@lotharschmid656]

Habe schon viele gute Beitrag von dir hier sehen. macht Spass. Aber. Diese Navigation wurde schon vor 3 Wochen von Online Tutorial einem unglaublich guten CSS/HTML Kanal vorgestellt. Wenn man schon etwas nachmacht sollte man auch auf die Quelle verweisen. Der Vorteil hier du erklärst die Schritt dazu. Auf Online Tutorial wird nur gezeigt und nicht erklärt.

[@ProgrammierenMario]

Tut mir leid ich verfolge diesen Kanal nicht. Hab mich durchaus inspirieren lassen, aber die Quelle war eine andere welche auch um ein paar Monate älter ist. Du wirst es häufiger erleben denn jeder wird sich hier und da mal inspirieren lassen. Wichtig ist das jeder seine persönliche Note dazu gibt plus einen Mehrwert bietet. Vielen Dank für dein Feedback 🙂

[@lotharschmid656]

@@ProgrammierenMario Ja klar, die Inspiration holt man sich. Ist kein Ich würde jetzt am Anfang darauf hinweisen. Mach weiter so deine Videos machen Spass. Danke.

[@oscarm.1025]

Also wenn man schon Ideen von Online Tutorial "klaut" sollte man wenigstens dafür Sorge tragen, dass die Sachen möglichst auch laufen. Dein Quellcode funktioniert nämlich nicht, weil Dein Font Awesome Kit nicht mehr gültig ist und auf einen 403 aufläuft. Sehr ärgerlich für Anfänger, denn an solche ist das Video ja gerichtet. Zumindest bei Github und hier im Text sollte das behoben werden. Wirkt unprofessionell und hinterlässt keinen guten Eindruck. Du kannst gut erklären, doch einiges bei Dir ist überladen und lässt sich einfacher lösen. Nehme Dir mal die Kritik von @patloh zu Herzen.

[@ProgrammierenMario]

Vielen Dank für dein Feedback. Es hilft mir mich weiter zu Verbessern. Das ist der Weg ✌️