How To Create a Hamburger Menu in HTML , CSS and Javascript | Responsive Navigation Menu

Подписаться 2,8 тыс.

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

50% 1

Today, I’m going to show how to create a Hamburger Menu using html css and a little bit of javascript , also we will make it reponsive navigation menu .
If you enjoyed the video don't forget to subscribe and turn on your notifications! , Like and Comment .
📺Subscribe To My Channel and Get More Great Tips : / @deltatycode
Codepen : codepen.io/m-mourouh/pen/JjMQjOz
Download files from here :github.com/Deltaty-Code/Humbu...
Paypal Donation : www.paypal.me/mourouh
Text Editor : code.visualstudio.com/?wt.mc_...
How To Create a Profile Card Using HTML and CSS
• How To Create a Profil...
How To Create Linkedin Loader Using HTML and CSS
• How To Create Linkedin...
How To Create Transparent Login Form Using HTML and CSS
• How To Create Transpar...
How To Add Loading Animation To Website Using HTML AND CSS | CSS Loading Page Animation
• How To Add Loading Ani...
FACEBOOK : DeltatyCode/...
INSTAGRAM : / mouhamedmourouh
LINKEDIN : / m-mourouh
𝗚𝗜𝗧𝗛𝗨𝗕 : github.com/m-mourouh
🎵 Music :
Music provided by NoCopyRightSounds.
Track 1: Culture Code - Make Me Move (feat. Karra) [NCS Release]
Watch: • Culture Code - Make Me...
🔊Free Download / Stream: ncs.io/makememove
Track 2 : BVRNOUT - Take It Easy (feat. Mia Vaile) [NCS Release]
Watch: • BVRNOUT - Take It Easy...
🔊 Free Download / Stream: ncs.io/TakeItEasyID

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

11 май 2020

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@DeltatyCode 3 месяца назад

Th source code for this Hamburger 🍔 menu is on Codepen: codepen.io/m-mourouh/pen/JjMQjOz

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

Beautiful. I love it when JS is kept simple like this!

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

thanks for this, it's the simplest tutorial for a hamburger menu on RU-vid! I had to rewind like 300 times but it's working! tnx again 🤘

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

thank you for your valuable comment

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

I was just struggling trying to make a hamburger button!! Thank you very much for sharing your knowledge

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

Thank you too , keep learning

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

You literally saved my life. Thank You

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

Thank you. Concise and effective. You saved my life. 👏🏿👏🏿👏🏿👏🏿👏🏿👏🏿👏🏿

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

This is quality. So simple and yet so brilliant. Thanks a lot.

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

Thank you so much , I love this video and the music !!

@sagarniroula3644 7 месяцев назад

Thank you so much for this... You taught me a way no other video taught me... Simple yet very very effective... Love you 3000!

@DeltatyCode 6 месяцев назад

Thanks 😊

@OpGamer-ge6ie 3 года назад

Awesome Tutorial! Works and its responsive! Thanks

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

Oh thank u

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

Great video! Solved my problem quickly.

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

Nice work, man. Thanks 🔥🔥

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

💖💖💖

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

Excellent tutorial, thanks a million !!!

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

Thank you so much Edwar

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

Thank you very much! very helpful video.

@josephmubita9835 Год назад

Thank you so much. You have really helped me!

@DeltatyCode Год назад

Enjoy it

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

I agree with last comment I,ve seen other videos to this regard yours was and is THE BEST EZ AND SIMPLE more importantly no hidden codes and tricks hope will see more video from you do you any JS videos ? I also encourage you do more simple video like this one.thank you

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

thank you for your valuable feedback

@gatishiphoshoko6529 6 месяцев назад

The javascript code solved my problem Thank you

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

thank you very much

@carliosogaming9604 8 месяцев назад

I found other solutions on internet they do the same with triple amount of code. Thanks for make it simple.

@DeltatyCode 7 месяцев назад

Happy to help

@arafathossain3778 10 месяцев назад

Great! very small and simple coding.

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

Thanks for this. I have managed to incorporate it in my page. I am still struggling with something. When I click the humberger menu and close it, the background color remains as instead of disappearing. I am still working on a solution.

@front-endanimal6359 4 года назад

very nice sidebar for my portfolio, i will use that. i'm too create video about that 😍

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

Thank you

@front-endanimal6359 4 года назад

@@DeltatyCode you're welcome!

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

awesome) i love it)

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

I love your code but what very wierd is how your images are used in tag which for some reason italic tag works as an Img? Very confusing & somehow my I'm don't active the nav .main menu to show so idk but still love your tutorial

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

tag is used to add icons from frontawesome library

@learnwithzafartech9531 3 месяца назад

i love it good job bro

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

Hey, good job. How do you select (at 01:43) 4 lines to write the same thing in the same time with VS Code ? Thanks

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

use this shortcut : shift + alt + ctrl + arrow_down

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

@@DeltatyCode ok, thanks a lot.

@daud8181 4 месяца назад

thanks, it's easy to practice and simple

@DeltatyCode 4 месяца назад

Glad it helped!

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

thank you man !

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

you are welcome

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

Thanks a lot Sir.

@user-qq3wi3gy3y 3 месяца назад

I just need to know how or where did you get the hamburger icon. I watched your video few times, I went to your repository on GitHub. I even copied and paste it on my VS to see if I was getting something wrong, but neither like that I could get to see the icon :( any comment about it? Thanks

@DeltatyCode 3 месяца назад

Yes, in this video I was using icons from FontAwesome library that had on my machine. But of course you can use CDN link and add it to use html file

@DeltatyCode 3 месяца назад

Check codepen where I used cdn instead : codepen.io/m-mourouh/pen/JjMQjOz

@user-qq3wi3gy3y 3 месяца назад

Thank you!

@billa4801 Год назад

Thanku soo soo much bro.. Its very easy.. I selected for a company😁🤝

@DeltatyCode Год назад

Hhh, So funny 😂. Enjoy it.

@billa4801 Год назад

Bro plz tell how to give nav ul li ul li >a show when i click. If i click than dropdown icon it suddenly goes up, the dropdown doesn't show plz send me the coding bro

@DeltatyCode Год назад

@@billa4801 , u can use css or javascript to do this . u can download the source code from the description section.

@billa4801 Год назад

@@DeltatyCode ok bro i will try

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

NOSSA IRMÃO TE AMO !!!!!

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

you are doing this job meine bruder just move on you'll be best

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

thank you so much

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

hey first of, your hamburger menu is very nice and helpful thanks for that! but I have one problem. i tried to add opacity to the nav menu, but when i do it is not working anymore (in the mobile version) (its scrolling very fast down and vanishes) can you help me please :)?

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

I think that if you change the opacity of the navbar , this won't affect the functionality of the hamburger menu, Just try to download it from here : github.com/Deltaty-Code/Humburger-Menu. Add the opacity in your style.css file and that's it . I hope this help you .

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

I love the simple js

@sickobleeds 9 месяцев назад

I have a problem. I reduced the size of the navbar and the hamburger wont show. Please any help would be appreciated

@DeltatyCode 7 месяцев назад

Probably, you need to change sideBar position as well when it's opened so you can see it

@nikolayliv9124 Год назад

very nice videvo, ij endžodžoj it veri mač, tenk ju sop much

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

for me, the first transition doesnt have a smooth entrance. what could be? thank u!

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

Same here even though nav .mainmenu{ has transition effect is somehow pops up not smooth too

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

I had the same problem, you have to set "top: -100%;" and "display: flex;" inside the media query instead of "top: 0;" and "display: none;"

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

@@santiagobonilla6306 Thank You :) :)

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

@@santiagobonilla6306 THANK YOU DUDE

@user-zn5fc6mh1f 3 месяца назад

I So wanna you this in CARRD. i'm struggling with understanding how to piece these codes together to work in a embed element i've tested the html in W3school but can't figure how to merge the cssstyle to work.. Or maybe i'm missing something any help would be great

@DeltatyCode 3 месяца назад

In this hamburger menu , I am using an external css file and a link element to link it with my html code. You can either use inline css or an external css file . I am using also Font-awesome library for icons so u need also to add that to your html to have icons on menu.

@user-zn5fc6mh1f 2 месяца назад

@@DeltatyCode do you have a discord by any chance?

@DeltatyCode 2 месяца назад

@@user-zn5fc6mh1f Yes

@DeltatyCode 2 месяца назад

@@user-zn5fc6mh1f Discord channel : discord.com/channels/1195699503915868230/1195699505115443315

@yoriichi2504 Год назад

Okay I made a site using this but when i debug it on codepen or git hub pages. On my phone menu bar is already opened for like 20px down blocking other elements on the site. How can i fix that

@DeltatyCode Год назад

You can use this sidebar menu instead : ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-QQlxvj_GKss.html

@yoriichi2504 Год назад

@@DeltatyCode Okay Problem Resolved : You just have to put height 85vh on @media query

@ODaro-mc7nm 3 года назад

hi, love u ♥ thanks

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

I love u too

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

thanks so much

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

gracias !!!

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

Awesome!!!

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

thanks a lot

@ellis-pr7hh 9 месяцев назад

little explanation would be really appreciated

@DeltatyCode 7 месяцев назад

Thanks

@makingtheweb6620 Год назад

I tried incorporating this into a website for practise. I cant get the bars to function when clicked. Can you offer any help.

@DeltatyCode Год назад

Hi, If the click event isn’t working this means there is an error or a bug in the JavaScript code . I propose you download the source code for this Hamburger menu from the GitHub and try to integrate it in your app. You will find the link in the description section.

@makingtheweb6620 Год назад

@@DeltatyCode Thanks for the reply. I used the burger.html css and included js file into the Visual Studio and made some more tags, but bars are still not working. Desktops navs going from page to page, just the bars. Hmm

@alial-faqi Год назад

Thank you, but I have a question, the first time I click on the hamburger menu, the transition doesn't happen

@DeltatyCode Год назад

You can get the code of this hamburger 🍔 menu from the Github link in the description section and check if u forgot something.

@soniinfo7005 Год назад

thank man 😇

@DeltatyCode Год назад

U’re welcome

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

Thanks :)

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

Hello, when I select one of menu - openMenu does not want to close. How to repair it? Thank you

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

to solve your issue , please check the source code in the description section,

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

hi Tazuzu did you sort this? I know where you're coming from, when you click the links the JS menu doesn't close unless you click the closeMenu? I'm just looking into this now...

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

I just added a new eventListner for mainMenu and it worked fine: mainMenu.addEventListener("click", close); Great tutorial Deltay Code! much appreciated.

@maganabiyev2111 Год назад

thank you!!!!

@DeltatyCode Год назад

U’re welcome

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

Great Job friend

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

Thank you very much

@candy_front 6 месяцев назад

thank u

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

Good one

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

thank you

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

Yo m8 i have some problems with this kts all DONE but when i try to close thr menu its not working. Can someone help me thanks ❤️❤️

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

might as well help him then m8?

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

Thanks bro everything is working but when I click on any menu it remains in the position, I want when clicked on any option shutter closes on itself.

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

To do this you just need to use a foreach loop for menu items and add an eventListen to each item so when it's clicked call the close function .

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

I have just updated the respo and I added this feature to the hamburger menu : you can download it from here : github.com/Deltaty-Code/Humburger-Menu

@sahilkadam9737 Год назад

I added Javascript tag everything but the sidebar is not working.. tell me y?

@DeltatyCode Год назад

I think you miss something in html but you can download the code from the description section 😉

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

In midea query (position: fixed), why is it necessary? If i not put position: fixed then my close & hamburger menu doesn't work. Why is it happen? Someone please HELP me.

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

Why Position fixed is necessary ? Simply because when you scroll down we want to the sidemenu to be fixed so if we use the absolute position we will not be able to see the sidemenu if we are in bottom of the page .

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

@@DeltatyCode Thank u bro.

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

Thank u

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

Welcome

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

i have tried this code and problem when i click clos menu and wat to click on menu bar again ...there is a proplem. i think somthing wrong on JS but i am beginer.

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

Check the source code in the description section

@AbrorxonAzizov-A.Y.E 7 месяцев назад

Zõr👍👍👍

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

how to have the 3 bars in full screen i would like to have it also even in full screen and how to add a direction to a link when you click on it

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

To add the bars icons use the fontawesome library

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

to add link onclick use the HTML tag

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

@@DeltatyCode where place the

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

@@mistergameur51230 in HTML file, just like this Contact

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

@@DeltatyCode its walking but I want that when I click on the instagram logo its redirects its just creates a link to ribbed

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

Why does my hamburger menu not going to the right? everything works fine but the 3 bars are stuck on the left side of my screen.

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

Try to watch this video where I created a hamburger menu using only css

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

I cant see the hamburger button, I verified it with replacing my code with the github code, and it's not working

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

you need to be connected to the internet because icons are imported from fontawesome library

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

@@DeltatyCode how is it transferred. can you help me?

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

@@meryem3068 Hey, you need to go to fontawesome website and get the url to post into your html area with the other links. That's how the take gets the icon. I don't know why this useless guy with his useless video didn't include this step.

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

how to place the menu on the left ?

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

You can place it on the left using position property , check this tutorial where u can see how to make sidebar menu : ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-_XRvPZzRIbo.html

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

I followed but the instagram icons never appeared

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

if it dos't appears , then u shoud go to fontawesome website , copy the tag element of instagram icon and replace it in your code. Instagram icon : fontawesome.com/icons/instagram?s=brands Or u can download the source code of this menu from this github repo : github.com/Deltaty-Code/Humburger-Menu

@autuhom5627 Год назад

@@DeltatyCode i copied the element but its still not showing

@DeltatyCode 3 месяца назад

Use FontAwesome CDN, and add it to your HTML file

@DeltatyCode 3 месяца назад

Codepen: codepen.io/m-mourouh/pen/JjMQjOz

@TheDStecher 11 месяцев назад

There's a lot of positive people here. I'm not completely one of them. My criticism is rooted in one simple thing: the use of an external library without proper disclosure to that fact. In the video, the library is referred to as a downloaded file but on Github, it's linked by url directly from the code. While it's called "fontawesome-free", that doesn't necessarily make it free to use. Using this code in a project either doesn't work off the bat or opens up a potential vulnerability on top of making internet connection a requirement for further development. Removing the references to the external library makes the rest of the code useless since they are key pieces to opening and closing the menu. I'd think it better for image files to be included in the project and referred to directly so that there is no reliance on foreign, unexplained or undisclosed elements. Other then that, very to the point guide and clean coding!

@sagarniroula3644 7 месяцев назад

i guess we could add a hamburger icon using three div's... not sure about the cross tho

@salletob Год назад

At minute 6.45 when I wanted to reduce to mobile, the bars disappeared. Unfortunately I abandon. Good luck to those who made it. Thank you

@DeltatyCode Год назад

You can download the source code of this hamburger menu from the link in the description section.

@autuhom5627 Год назад

The hamburger menu isnt popping up for me

@DeltatyCode Год назад

You can download the source code of this hamburger menu from the link in the description section .

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

fa characters not working

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

You can find the source code of this project in the description section

@programmers424 Год назад

Is it only me who wants an explanation with the code too? In like all videos they are only coding. Can someone send a link where there is an explanation too . As I am a beginner. It might be easy for u guyzsss

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

I don't even know where to begin, or where you went to start adding these codes. Or the platform. Would have appreciate steps

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

Can u tell me where u went and start coding plz thank u 🙂

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

I started coding when I was in university, then I decided to improve my skills by learning from the internet (RU-vid tutorials, coursera,openclassroom,....etc) , so always 'learn and practice' , this is my advice for u if u're new to the web dev.Good luck K Col 👍.

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

@@DeltatyCode i appreciate u thanks

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

@@DeltatyCode new sub