Create a responsive navigation nav with no JS!
Start creating responsive layouts with confidence with my free responsive layouts course:
My very first video that I published here is one on creating a navigation. It worked, it looks good, and it's insanely popular (by far my most popular video). The problem is, it isn't responsive and is a bit old school in that it uses floats.
***** An important note, I've edited the CodePen a few times since publishing this. One is to not use `all: unset;` which Edge doesn't support. Another edit, which I talk more about lower in the description, was to make it tab-able *****
In this video, I take that same navigation but I update it to take advantage of modern CSS, making it fixed top, adding a semi-transparent background, creating the dropdown without any javascript, using flexbox and CSS grid to lay it out, and changing up the pseudo-element transitions to be higher performance.
A commenter kindly pointed out that this isn't tabbable, which is an issue and causes accessibility issues. I've updated my CodePen to take this into account. Basically, I changed the 'display: none' on the input, which makes it almost useless, to instead have a position absolute on it and moved it way off screen. Then, I made it so when the input gains focus, the label gets highlighted to give us a visual clue as well. If you'd like to check it out, the codepen link is down below.
Timestamps
0:00 - introduction
3:15 - starting the markup
5:15 - starting the CSS
13:40 - creating the mobile toggle
23:55 - adding in the animation
31:20 - styling it for large screens
39:00 - adding the pseudo elements
Codepen:
Related videos
CSS Variables:
Specificity:
Pseudo elements:
Hamburger to X animation:
CSS Grid:
---
I have a newsletter!
New to Sass, or want to step up your game with it? I've got a course just for you:
---
My Code Editor: VS Code -
How my browser refreshes when I save:
---
Support me on Patreon:
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.
Instagram:
Twitter:
Codepen:
Github:
Смотрите видео Create a responsive navigation nav with no JS! онлайн без регистрации, длительностью 44 минут 13 секунд в хорошем hd качестве. Это видео добавил пользователь Kevin Powell 16 Май 2018, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 473 тысяч раз и оно понравилось 13 тысяч людям.