How to Create Dropdown Menu using Flexbox Tutorial

Подписаться 40 тыс.

Просмотров 31 тыс.

50% 1

Dropdown menus are used in almost all the websites. In this video you will learn how to create a rdropdown navigation menu using Flexbox.
If you want to learn more about Flexbox you can watch this video: • FlexBox: How to use in...
Source: github.com/Godsont/Flexbox-Dr...

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

5 апр 2018

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 55

@glaums5832 6 лет назад

Hi, thanks a lot for this video. Is it intended that u use "display: block" and "display: flex" in "#main-nav a" together?

@GTCoding 6 лет назад

No, that was a mistake, display:block is not necessary in this case. I didn't notice that. Thanks for pointing that out. By the way, when we have a new display property, the old one gets overwritten.

@suzu6165 3 года назад

this video so under rated I didn't think of using Hover like that! this is one of the best navbar making video seriously (and trust me i watched literally down to 3 pages on youtube) thank you so much for the video

@GTCoding 3 года назад

Thank you so much :)

@mohdnaved4446 Год назад

Hi, i am from India and lots of love for this awesome tutorial thankyou thankyou so much ....♥😊

@adamfire4380 4 года назад

I have been trying all of the other vids for like 10 hours and none worked and then i came across this and it is amazing Thank you so much

@worldclasscode1847 2 года назад

Great comment ! :)

@chrislam1341 4 года назад

very good tutorial! but there are a little bit too much visual properties that might distract from the main ideas: 1. flex the ul 2. using flex-direction: column for the sub-ul 3. position relative to the li 4. position absolute to the sub-ul or sub-sub-ul Make sure the HTML is written correctly :)

@jakubjagielski46 5 лет назад

Man! You solved my greates mistery. I could not find the answer anywhere else. Thank you!

@mrhuaquito2708 5 лет назад

I learn a lot with this video, thank you :)

@shahalamansari9968 3 года назад

Nice and clear! Thank you for the tutorial!

@rakesmallik 5 лет назад

thank you very much GTcoding!!!

@this.channel 5 лет назад

This was an awesome solution. I just have to figure out that mobile version now.

@GTCoding 5 лет назад

Here is the tutorial for the mobile version: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-mmsbW4PuK9Q.html

@mo3ad96 5 лет назад

thanks a lot for this video

@worldclasscode1847 2 года назад

Great Video! :)

@mrzack184 4 года назад

Thanks man.

@user121304 4 года назад

Great tutorial. Do u have a codepen for this? Is this responsive ?

@MichaelAnablarley 5 лет назад

Great video

@HunterZackAndCloud 5 лет назад

thanks !

@mohammadalihassan4677 3 года назад

It works but you should do more to explain why if your aim is to teach people.

@ishan7824 4 года назад

why was there a need to give display:flex to tags first?

@HoaNguyen-qf2bg 5 лет назад

Thank you

@georgezhong1139 4 года назад

How can I make the navbar fixed at the top when I'm scrolling?

@thangphamang1969 5 лет назад

thanks u

@OttoLeholt 4 года назад

Thanks for your very great tutorial - it has been a great help for me :-) But the dropdown items in the menu makes the page ccontent below move down on the page .. what did I miss here ..?

@GTCoding 4 года назад

Thank you. You can find the source code in the description of the video.

@lucianosilipo5024 5 лет назад

Hey quick question, if you make the body padding 0 like you did in the beginning so the list lines all up on the left does that mean that from now on you can't make a list anywhere else on that web page that would display like a normal list?

@GTCoding 5 лет назад

Yes. It would set the padding and margin to 0 for any list created. I have done it this way just because I didn't need to have any other list in the page. If you would like to have other normal lists in the page. You could target the specific ul and remove the styles for the * selector. In this example, you could add the following rule in the CSS instead: #main-nav ul { margin:0; padding:0; }

@lucianosilipo5024 5 лет назад

@@GTCoding thank you for replying, makes sense! Have a great day

@lucianosilipo5024 5 лет назад

@@GTCoding oh one more question, the "a" items are within individual "li" items.. but is that necessary? can you just do something like this? Or did you do it that way for a certain reason? home about sample sample sample contact

@AmuaniCollection 5 лет назад

thanks for this..But i hope you explain it a little more slower...

@Gisbert-12843 3 года назад

i can tell you live in india cause of the honking cars XD

@jorgeartaza9030 4 года назад

Can someone help when I got the part to style the sub menu it doesn't work can someone help

@buildsworld Год назад

hi, i add the add but is in black how to i change color i follow everything the same

@mohdsubhan7366 6 лет назад

helloo sir please tell me which software u used ? what is the name of that software??

@GTCoding 6 лет назад

VSCode. Watch this: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-wzreuKDbLyk.html

@NedumEze 3 года назад

Thanks Bro for this help. Am wondering whether you have a video of the mobile version of this menu. I was expecting you would have done the mobile version first and then complete it with the large screen version. Cheers and thanks all the same.

@GTCoding 3 года назад

Here is the tutorial for mobile version: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-mmsbW4PuK9Q.html

@wolfenrico 6 лет назад

Thanks, super. Will you show us how to change this menu in to a responsive navigation? I tryed a lot but bad result! :-(

@GTCoding 6 лет назад

+Erich Wolf Ok. I will create a video soon.

@franktielemans6624 5 лет назад

@@GTCoding did you create this vid? Where can I find it?

@GTCoding 5 лет назад

@@franktielemans6624 Here is the link: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-mmsbW4PuK9Q.html

@arassen19 6 лет назад

Hi man, could you tell me how you can update CSS on "Live HTML Previewer". For example when I write background-color: red; and then change it to blue it does not update on live window for some reason. It only updates if I close and reopen the live previewer window. Any way to circumvent this issue? Thanks in advance.

@GTCoding 6 лет назад

Try Reinstalling the Live Server Extension and reload VS Code

@arassen19 6 лет назад

That was the first thing I did and unfortunately it failed. This is why I installed "Brackets" and working with it. This software does not update CSS changes in my pc.

@S4LTYT 5 лет назад

@@arassen19 use brackets it updates on time what u do on html or css

@kamsyd13 3 года назад

Why are u using css instead of bootstrap??

@Liciousshorts-i8s 6 лет назад

hello sir where can I get that code editor ?

@GTCoding 6 лет назад

You can download VS Code from here: code.visualstudio.com/ Also watch this video for more info: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-wzreuKDbLyk.html

@shahiduzzamanfoysal6932 4 года назад

need react project live, thanks

@MrDflego 5 лет назад

font-family: lato; dosen't work with firefox, I added this to the html page and it worked fine, great tutorial otherwise.

@rashmikenchappa1175 5 лет назад

Sir good morning can I get your mail ID I have one confidential important thing to discuss about my own startup awaiting for your reply sir....!!!

@GTCoding 5 лет назад

contact@gtcoding.net

@pythonmadeeasy900 3 года назад

Come on guy, something here doesn't make any sense: First you say: .submenu li { Display:none; POSITION: ABSOLUTE; top: 0px } Then you do the opposite: .submenu li { POSITIOIN: RELATIVE } IS IT "ABSOLUTE" OR "RELATIVE"??????