Responsive Web Design Navigation Menu Tutorial

Responsive Web Design Navigation Menu Tutorial



hello everyone in this lesson we are going to learn how to create a website navigation menu that's responsive now the word responsive in this context means that we want to use the best layout depending on the size of the users device or browser window so for example if someone's using a traditional monitor or a laptop or a large tablet then the layout in front of us make sense for a navigation menu but once someone is using a smartphone which is only about this size we can see that the navigation is taking up too much of the important screen real estate so instead and I'm going to switch over to a new tab with new code instead what we want is something that uses horizontal navigation on larger devices but for smartphones we want to have a menu that you tap or click and then reveal the navigation so this way on initial page load our main content is still in prime viewing space for all users so in this video we're going to review the JavaScript and CSS we're gonna write it by hand so that you can create this navigation yourself so let's dive right in now this was the final product but I'm gonna switch over to the version without any of the responsive code so we can write it together so let's review what we do have at the moment we have a div with a class of nav menu and we're using the standard structure of an unordered list with list items for our links in the CSS we've simply floated the list items to the left to create the horizontal layout so that's what we currently have now let's review a plan of attack for adding in the responsive styling and behavior so it's a two-step process step one is the CSS we're gonna target the way that this navigation looks on small screens so that each link sits on its own line and has more space around it so it's easier to tap step two is the JavaScript we're going to hide the navigation initially for small screens and then we're going to set up the event handling so that when we click on something then it slides down the navigation so let's begin with step one the CSS so we want the new CSS that we're going to add to only take a place if the screen is about this size but not when it's this size so I'm going to add a new line in our CSS file media screen and max width 480 pixels so now whenever the browser window or the device is smaller than or equal to 480 pixels any styles we place between this bracket and this bracket will be applied to the layout so let's write the CSS so that the links sit one per line instead of stacking horizontally so we'll say div nav menu unordered list list item float none so now if we refresh we see that we have one per line let's go ahead and add a faint border to the bottom of each link so we'll create a new declaration border bottom two pixels solid and then I'm just gonna paste in a slightly darker blue color so now if we refresh we see that we have a very subtle border well let's go ahead and set it up so that this last link the final item does not have the border so we'll create a new rule have menu and we can use this pseudo selector named last child and that will select only the last link or the last list item and then we could say border bottom none if we refresh you see that now it's gone so now that the navigation menu itself is styled correctly let's add the menu trigger button that we tap to reveal the nav so in our HTML we'll create this trigger element directly above the menu itself we'll give a class of menu trigger will include the word menu inside it so now if we refresh we see that the word menu is directly above the navigation and you'll notice that even if we make our browser larger that word is still there menu and we do not want that we only want it to show for small screens so in our CSS we'll create a rule directly above our media query as this will target larger screens are actually all screens and we'll say menu trigger display:none so now if we refresh it's gone but that means that it's gone everywhere so then inside this media query for small screens now we'll say menu trigger display block so now we have something that does not display for large screens and does display for small screens so now our next step is to add CSS so that the navigation menu does not display at all for small screens and then we'll use JavaScript so that if you click this menu trigger then it reveals so we'll hide the navigation menu entirely for small screens ok and now we're going to write a bit of JavaScript within our script file we're using the popular JavaScript library named jQuery anything we place between this bracket and this bracket will run on page load and we'll have access to all of jquery's neat functions so we'll say jQuery when the menu trigger element is clicked run a bit of code so any code now between this bracket in this bracket will run when we tap that menu text so now we will select the navigation menu and use jQuery slide toggle method and it's that easy so now if we refresh and we click the menu button or if we tapped it on a smartphone it reveals the navigation and if we tap the menu button again it hides it so that's what the word toggle here is doing for us it's toggling between slide down and slide up automatically so our responsive navigation is now almost complete well there's one last thing I want to do to make it bulletproof so currently if we click to reveal the navigation and then click to hide it and then make our browser window larger to use the traditional layout we can see that the navigation is still missing and that doesn't make sense we want the navigation to always show for larger screen sizes now to fix this issue all we need to do is run a bit of custom code alongside this slide toggle method so we'll say take 400 milliseconds to complete the slide toggle and then when it's dun run this callback function so now anything we place between this bracket in this bracket will fire when this slide toggle is finished so what we want to do now is basically toggle another class so that only the mobile hides the navigation but the desktop never tries to hide it so we will select the navigation and then we will toggle a class we could use any name we want I'm going to use nav expand it then we also want to chain on another method here called CSS and we want to make sure that jQuery after it completes the toggle then it sort of offsets or removes any CSS that it used inline so we'll just select the display property and set its value to empty so this way we can use our CSS and our media queries to control different code at different screen sizes so now if we hop over to our CSS first I want to call out this class now I've expanded we just need to go add a rule in our CSS for nav expanded within the media query for small screens so we'll say div nav expanded display:block so now if we refresh you go to the mobile level we show the navigation we hide the navigation and then we make our screen larger again you can see that the nav is still there so now everything is in place and our menu is complete although I suppose we could style this menu trigger a bit so I'll just paste in some code that I've read earlier basically we're just adding a background color and a color and a bit of padding so that it looks something like this instead so this is the final product to review we used CSS media queries and a little bit of JavaScript and jQuery to create a responsive navigation menu that works for all devices thank you very much for watching I hope you feel like you learned something and stay tuned for more web development tutorials thanks bye

42 thoughts on “Responsive Web Design Navigation Menu Tutorial”

  1. Awesome video……
    But,after clicking on MENU button it's not showing me the navigation list,please reply and give me the solution for it.

  2. Best teacher on youtube, teaches programming like an actual language and imparts understanding. update for 2018 if anyone is interested

    $(document).ready(function(){
    $(".menu_trigger").click(function(){
    $("nav").slideToggle(400, function() {
    $(this).toggleClass(".nav_expanded").css("display", "");
    });
    });
    });

  3. I love your tutorials, I just finish watching your "introduction to Responsive Web Design" and I just wish you had use "introduction to Responsive Web Design" as the example for this menu tutorial, like a continuation. Sorry if im asking too much, im just too new to merge the two tutorials into one lol thx and keep the good work.

  4. Thanks bro for this. everything works fine except the disappearing of the navigation link when expanding the page on a larger screen. and also discover that it appears back if i refresh the page again. please help out?

  5. Maaaaan! Hope we learned something new??? I learned something what I am looking for 3 days to solve until this moment I watched your tutorial. CONGRATULATIONS SIR!!! Step by step showing how it's done, everything works perfect, even I'm gonna tell you that you helped me to complete one of my websites with this!!! 😀 You're really one of the best tutorialists in yt!!!
    Just keep it that way man, GREAT JOB!!! 🙂

  6. There are a million videos about creating the nav bar but none that include the most important step of making the damn thing work (ex: click on page 2 on nav bar, page 2 is then displayed). Just kill me.

  7. hey wuz up man first thanks for the tutorial big help now i have a problem the menu works perfect with google crome but not with explorer can u plz help

  8. HI Any chance i can download ur project for learning purpose, if yes do u mind send me ur project download link please. thanks William

  9. It worked! Thank you so much for the tutorials. They are a huge help to an aspiring front-end developer, you sir earned a sub!
    To those whom are having problems, click the link to demo / source page in the description. On that page view the links contents of "Direct link to JS" and "Direct link to CSS" and compare them to what you have.

  10. Excellent tutorial. neat and clean….thank you sir and thank you jimmy luo for your tips to include js file.

  11. Nice tutorial
    But im stuck with this line jQuery(this).toggleClass("nav-expanded").css('display', '');
    When i click on the MENU the nav-menu just it appear for one second then disappear

  12. For whoever has problems with the .css('display','') notation, here is a very comprehensive explanation.
    http://stackoverflow.com/questions/7420109/what-does-style-display-actually-do

  13. Everything works fine on desktop. Tapping on the menu button on mobile phone doesn't work. Anyone else had this problem?

  14. Excellent Video Tutorial – Clear, Precise – right to the point. GOOD teacher, keep up the good work. Thanks.

  15. Hi All
    Am doing this to, and am using Notepad++ and am saving the file as "script.js", and it does not seem to be picking up the "java" <script type="text/javascript" src="js/script.js"></script><!-link in html->. Does "Java" work in Notepad++ or do i need to install something like "eclipse"?.

  16. Holy crap. Been stuck on that issue of the menu disappearing if you go back to a larger screen size. Just fixed it thanks to your video! If I could thumbs up this video x 100 I would. Liked and subbed, thank you!

  17. the last code worked but it wont hide once i clicked it back :<
    it stayed :< how do i fix this please :<

  18. jQuery(document).ready(function() {
    jQuery(".menu-trigger").click(function(){
    jQuery(".nav-menu").slideToggle(400, function(){
    jQuery(this).toggleClass("nav-expanded").css('display', '');
    });

    });

    });

    using this same. but not working

  19. at 4:56 I have absolutely no menu items and the word MENU appearing where it should not in all sized screens.

Leave a Reply

Your email address will not be published. Required fields are marked *