Тёмный

Dropdown Navigation Menu with Flexbox 

Angela Design
Подписаться 46 тыс.
Просмотров 40 тыс.
50% 1

Pseudo Elements Playlist: • Figma to HTML CSS | Re...
New to CSS Grid? Watch the full Crash Course here: • CSS Grid Crash Course ...
In this video I go over how to create this Dropdown Navigation Bar using only HTML and CSS. I show you the full front end coding tutorial, where I create the structure of the elements in HTML and then write all of the styling and effects with CSS. I use Flexbox for the layout and then add hover effects with a pseudo element.
Enjoying this tutorial? Subscribe to stay up to date with my latest content: / @angeladesign737
Codepen: codepen.io/angeladelise/pen/w...
In this video I show you:
0:00 - Intro
0:16 - Starting HTML Code
0:35 - HTML Code
3:14 - CSS Code
4:26 - Nav CSS Code
11:08 - ::After Pseudo Element
Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: www.youtube.com/watch?v=D3ZF2...
--
Gear
Microphone - amzn.to/34bDTxH
Hard Drive - amzn.to/30m5E5M
--
Let's Connect
Dribbble: dribbble.com/angeladelise
Blog: / angeladelise
--
DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!

Наука

Опубликовано:

 

6 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 54   
@madangopalpaul6534
@madangopalpaul6534 3 года назад
Thank you so much! I love all of your content, your way of explanation is very clear and understable ❤️your channel is really life saver when it comes to programmers who are self learning❤️
@pliniojr95
@pliniojr95 2 года назад
Thank you for this video! I was having a hard time on how to build a drop down menu without using JS, and I don't want to use JS for now to make it because i want to master CSS first, before I finally dive into JS, and your video helped me on this. Actually I'll have to spend some more time to understand the usage of the pseudo elements, like the one used to show that line under the parent li. Anyway thank you for the content and hugs from Brazil!
@hidarahmadi4473
@hidarahmadi4473 2 года назад
Thanks so much I have seen lots of tutorials but you explain your code or your next step very clearly. Lover the way you teach from now on I a gone follow your channel more and more 👏👏👏👏
@ashharmansuri6816
@ashharmansuri6816 3 года назад
Every cool ,I was looking for it but how to make it responsive?
@frankfrank4811
@frankfrank4811 2 года назад
Fantastic video! THANK YOU!
@breezedoart
@breezedoart 2 года назад
OMG! I was really struggling Thank You so much.
@beinyourguard
@beinyourguard 3 года назад
really simple, really nice and really easy to understand
@angeladesign737
@angeladesign737 3 года назад
Glad it was helpful!
@mridulrawat2640
@mridulrawat2640 3 года назад
Great fan of your videos. Can you tell me what shortcuts were you using while coding? How can you auto complete all the the html tags in codepen?
@danielcir8675
@danielcir8675 3 года назад
An amazing video, like all the others!!! Thanks Angela!!!
@angeladesign737
@angeladesign737 3 года назад
Glad you liked it!!
@hassaanahmed217
@hassaanahmed217 2 года назад
You are amazing Maam. Thank you soo much!
@bl7937
@bl7937 2 года назад
Thank you so much! Very nice tutorial and amazing explanations! Can you please explain how to perform this exact tutorial with a responsive navigation?
@colindante5164
@colindante5164 2 года назад
Thanks)). Does this technique work on mobile devices where by a user needs to tap on the menu to activate the drop down items ? Also, would the drop down be activated using the "tab" key to navigate? Could anyone please respond? thanks. ))
@fjdeveloper
@fjdeveloper 3 года назад
Great. Thanks for your explanation!
@angeladesign737
@angeladesign737 3 года назад
Glad it was helpful!
@kayodeadechinan5928
@kayodeadechinan5928 3 года назад
Thanks Angela, i like your design process
@angeladesign737
@angeladesign737 3 года назад
Thank you!
@avitalbercot
@avitalbercot 2 года назад
A very nice tutorial! But I'm using sublimeText to code in html/css and I can't put the line under the element of the menu bar... I can't write "&:hover::after" in this editor, there is another technique?
@martinstevenhernandez5040
@martinstevenhernandez5040 3 года назад
Thank you!
@Vidzhut
@Vidzhut 2 года назад
Amazing navbar. Can you make a video on how to make this responsive?
@tymiller2596
@tymiller2596 3 года назад
Hello there. Great Channel. Have you made a video on which modern way to "insert" header and footer across multiple HTML pages - similar to the way we used "includes" in .php pages in the past. Thanks you.
@angeladesign737
@angeladesign737 3 года назад
Not yet, but that's a great suggestion!
@ayaan3429
@ayaan3429 3 года назад
This is awesome!
@angeladesign737
@angeladesign737 3 года назад
Thank you!
@GodsMan500
@GodsMan500 2 года назад
Do you have a tutorial on making a responsive navbar which will transform to a hamburger menu on a small device? Thanks!
@joecok
@joecok Год назад
Thank u so much
@sianwa11
@sianwa11 Год назад
Thank you
@lxstorxlgm1667
@lxstorxlgm1667 3 года назад
Thanks !!
@nobody-bt7mu
@nobody-bt7mu 2 года назад
Thanks!
@SkyPunkki
@SkyPunkki 3 года назад
Nice video keep doing this content
@angeladesign737
@angeladesign737 3 года назад
Thank you!
@PixelGunner3D
@PixelGunner3D 2 года назад
cant u just use a table header and table list, that way u dont gotta remove all the list buttons and other stuff?
@scriptedpixelsltd
@scriptedpixelsltd 3 года назад
Do you need flexbox applied to the drop down items, with the gap? You’ve added padding to each list item & they’re already in a column naturally as they’re in a UL? Not sure if I’ve missed something here? Just curious
@angeladesign737
@angeladesign737 3 года назад
The gap provides a little more space between each element when they are in the hover state. Instead of using Flexbox you can accomplish this by adding a margin around each element.
@scriptedpixelsltd
@scriptedpixelsltd 3 года назад
@@angeladesign737 ah ok, see what you mean. Was just thinking that would having flexbox make the browser work a bit more doing layout over adding margins & paddings to space around elements
@botearners2350
@botearners2350 Год назад
Hello I am using this nav in my project but it is overlapping my content. And if I give Margin top to my components the whole navbar come down
@arshgoyal9622
@arshgoyal9622 2 года назад
Thanks
@yousufkhan2909
@yousufkhan2909 3 года назад
Your voice is as beautiful as CSS
@theangel3382
@theangel3382 Год назад
🥵👌
@user-wq2hy4yk8u
@user-wq2hy4yk8u 3 года назад
請問妳有考慮用中文講解嗎?
@movealongnothingtosee
@movealongnothingtosee Год назад
👏👏👏
@Pythogoras570BC
@Pythogoras570BC Год назад
I can assure you, that you have created the most comprehensive "Dropdown Navigation Menu with Flexbox" video. BRAVO! I am wondering whether one could profit from your services and if positive how one could get in contact with you.
@rohankumarshah5679
@rohankumarshah5679 3 года назад
as always great videos. Big Fan. please upload tutorials on React
@angeladesign737
@angeladesign737 3 года назад
Thank you! I have a few tutorials on React on my channel, like this one: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-4KxHcbQ8GYQ.html
@rohankumarshah5679
@rohankumarshah5679 3 года назад
@@angeladesign737 great
@fredpourlesintimes
@fredpourlesintimes 2 года назад
Why are you using SCSS? Bad idea.
@MrBoiks
@MrBoiks 2 года назад
How do you mean?
@bigmac786
@bigmac786 2 года назад
you shouldve mentioned in the title that you were going to use SCSS, wasted my time coding this out
@devbash
@devbash 2 года назад
Literally within the first minute she said SCSS was being used.
@thedoctor1929
@thedoctor1929 4 месяца назад
ha. funny. joek's on you. the necromacing here is mainly to let people know that css IS provided. here's a fun--ner fact: you were given all the tools to succeed in replicating this; css included if you see the description the link takes you to codepen which allows to compile scss and will show exactly the css output. you can swap between the two
@ClaudioJrTsuyosa
@ClaudioJrTsuyosa Год назад
SCSS??????? WTF
@theangel3382
@theangel3382 Год назад
Xd'nt?
@shravyavenny3767
@shravyavenny3767 7 месяцев назад
Thankyou sooo much🫂, im struggling with this for more than a week, watched many videos but nothing helped 😢
Далее
Animating Tab Bar | HTML CSS JS Tutorial
11:26
Просмотров 3,9 тыс.
Yeni Özbək Mahnisi Yoxsa Vefali Reqsi? 😍
00:36
Просмотров 1,3 млн
skibidi toilet zombie universe 34 ( New Virus)
03:35
Просмотров 2,1 млн
How to Create Dropdown Menu using Flexbox Tutorial
15:43
Dropdown Navigation Menu bar Using Flexbox in Hindi
9:49
You can do that with margins?
14:40
Просмотров 185 тыс.
Responsive CSS Grid Tutorial
17:14
Просмотров 814 тыс.
🛑 STOP! SAMSUNG НЕ ПОКУПАТЬ!
1:00
Просмотров 347 тыс.
When you have 32GB RAM in your PC
0:12
Просмотров 680 тыс.
Blackview N6000SE Краш Тест!
1:00
Просмотров 37 тыс.