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.
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.
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 RU-vid discovers Ur value and increase your reach via algorithm, thank u.
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
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
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).
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' ); });
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
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.
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!
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.
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 ❤❤
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!
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
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.
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.
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
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
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.
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'); });
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.
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} ??
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?
Not entirely sure what I did wrong, but the windows are misaligned and they aren't animating correctly like in your video. Guess I am gonna have to re-watch this again and see if I can catch what I did wrong.
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.
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
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?
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?
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?
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'); });
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.
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.
Be Aware! Doesn't work properly in responsive (hamburger) mode when there is more than one multi-level menu item. Julio only used one sub menu item called "menu". If he had added a second sub-menu section to "blog" for instance, he would see that when he clicks on "menu" to open up the sub menus and then clicks on "blog" to open up its sub menus, the program fails to work properly. You can see an example here at www.habooch.com/lang/msa/menu/index.html You can't just shrink the screen on your computer to get into "hamburger" mode to see what is actually happening. You need to go into the browser's device tool bar and select a phone from the list and then you will clearly see the problem.
@@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?
JS n't working. Please solve my problem. My code: //Create function to select element const selectElement = (element) => document.querySelector(element); //Menu close and open selectElement(element: '.menu-icons'), addEventListener(type: 'click', listener: () => { selectElement(element: 'nav').classlist.toggle(token: 'active'); });
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.
@@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.
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*
Your coding is very professional and easliy to understand. I follow the coding well but I use different icons. I use fontawesome and the problem is I cant hide the This is my code in css .fa-toggle-off{ display: none; } Mine is not working 😢. Can you fix it? Your code: html: Css: .ion-md-close{ display:none; }
Try .fa-toggle-off{ display: none !important; } or simply give your icon an additional class of 'close' or an ID. Then target that an apply the styles you want.
@media query the hamburger is not working for me and below is the code: //Create function to select elements const selectElement = (element) => document.querySelector(element); //Open and close nav on click selectElement(".menu-icons").addEventListner("click", () => { selectElement('nav').classList.toggle('active'); }) Can anyone help me ??
Awesome multi-level mobile friendly nav tutorial! I really like this example as it's a great inspiration (loaded with little advanced css tricks)! Everything is fine in desktop view! Sadly I have a big problem with the Menu sub-menus not showing up in mobile view (also I'm not seeing the left orange border). Basically I see the content of that first sub-menu flow above the rest of the main menu (instead of pushing the rest downwards), but I can't click on any of its li's; it's also not offset. If I remove the max-height in the Inspector, all branches of the sub-menus open up and are completely visible (with orange border-left). I reviewed the video twice to make sure I wrote everything as you did. In the @media query you set the max-height of the .sub-menu to 0, which makes perfect sense, but when I do that, the sub-menu is no longer 'clickable'. I'm trying to debug with the Inspector, but so far it's not working out... :-(
