CSS drop-down nav bar
Hello I am a noob in CSS and I got stuck in the tutorial hell it would be nice if someone could explain and teach me how to create a CSS drop-down nav bar without JavaScript btw cos I never get that language
4 Replies
To be honest, the way to do it without JS is a bit of a CSS hack, rather than the "correct" approach.
For interactivity, you generally want to use JavaScript, and for something like that, it's not too difficult and probably a nice way to learn very basic DOM manipulation, helping you get started being more comfortable with JS!
The CSS only way requires some specific ordering of elements in the HTML, hiding some stuff off-screen, and a trick or two with some selectors. It's a good learning opportunity as well, but I'd say learning to do it with JS would be a lot more useful in the long run, and probably less complicated, even if you aren't very comfortable with JS.
1. I have 1 brain cell
2. I can never get what a javascript line means especially the things you put down at the end of projects
3. what the heck is doom
4. your CSS tutorials were at least understandable I am trying to learn js can you pls help with the CSS approach
1 brain cell is more than some people I know in the industry š
This is a bit of a long video, but I look at styling a lot of things as well. To get to the functionality, you can start around 28 minutes in. It's more complex than I'd teach if I was looking at the absolute basics, but I made it to be accessible, which includes a few things that the CSS only solution can't do (updating some attributes).
If you feel like it's a little bit too complex, I'll see if I can think of a good resource that's hands on.
The DOM is the Document Object Model. It's the fancy name for the HTML. LIke, if you use
inspect element and you look at the HTML, that's not the HTML the person wrote, it's what the browser created based on the .html file, and other things. DOM manipulation is when you use JS to change stuff in the DOM, so add or remove a class, or add/remove content, among other things. (that's also why the DOM is not the same as the HTML, there are different things, like JS, that can make it different)Kevin Powell
YouTube
Responsive navbar tutorial using HTML CSS & JS
You can find the Frontend Mentor project here: https://www.frontendmentor.io/challenges/space-tourism-multipage-website-gRWj1URZ3
And the free Scrimba course here: https://scrimba.com/learn/spacetravel
š Links
ā
Why I use HSL: https://youtu.be/Ab9pHqhsfcc
ā
More on feature queries (@supports): https://youtu.be/wPI8CEoheSk
ā
More info on .sr-...