Navigation Menu Sidebar | Bootstrap 5, HTML, CSS, JS
HTML-код
- Опубликовано: 16 май 2024
- Mit Bootstrap 5 und CSS, kann man sich jede Menge moderne Designelemente basteln. In diesem Tutorial programmieren wir eine Side-Navigation, die sich ein- und ausklappen lässt.
---------Links---------
Visual Studio Code:
code.visualstudio.com/
XAMPP - Server:
www.apachefriends.org/
Bootstrap 5:
getbootstrap.com/docs/5.1/get...
Fontawesome:
Icons:
fontawesome.com/v5.15/icons?d...
Link:
cdnjs.com/libraries/font-awesome
------TimeLine-----
0:00 Intro
1:09 Entwicklungsumgebung
3:40 Bootstrap installieren
6:01 Vorbereitung
8:23 Seitenaufbau
10:19 Sidebar designen
16:02 Sidebar header
38:49 Sidebar Navigation
1:03:33 Sidebar zusätzlicher content
1:15:46 Header Navigation
1:32:00 Sidebar close/open
1:37:35 Scrollbar designen
1:43:55 Outro
----------------------------
►Website: futuric.io
►GitHub: github.com/Niklas-Raczek
►Instagram: / futuric.io
Code erhältlich bei GitHub:
github.com/Niklas-Raczek/boot...
Vielen Dank fürs zuhören!
Über einen Like und/oder ein Abo würde ich mich sehr freuen :D
![Gunna - whatsapp (wassam) [Official Video]](http://i.ytimg.com/vi/bY1kLt4iz94/mqdefault.jpg)
I don't understand his language but I follow his tutorial 😅
Can't believe I subscribed to channel which I can't understand the languange. But I tried so hard to follow your step by step tutorial. Isn't it amazing?
danke shon
du bist ein lebensretter mann vielen, vielen dank!! steh mächtig unter zeitdruck und ohne dich hätt ich das nie geschafft. super tutorial, super erklärt, super strukturiert. top!
Ich danke dir! Freut mich immer, wenn ich jemanden damit helfen kann :)
@@YouKnowIT_Coding jetzt ist mir doch noch eine frage eingefallen; was müsste ich tun, damit die sidebar anfangs geschlossen ist? wär das kompliziert?;)
Das geht super schnell. Entweder du vertauscht den Inhalt der css Klassen bei sidebar & body.active .pagge .sidebar (beim sidebartoggle müsstest du das dann auch tauschen), oder die einfachere Methode ist: Füge einfach dem die Klasse active hinzu (). Genauso musst du es auch beim machen ().
@@YouKnowIT_Coding danke, super! das ging ja schnell☺️
Etwas lang, aber wunderbar Anfängergeeignet dadurch. Erfahrenere User können dann einfach durchskippen zu den Parts die Ihnen fehlen. Dickes Lob dass du die Zeitstempel in der Suchleiste eingefügt hast. Lustig, dass das ein relativ neues Video ist was ich gerade mal gebraucht habe.
Danke für das Feedback, das freut mich sehr :)
thanks for the code! youre awesome!
thank you so much for the help
Thank you so much, this video help me for my exercise🙏🙏
Wann kommt die Fortsetzung dazu? :3 Würde jetzt gerne die Verlinkungen usw. sehen wie das funktioniert. :3
Kann man diese Seite auch so anpassen, dass die weiße Kopfzeile erhalten bleibt. Wenn der Inhalt so groß ist, dass Sie anfangen zu scrollen
Hey, also wenn ich dich richtig verstanden habe, soll die NavigationBar bei Scrollen oben bleiben oder? Dafür gibt es 2 Klassen von Bootstrap, einmal sticky-top und fixed-top. Für deinen Fall denke ich ist fixed-top besser geeignet, denn da bleibt die Leiste immer oben egal ob gescrollt wird oder nicht. Die Klasse musst du deiner hinzufügen. Beispiele gibts hier in den Docs von Bootstrap: getbootstrap.com/docs/5.1/components/navbar/
Wie kann ich zur Laufzeit das Active-Sidebar-Item durch klicken wechseln?
Dafür müsstest du dann den Link entfernen, sodass nicht eine neue url geladen wird. Die items in der benötigen dann ein onClick attribute, wo eine javascript funktion aufgerufen wird, und das aktuelle element (this) als paremeter übergeben wird. In der Funktion musst du dann dir die holen mithilfe einer id (document.getElementById("IdDerUrl") und durch alle darin loopen (children) und dort alle active css klassen aus der class list entfernen. Dann zu dem geklickten element (eingabe parameter) die class active hinzufügen. Wenn du dazu ein Code beispiel brauchst, dann kommentiere gerne darunter erneut. Ich kann auch empfehlen ChatGPT zu verwenden, der kann bei solchen Themen extrem gut helfen :D
Hallo, kann man den gesamten Code irgendwie erhalten
Ja auf meiner Github page:
github.com/Futuric/bootstrap-sidebar
Da kann der Code heruntergeladen werden :)
sir can i get your source code?
Hey, tomorrow I will upload my project on github, and I will post the Link in Description, then you can download it 😎
Here we go: github.com/Futuric/bootstrap-sidebar
@@YouKnowIT_Coding Assalammualaikum thanks bro you give me🙏🙏
which langusge u speakin
German 🙈
How to add submenu with it?
You can do that by using a 'Collapse' of Bootstrap. Instead of creating an "" tag vor navigation-link, you can use a "" tag. Then you need to add some attributes like (data-bs-toggle and data-bs-target) wiche is refering to the collapse div. Then You create a div as collapse with a submenu using a list like the main menu and thats it.
The docs for collapse you can find here:
getbootstrap.com/docs/5.2/components/collapse/
Here is an example from Bootstrap:
getbootstrap.com/docs/5.2/examples/sidebars/