Responsive Navigation with Animated Multi Level Dropdown | HTML and CSS Tutorial

[@CheapHomeTech]

Wishing for more: 1. Sticky menu. 2. Hamburger on left. 3. Hamburger that only takes up the room that is needed instead of the whole page. However it's the best how-to I've come across. Thank you.

[@vojtechkochta6436]

I must say.. One of the best tutorials ever. Got exactly what i needed and didnt know about

[@ainaopeyemi339]

Hello, i know that right now it might seem u don't have much subscribers, but i assure u that we are many looking for your content, don't ever stop pls, u are really helping us, just keep releasing until KZbin discovers Ur value and increase your reach via algorithm, thank u.

[@juliocodes]

Thanks for the kind words, aina! No worries, I enjoy teaching you guys so I’ll always post new videos.

[@PhilipRice]

This is the most comprehensive web programming tutorial on the nav bar that I've ever seen, it's crystal clear - thanks so much for producing it! Subscribed and looking forward to more.

[@juliocodes]

You're very welcome!

[@lazarzbiljic4903]

Cen you send me a code

[@nomoretruelover]

i am not a developer but health professional, just part-time learning python and working on a personal django project. your tutorial is very helpful, creative and digestible. a newbie like me can understand easily. i don't like to comment or subscribe channels but your video forced me to follow you and leave a comment. thank you very much

[@juliocodes]

Thanks for the kind words. I appreciate the support. Good luck with learning!

[@disturbingdevelopment4308]

I picked up a lot of tips because Julio explains things very well as he writes the code. Very nice dropdown menu also.

[@WisestGeneration]

I’ve been looking for a channel like yours for a VERY long time. Love your work!

[@juliocodes]

Glad you found it useful!

[@HelloWorld-om6uh]

I just love how you tought me bro , god bless you !

[@craigjohnson8279]

Great video! I love that you only use HTML, CSS, and JavaScript.

[@idrisertem9793]

This guy recorded this between 3 and 4 am in the morning damn.

[@juliocodes]

Due to my busy schedule I had to record whenever I got the chance, which usually was very late/early AM. Now a days I barely even have time to record anything

[@idrisertem9793]

@@juliocodes how does your brain still function around that time, and the next morning?

[@shahzaibriaz6552]

Trust the best tutorial i've ever seen. One of most loved tutorial on internet (youtube) Love You Dear.

[@juliocodes]

Thank you so much 😀

[@ThatGuyAnonymous]

The quality of the content compelled me to subscribe. keep it up man!

[@juliocodes]

Awesome, thank you!

[@АзимАзимов-ч1й]

This best tutorial for adaptiv menu. It is help me finish my current project. Awsome. Thank you

[@keyos27]

Congratulations on 10,000! Keep going!

[@juliocodes]

Thanks, Yong!

[@MrNotSelc]

Congratulations for your 10k subs!!!

[@juliocodes]

Thanks!!

[@MrSiamtea]

Best responsive navbar tutorial ever 👍👌😊

[@Series-cr7hi]

your coding way is awesome but some issue arises in javascript coding //create function to select element const selectElement = (element) => document.querySelector(element); //open and close nav on click selectElement(element:'.menu-icons').addEventListener(type: 'click', listener: () => { selectElement(element: 'nav').classList.toggle( token: 'active'); }); element: ----> colon is not accepted what should i do

[@gamerandmemer5016]

Everywhere you specify with colon. It's not in code it's just reference gives by ide tool. Check the video. When he commented the code. The reference is gone.

[@binkositideslors1491]

thanks for course but i have got a question for you, how to make a slide menubar in responsive like for amazone without a burger thanks

[@cjdj1834]

I love your tutorials Julio.Cool stuff!

[@juliocodes]

Thanks!

[@Mohamed_Amine_Bennacef]

[@fullstackprojects5615]

Very Informative thank you for sharing. Thank you. One thing - Please briefly explain certain points that were not touched upon for example why 'initial' was used, how the compound selectors were working in the entire nested drop downs, why the 'Book a table' buttons' margin was set the way it was set, how the triangle shape was achieved. I know this would make the video long but please see if such things can be covered because it makes the learning and doing along the way smooth and without distraction(going to search in another tab and understanding the concept and then coming back).

[@davidsulaberidze5978]

An excellent tutorial. Thank you very much.

[@alkasingh6205]

Hi I referred your GitHub page for reference and the codebase doesn't contain navbar section. kindly check and update the codebase .

[@mdhasiburrahmannafiz9984]

Sir there is a another issue. After completing the whole thing the first sub-menu contain 'Breakfast, lunch, Dinner' elements cannot be hidden without reload the page. I think that at Menu here a toogle effects of JS shoulb be used. Thank sir for this awsome tutorial ❤❤

[@acmmproductions]

Thank you for this tutorial! Your videos are very clear and the result is always so sleek. I just finished following the tutorial and noticed that, by the end of it, my circle behind the logo icon is slightly oval (this is in desktop view, but in mobile view it’s a perfect circle). This is such a minor detail, I think in your final result this isn’t happening, so I must’ve done something wrong. Thanks again for another great tut!

[@juliocodes]

No problem! And that’s normal because of the content inside of the nav all up next to each other. In the real world you’d be using an image for a logo so you won’t have to worry about it. I did it this way to save myself time apposed to using something like photoshop.

[@PaulCade]

If you add min-width: 5rem; to .logo class in your css it won't squash up

[@juliocodes]

Paul Cade Nice catch. Though, this approach is only logical for demos. It’s better to use an actual image.

[@wernerw.1328]

pls help: I followed the video 3 times but I can´t find the error. Everything is ok when I have the full screen. But in the responsive part I don´t have the menu. Where can I see the code for looking point by point to fix the bug(s). I find this work so excellent and I´m eager to build my own website like this example

[@fabiobaziota5919]

Awesome, explicit and clean... ❤🔥

[@MuhammadIslam-qi2tf]

Helpful tutorial, from where i can get the source code

[@jeanhz1065]

30:47 at the moment of passing the cursor through each submenu I get everything in the horizon and not in the ladder, I did everything but I do not get help please

[@nayeemuddin4625]

I just love the way of your work...

[@juliocodes]

Thanks!

[@绿叶-t7c]

Best tutorial I have ever seen, Thanks

[@juliocodes]

Glad it was helpful!

[@Eugenii2233]

Make a video about your system and configuration. Looks good :)

[@AlanDecoster]

Thanks you very much !! It's really the content I needed to learn.

[@haykazantonyan7561]

Thank you for the wonderful tutorial. But I have an issue regarding the java script . When I click the icon, it doesn't work. Uncaught SyntaxError: missing ) after argument list.

[@estergracelipke5621]

Thank you very much! ❤

[@sextronnics]

If you want to have 3 dots displayed for example behind "More" you can also use the special chars to do so the one you'd need to do so is … as far as I know this is supported by all major browsers including a lot of very old and new browsers... Happy coding!

[@xAndre-SDM]

Another very nice tutorial. Thanks!!!

[@juliocodes]

No problem!

[@rapx21x]

Guys, if u have any problem about js part(mobile), you can use this code: const selectElement = (element) => document.querySelector(element); selectElement('.menu-icons').addEventListener('click',() => { selectElement('nav').classList.toggle('active'); });

[@haykazantonyan7561]

Thank a lot

[@gamerandmemer5016]

It's not working

[@Adamfunchal]

Very good job. keep with this. I tried to make this menu in my project but on mobile phone it doesn't work. I can see the menu icon but when I press it, nothing happens. Could you help me please? Problem solved.

[@juliocodes]

Sorry for the late response! I’m glad you were able to solve it.

[@engr.malikmuhammadmubashir6828]

Awesome tutorials Sir. Superb channel. I have a problem with this tutorial. My javascript is not working. Can you help me?

[@allenkim4776]

Thank you so much bro~

[@joheartchilyobweasowe5673]

I followed all the coding and some of it works but the only thing which is not responding is the ion-md-menu, when I reduce the screen, it’s not showing. What could be the problem?

[@shahzaibriaz6552]

Before watching the video Subscribed the channel (DONE) Like the Video (DONE) Comment (DONE) Share (DONE) Love Your Content (DONE) Please make more complex header, footer, dropdown menus because in other tutorials they just make simple things. But you make complex things simpler for us Thank You So Much Buddy.

[@AndrewIgnatov-b6k]

Keep it doing, sir! We're gonna love it !!! :^)

[@imajt5]

nice videos..keep going!! Thanks

[@ralphmartynsamaniego7017]

Very practical navbar tutorial

[@learnAndfun101]

Good job man !!

[@penninahgathu7956]

I love this tutorial. Thank you

[@SteveBonin]

Hello Julio, I have not uploaded this to a webserver, just using it on localhost, so I have not tested it on an actual phone. My concern is how does "hover" work on a phone. Does it?

[@silviopontesx]

HI, Do you make theme for Wordpress? How much and what is the delivery time? It will be for an AIRBNB type gym search engine!

[@sqfzerzefsdf]

is there a way to ensure that the animation plays out when you're no longer hovering? because sometimes it seems to get a bit stuck when trying to close depending on where your mouse is which gives it a bit of a glitchy effect

[@mairanajam1892]

Julio Codes my code is not working from the end when i put (.) with addEventListener in script file it show error what to do? //Create function to select elements const selectElement = (element) => document.querySelector(element); //Open and close nav on click selectElement('menu-icon').addEventListener('click', () => { // in this line it shows error in toggle device tool bar. selectElement('nav').classList.toggle('active'); });

[@juliocodes]

I see there's not dot in front of 'menu-icon' since it's selecting a class. It could be that.

[@mairanajam1892]

@@juliocodes Thanks a lot :)

[@mairanajam1892]

Tell me one more thing how could I make dots around logo??

[@kyleparsotan6799]

Can you help me figure out the JavaScript for a different website

[@TopicalAuthority]

What kind of a JavaScript syntax this guy is using? I didn't see it before? Shouldn't there be a {} after the arrow function? const arrowFunction = (parameter) => {Code BLock} ??

[@juliocodes]

If you’re only returning a single value you don’t need the curly braces

[@TopicalAuthority]

@@juliocodes I didn't know that Julio, thank you for answer.

[@juliocodes]

Meant to speed things up. I believe you could even leave out the return keyword and it’d work

[@TopicalAuthority]

@@juliocodes Do you have a Linkedin Account?

[@juliocodes]

No, sorry

[@shuvoahmed5217]

Can u please make a video about position absolute element responive in every device

[@juliocodes]

You only need media queries just as everything else when it comes to responsive. You decrease or increase the absolute positioning values at different break points when the item starts looking bad or is at a position you do not like. Repeat the process with more media queries until you’re satisfied.

[@adochan1000]

Thank you, great movie, waiting for more.

[@learnAndfun101]

😂😂

[@DecodingJordan]

How did you create the icon of the fork and knife? The only image I see in the folder is the website background.

[@juliocodes]

It’s an icon. I then added some styles to the icon to make it look like a logo

[@DecodingJordan]

@@juliocodes @Julio Codes How would I be able to get rid of it and put an image in its place. Also my drop-down menus are side by side and I did everything the way you did. What am I doing wrong?

[@mdhasiburrahmannafiz9984]

amazing sir, Thank you

[@safdarmoshtagh5623]

Hı. What about the Javascript code. Can you repeat again?because it was not clear. Thanks

[@afrahhassan741]

u can do it with jquery. its a simple task its easier to understand

[@pyderator]

Awesome Video Keep Going!!

[@lorenzobiagi8392]

If i want to transform it into a vertical menu how should i do?

[@fieryaspiration-thechronic5166]

Very good! Thank you

[@SimoLPers]

Hey, could you maby do something with the Bulma framework, I've tried it for myself for a while, but somehow my brain just won't work properly with it :/ Great videos though, so a thumbs up for that! EDIT: After reading another comment, maybe combine it with the idea of creating a blog?

[@atiwattumsakka4056]

Thank you.

[@s.y.cofficial6322]

Mã JS đã sửa và nó đã hoạt động : const selectElement = (element) => document.querySelector(element); selectElement('.menu-icons' ).addEventListener('click',()=>{ selectElement( 'nav').classList.toggle('active' ); });

[@DoLittleWithPalash]

Thanks. Now it's working perfectly.

[@gelsuracoutinho]

me ajuda

[@zeeshankalyar7693]

thank you but when I hover on dinner its also effect the lunch how to solve this anybody help

[@paulmoldovan9518]

Verry gut tutorial. Will be the best if hover efect is replaced with click.

[@Marcus_YT.]

why is blastimo font not working for me? pls help me

[@ShivamSingh-mz3mn]

icant have my close and menu icon as hamburgurmenu help!!!!!!!!!!!!!!!!!!!!

[@fazlerabbirana993]

Very usefull, but can anyone please tell me how to toggle the dropdown "sub-menu" on the mobile screens? I see it's not hiding when clicking again on the parent, shouldn't it work that way?

[@anony88]

While that looks pretty, I feel like the layout is old school. I feel like drop down menus with a lot of content should probably be a larger box 250x250 or so where it has different sections with titles, links, icons, and maybe even an image. Having to navigate through sub menus isn't as practical honestly. I couldn't picture a large tech company doing that on their site and for a good reason. This video is great for learning though either way and I still appreciate it.

[@juliocodes]

That would be called a ‘mega menu’ 😛

[@anony88]

@@juliocodes ah i forgot the name of it lol. Just getting back into web dev after being out for a couple years. Thanks

[@juliocodes]

@@anony88 Hahaha, it's fine. I usually just try to post about what people 'want to see' for the most part. I've been asked about creating a mega menu as well, just haven't gotten around to it yet.

[@iddrisufaisalortega2837]

Nice one, bt how do i get the js folder for my project?

[@generationsarising]

Hi. Thanks for tutorial. I followed your video but my bullets are still showing in my example.

[@juliocodes]

Must be some issue with the lists. Alternatively you can globally select them all by using ul { list-style: none; }

[@ozlemengin9279]

github codes has deleted. can you update please?

[@heyyy4987]

nice

[@NejdetACAR]

I liked the menu you made in your video and did the same by watching your video. But I also have the problem that the javascript code does not work in the mobile menu section, which is mentioned by many in the comments below the video. I watched your video many times, I watched every stage over and over. However, the design program (dreamweaver) we use says that there is an error in the first line of the script code you write. However, when I try to use the same code, nothing happens when I click on the menu icon. Do we have to use this method to open the mobile menu? Can't we do the same job with another method? Please help me. I spent half a day watching the video and writing the codes, I could not get the result because of 2 lines of code.

[@juliocodes]

What does your javascript code look like?

[@reynandelizo1480]

@@juliocodes to do that I remove element: inside in selectElement like this selectElement(element: ''menu-icons)... I just remove element and it works!

[@chacataplan]

Thk Thk!!!!!!

[@evans8245]

Every Dev: uuuhhh, impressive i'll take it ! thank. you. very. much *Later in the day* Lies: Sir, i even added some borders for the sake of allty ;). don't worry boss, its on me. *Gets a promotion*

[@wallstreetclub-nyc]

if i use boostrap 5 in this file, will it be conflicted with it?

[@juliocodes]

It could if certain clases are the same

[@svdev6215]

how change from hover to click dropdown?

[@richardsinkler5898]

It would have been nice if you were decent enough to include the finished files. When doing the javascript for the hamburger menu, I have everything written exactly as you have in the video , and it doesn't work. My CSS file is letter for letter as you have it.

[@professionalman2591]

Asalam Walikum Thank You sir

[@Moshe5573]

does anyone have the index page code i can look at? mine dint come out right for some reason

[@sauerlaender2k]

Thank you!!

[@PaulCade]

Julio, I have taken this a whole lot further and used it to mock up a 1 page restaurant website, it only occurred to me after I uploaded it to my server and tried to view it on my phone that the mobile menu doesn't really function properly, when I tap on any link I can't see the page at all, because the menu doesn't close automatically, what is needed to make that happen ?? I did add a smooth scroll to it, so I'm not sure if that is having any effect on it or not.

[@juliocodes]

Use JS to target the nav-link and when they’re clicked you want to remove the active classes from the hamburger menu and the nav

[@PaulCade]

@@juliocodes Kind of figured that, but don't know how, sorry.

[@juliocodes]

It’s basically the same as the hamburger menu click event, but do it for the nav link. Then inside of it you remove the class ItemToBeClicked.addEventListener(‘click, function () { //remove active class from nav //remove active class from hamburger menu so that it goes back to normal });

[@PaulCade]

@@juliocodes Thanks, I'll give it a whirl.

[@PaulCade]

When it comes to JS I'm as thick as 2 short planks, I cant make it work, sorry to mess you around, when I added what you listed above the hamburger menu stopped working altogether. I'm assuming that ItemToBeClicked needs to be replaced by something, I just don't know what and there should be .removeClass('active') in it somewhere as well.

[@rajlama4816]

I have a problem! I pasted the unpkg link but found no changes in the html page. I mean nothing. Just a plane html page with headers and menu and submenu links. I copied the html codes from the git-hub.

[@juliocodes]

GitHub code is partial. You have to watch the video to complete it.

[@nahidestes]

which is the best way to remember codes??

[@juliocodes]

Everyone is different so it’s hard to say. In my situation, I remember best by practicing. You have to stay consistent else you’ll forget again.

[@Saudavelpro]

Awesome

[@gamerandmemer5016]

Tha nav button is not working. On my js part

[@joseluismartinezrimarachin9490]

Por si tienen errores con su js: selectElement('.menu-icons').addEventListener('click', () => { selectElement('nav').classList.toggle('active'); });

[@julianvargas5773]

hola, tengo este error, pero no encuentro la solución aun, que opinas "scripts.js:5 Uncaught ReferenceError: element is not defined"

[@hugoscenes7449]

@@julianvargas5773 Hola no tienen problemas con los media screen?

[@jenniferward6821]

stuff looks great and you expplain well, BUT, followed like a sheep, spent hours trying to get this to work but - into the mobile, all goes to hell , as in in the dt view, display none is peachy, but in mobile display it does not work, and seems to break the dtop view?? Can you tell me why perhaps - I am a desperate woman

[@sandeepal1]

Looks like complete code is not available in github. Some of the content is missing in index.html

[@juliocodes]

The code on github is only starting files not completed

[@sandeepal1]

@@juliocodes could you please share the complete code?

[@nelson.costa.dev2536]

Ganhou um inscrito LIKE

[@cuongxevietnam]

Could you guys ask me if the code is corrupt? //Create function to select elements const selectElement = (element) => document.querySelector(element); //Open and close nav on click selectElement(element:'.menu-icons') , addEventListener(type:'click', listener:()=>{ selectElement(element:'nav') . classList.toggle(token:'active') });

[@juliocodes]

You copied the IDE reference hints ‘element:’ ‘type:’ ‘listener:’ ‘token:’ so remove those and it’ll work

[@cuongxevietnam]

@@juliocodes How to write that code? help me!

[@juliocodes]

@@cuongxevietnam You don't have to write it. You just have to delete what I mentioned from the code you already have.

[@cuongxevietnam]

@@juliocodes tks

[@nagendrapp2213]

how can i get that vscode left side line (those locker side icons)

[@juliocodes]

Not sure, I don’t use VS Code

[@nagendrapp2213]

@@juliocodes which editor u r using?

[@juliocodes]

I’m using WebStorm

[@sunnyfville8054]

you are wonderful

[@buasi]

THANKS FOR SUCH WONDERFUL TUTS ,, CAN YOU PLEASE DESIGN A NEWS BLOG FOR US

[@lucastavares4908]

Please do it!!

[@juliocodes]

No problem! I’ll take your suggestions under consideration

[@buasi]

@@juliocodes im honored

[@shahzaibriaz6552]

Julio please upload the full source code on github so that we can compare our code with your code that's whats the difference between in your and our code so that we can resolve our issue.

[@xtechvideos7687]

Nice video

[@SWIPHY]

The GitHub file are not complete