No video :(

Mobile Friendly Navigation Menu WITH ICONS using HTML and CSS

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

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

50% 1

View the source code here:
codepen.io/dco...
In today's video I'll be showing you how to create a Sidebar Navigation Menu using HTML, CSS and a tiny bit of JavaScript - this is very easy to do and it gives a nice effect, perfect for desktop or mobile apps/websites.
Google Material Icons:
material.io/re...
google.github....
Support me on Patreon:
/ dcode - with enough funding I plan to develop a website of some sort with a new developer experience!
Follow me on Twitter @dcodeyt!
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#dcode #html #css

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

8 июл 2020

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

This was the absolute best out of the tons of "hamburger and responsive sidebar" videos I scraped, I got I was looking for and got more! Thanks a lot! Superb learning experience.

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

Really nice tutorial Dom. Very timely too as I've got to create something like this and probably use a media query to make the navbar look more like a conventional menu on a wider (than mobile) display. Thank you for taking the time to create and share it. Incidentally at 17:55 you mistakenly create a CSS property declaration `background: transform 0.3s` instead of `transition: background 0.3s`

@demian5511 Год назад

This preload hack saved my job easily! :) Thanks.

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

Hi can you make a tutorial on sending mail

@CricketHighlights-nt7nn 2 года назад

Absolutely a tremendous tuyorial, can't thank u enough

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

PhpMailer tutorial please

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

Thank you! You explain the uses behind the code very clearly and this is such a nice design!

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

If you want to prevent google you can use Font Awesome.

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

great video and thanks for providing codepen

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

Thanks a lot, can someone tell what to change to make sidebar on right side?

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

I also want

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

flex-direction:row-reverse

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

The only issue is overlay is all over the sidebar.. z index not working 👎also you did not add z index for overlay.. how it is going to work

@user-uf3mu4vo9t 3 года назад

you saved my day

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

Thank you so much for this Tutorial i learned a lot!

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

looks pretty good !

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

thank you for this tut, one of the most useful. really.

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

Thanks

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

Muito obrigado era mesmo do que estava a procura

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

Why do you set opacity to 0 and visibility to hidden? Isn't it sufficient to just to visibility : hidden?

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

then the 2nd time transition won't happen, cos opacity would already be the same

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

Looks great, thank you for this! ❤

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

Thank you for this tut. Looks really great! By the way, there is a problem with web accessibility: The navigation is visually hidden but is accessible through the keyboard.

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

For reference: behavior of bootstrap 4 navbar. It has 3 states: hidden, expand, and collapsing/expanding.

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

Hay bro can we control nav using thumb 🤷

@giovannimichel5506 Год назад

Thank you for the intel

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

Great job boss

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

i learnt alot from you :)

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

Hice el ejercicio! excelente tutorial.

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

amazing tutorial !!!!

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

Can you please demo this with Bootstrap 4 classes? I am sure the css code would be reduced drastically

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

how can i download the api so i can use this offline? pls🙏🙏

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

ok thanks u

@dcode-software 3 года назад

No worries mate

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

Every single individual who makes the hamburger buttons stops here. How about you connect the links on it and show how it works when clicking on the menu items. Many of these are not working properly inside a real website/