Easy Multi-Level Dropdown Menu Tutorial - Using Only CSS (With Animated Dropdown Arrows)

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

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

50% 1

Easy Multi-Level Dropdown Menu Tutorial - Using Only CSS
Easy to Use & Easy to Customize
Today I have a multi-level dropdown menu or nav tutorial for you. This is very easy to setup and also looks nice with animated arrows to show dropdown menus. You can easily adjust this to work with your own website. We will only be using html and css to make this menu. As I mention in the video I recommend you read about css selectors if you are wanting to improve your css knowledge. Because we use these selectors I am calling this an intermediate level tutorial, this however does not make it hard to do. Each dropdown follows the same style: A input and label (making the category) followed by a (ul) and each (li) is the options to choice from or page links. I hope this helps :D
Have a great day and don’t forget to Like,Share the video and Subscribe for NEW VIDEOS every Week!
Subscribe- www.youtube.com...
Source Code:
www.mediafire.c...
CSS Selectors:
www.w3schools....
Previous Video:
• Daily UI - Day 048 - C...
My Links:
Website- caleredwards.com
Dribbble- dribbble.com/C...
Facebook- / caleredwards
Behance- behance.net/Cal...
GooglePlus- plus.google.co...

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

10 сен 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

Best! Saved me tons of Js code, thanks!

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

Best multi-level menu tutorial I've seen yet! Thank you soooo much!

@OttoLeholt 5 лет назад

thanks a lot Edwards - this is just GREAT - best tutorial on the subject I have seen :-)

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

This is cool tehniq, very clean and well organized

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

Thank you very much. This was exactly what I was searching for.

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

Great to hear!

@babyprintz 5 лет назад

Watched another video of yours prior to this one, on responsive menu and this video is like the next level up. Really enjoying your tutorials. Thank you!!

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

Excellent presentation. Thank you very much.As a novice, I was able to successfully replicate your process.

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

man I'm an effin designer taking my effin programing class, you saved my life, k bye.

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

This was a beautiful dropdown menu, as a beginner thank you so much

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

how r u know

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

Great video, thank you for sharing.

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

thank you!!!!!

@motivasyonbasar1456 7 лет назад

Such a amazing great work!

@user-is8jp1lc9o 4 года назад

Thank you, very much!

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

thanks from Ukraine! It helps me a lot

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

Awesome! Glad to hear that!

@pianoLee-sx9dx 5 лет назад

Hello! Is it possible to make this a position fixed? I tried it but then my scrollbar disappears...

@pianoLee-sx9dx 5 лет назад

I am glad that I have found your channel! This looks great both in terms of design and functionality! If I have any questions, are you able to help me? for some reason, it seems to affect the height of my footer....

@Uxarif 7 лет назад

Wow rely Your are very helpful sir Thx

@alisah4410 6 лет назад

I was wondering, if anyone knew where I could find a tutorial for a responsive menu (+submenu) that uses nav ul li (and so on) tags. For some reason its hard to find one. Using Wordpress so adding custom classes to menulinks is pain for someone like me who doesn't have that much of experiense!

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

Hi, did you find it ? I'm also trying to make a mobile menu on wordpress with a multilevel

@KAAN_TR 5 лет назад

Hi, How do you add “how many items listed” number on the right side of the title?? Example (30) thanks

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

how are you displaying those blue line for every div while working with padding ?

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

If I want the menu to be displayed all time and only sub menu to be display on click how to do this????

@pianoLee-sx9dx 5 лет назад

Hello! Is the overflow attribute important here? For some reason, the overflow hidden also affects my form tag

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

Hi. Very nice menu tutorial. Best i have seen so far. How can i change the background color of the drop down sections of the submenus so that it is clearer.

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

Hi, from this tutorial is there a way that you keep the control of open/close as you have it but the the navigation is open on load without using Javascript? Great tutorial! Thanks

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

This is very well done! Thank you ! I've read through the CSS L3 selectors and 'fancied this up a bit', but I'm not sure what the "hamburger menu item is for. I don't know why it's red, either. Could that effectively be 'hidden' or even removed?

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

Es un buen video, la verdad te felicito, pero... la funcionalidad del menú al dar click en el subnivel más bajo (habiendo ajustado las #herf), no se desaparece el menú.... dando un error de funcionamiento.

@arsalanshaikh3763 7 лет назад

Great thanx..

@pianoLee-sx9dx 5 лет назад

I am also curious as to why you use position relative here as opposed to position absolute? Because it tends to push my other positions relative images down

@fernandorochaolivera2404 5 лет назад

thanks for the video, question how can i create a transition when i click on the checkbox to open the ul.

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

Thanks for the great tutorial but it's not user friendly for website. User might scroll if nav items are getting increase but it's good for mobile

@MrJaxparadize 5 лет назад

Doesn’t work. Any of it. I get a bunch of errors in MVS... idk what I’m doing wrong. I have the exact code video creator has too. This is just not for me. I need to give up.

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

Good work.. (handshake)

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

source code Link broken.. can you please share me ? thanks for this awesome tutorial..

@aoam9194 5 лет назад

Wow I like it 😃

@borsaniasushant1 7 лет назад

Hi Caler, thanks for the video. Just one request. Is it possible for you to share the PS or XD file of project " I think design" in web design - video posted on Jan 24, 2017 please? I am beginner web designer and want to code for learning...