Create a RESPONSIVE NAVBAR with sidebar animation (CSS ONLY)
HTML-код
- Опубликовано: 21 фев 2024
- 👉 Get the best web hosting to deploy your website: www.hostinger.com/coding2go
✌️ Use our discount code CODING2GO to get 10% off on all web hosting packages with a duration of 12 months or more
BEGINNERS START HERE:
👌 Learn HTML5 in one afternoon with our beginner course: www.udemy.com/course/coding2g...
In this video we are going to create a responsive navbar that has an animated sidebar. I am going to explain everything you need to create a responsive navigation bar with a hamburger menu and a sidebar that has a slide in and slide out animation transition. We are going to use HTML, CSS (Flexbox). This is a CSS only solution that does not require any JavaScript (no js). You will learn basic how to use CSS Flexbox to align your navbar horizontally and vertically (as a sidebar).
Source code for the navbar on our website:
👉 www.coding2go.com
Menu Icon and Close icon:
👉 fonts.google.com/icons
#responsive #navbar #javascript #webdevelopment
CONCEPTS YOU WILL LEARN:
✔ HTML, CSS only
✔ Responsive Web design
✔ Flexbox Layouts
✔ Media Queries
✔ Google Icons (Hamburger Menu, Close Button)
ABOUT THE NAVBAR:
The basic Navbar is created in HTML and CSS
To make it behave differently depending on the size of the device that the website is being displayed on, we have to make it responsive. In the mobile view most of the links are hidden and accessable by clicking on a menu button (hamburger menu icon). It will expand a sidebar that uses CSS Flexbox to align the navigation links vertically. The sidebar has a slide in and slide out transition. To open and close the sidebar, we use google icons menu and close X. Using simple HTML and CSS Code we can realize this project without javascript using a simple checkbox and its pseudo-class :checked to check if the sidebar should open or not.
LICENSE FOR BACKGROUND MUSIC
Track: "Little Things"
Music provided by Slip.stream
Free Download/Stream: get.slip.stream/QmMj1I
Track: "One More Night"
Música fornecida por Slip.stream
Download grátis/Stream: get.slip.stream/8j1Eo5
Track: "Tropical Nights", Nico Sainato Tracks
Music provided by Slip.stream
Free Download/Stream: get.slip.stream/Hk8DVL
Listen on Spotify: go-stream.link/sp-nico-sainat...
Track: "South Africa", Nico Sainato Tracks
Music provided by Slip.stream
Free Download/Stream: get.slip.stream/WFuB3L
Listen on Spotify: go-stream.link/sp-nico-sainat...
like and subscribe if you read this 👍
You have no idea how useful this will be for me. I feel like I can write this from memory, now that I understand it all.
Beautiful! This was exactly what I was looking for! Ty for the great tutorial.
Thank you very much ! I have a question how do I keep the link "home" or logo for exemple in the desktop navbar (on the right) and not inside the sidebar ?
this helped me so much. tsm ❤
You are underrated :(
You are amazing
🎉 great
how would I implement the side bar without the need for mobile. i just want a side display like RUclips has next to its logo. Thanks!
Please, how do you make the home link on the navbar, join the other links to the right? Please help me
I can't get the elements inside of the links-container class to align to the flex start When using media query , can anyone tell me what could be wrong with my code?
top
Bro I can't control the open and closing transaction speed why?
and how you can close the sidebar whe you press the anchor element?
When you click an anchor element that links to another webpage (e.g., about.html), the browser reloads the entire page, effectively closing the sidebar. This is because the browser navigates to a new location and renders the new page from scratch, closing the previous page and its elements like the sidebar.
@@coding2go sorry i forgot to mention that my question is reffer to when you have anchors that link to another part of the same page, another div,class,id
My menu icon (three line) got stucked in the middle of the nav bar. Can you please help me
Is it possible that you applied "justify-content: center;" in your nav element? This will center all the elements in your navbar (including the menu button). If you want your links to be centered but not your menu button, then you need to apply "justify-content: flex-end;" on your nav element inside the media query. Hope that helps ✌️
If you want the source code to compare it check out our website: coding-kurzundknapp.com/coding2go.html
@@coding2go thank you!
Animated Navigation Bar in HTML and CSS | Menu Hover Animation Effects: ruclips.net/video/WVICLYVUDes/видео.html