Create A Basic Mobile Slide-In Menu // Responsive Web Design

Create A Basic Mobile Slide-In Menu // Responsive Web Design



welcome back to another web design tutorial where I'll show you how to create responsive websites using HTML and CSS and when necessary javascript in our video today we're going to create a basic mobile slide and menu mm-hmm now I've created a basic header and that is in a previous video and so you can go back and look at that to see how I've created this responsive header that changes whenever you get to a certain breakpoint now in this project 550 pixels you can see down here 550 pixels is where it breaks and you have your links here but at anything smaller than that we have this hamburger button you can use anything you want you could use the three dots or some other icon the hamburger button to me is sufficient and a good enough pattern that most people know what that means so I've essentially just copied the code and then what we're gonna do is we're gonna actually create the menu that slides in on mobile devices that goes with this trigger so we built the trigger and then when we click that trigger nothing happens now but what we want is a menu to slide in take up about half of the space or maybe 3/4 and then we want to be able to close that slide in menu we also want to be able to click outside of the slide and menu in order to make that close and also I'm gonna add in the ability to click on one of the links in the menu and then it does the same thing where it closes the menu and or takes you to a new page it's not completely necessary unless you're building some sort of one page app or something like that like if if you're doing a page refresh you won't need to do that because it'll start out just like this so it's not necessary but if you're doing a one page landing page or if you have a single page web app that sort of thing is necessary because you're not going to the page so we have our HTML here this is the HTML for our header and now we just need to make out our menu and what I'm gonna do is I'm gonna say I'm gonna call it an aside and we're just gonna call it menu and we're gonna do a menu inner may not be completely necessary but I do like to have that option if I want to Center the menu or move it around in any ways in the container and then inside that I'm gonna have an unordered list and it's gonna call be called I'll give it a name I'll say menu pages and then each of these list items is going to be a menu page link and then inside of the list item I'm just going to have just an anchor link with a dead link and we'll just call you know each of them you know whatever you wouldn't see commonly in the menu so about maybe services and portfolio maybe I'm just making stuff up this might be what you would have on a generic site and then contact page so we have four pages the about page the services the portfolio and the contact and this is going to be almost everything so let's go and take one more element and that's going to be called the menu clothes mmm we need a just like we have a trigger to open the menu we need a trigger to close the menu and as I showed you in the previous video I'm using something called the material design iconic font and the they have something called the close button you can see there are a couple different there's a close with a circle there's a close with an open circle so you can just kind of make your choice about what you want to do so I'm just gonna do a simple X and the way you add that in is you add it in like that and what I'm gonna do right now this is not a link I can make it look like a link and behave like a link but I'll just go ahead and create it as an anchor link like this and just put that in there so now we have a functioning a functioning link here okay so I don't have to do anything extra that to make it look like you know a link when you hover over it so these are the basic parts of our of our slide in menu and now we need to move into the CSS so I'm gonna come down here into my CSS and I'm just gonna say a slide and menu and I have an outer wrapper right now that outer wrapper is is is outside this probably right here it's called menu so dot menu and then we'll be able to see it I give it a little background color so you can see that it's full width and it takes up just the amount of space of our content and what I want to do is I want to make that a width of 50 viewport width units so it takes up whatever the viewport width is it takes up 50 of those okay you see that and it's essentially like a 50-percent but it's it's 50% of the viewport itself not 50% of the container that it's in which is a key difference and a little bit subtle but something that you definitely should know okay so if you don't know about viewport width and viewport height you should definitely height you should definitely look into those things and so let's get we want the height of this to be 100 viewport height units okay so now you see what's happening here is this is what I want to do is float over the top of everything but what it's doing is that it's inlining the HTML so this is coming first and then it's putting this down here and it's all relative to each other and to the page so what I want to do is I want to pull this out of the flow of the page and I want to just kind of tack it over here so the way that we do that is we call it position fixed and then we give it a top edge of zero and then I'm going to just leave the left edge zero and what this does is it it attaches it fixes it to the top of the viewport at this top zero and left zero so the top left-hand corner you could change that to the right if you wanted to and it would move it over to the right you can see how that works I'm just gonna say for the sake of showing you some other things I'm gonna say left of zero and then I'm going to work with you on translating some things so this is a property we're gonna have to work with so I want to just kind of show you what it is and it's called a transform property and there's lots of different kind of sub properties that you can use within this I don't know what the appropriate term is methods it's kind of like a method in in JavaScript you write it that way so what I want to do is translate I want to change our move this object the menu object on the x-axis and then this is my value of how far I want to move it so essentially I just want to move it 50 viewport widths and you see that it moves that object in the space half of the viewport width okay so it's taking up half and it's moved over half okay if we did minus 50 it would actually move it off the page over here half the viewport width so we just want to translate it and push it 50 viewport whit's to the right so that's where we are right now and this is our menu let's move on to the menu clothes should be nice and easy it's a block level element so what we want to do is I want to push the menu close over to the right hand side over here so the menu close will just be text aligned to the right and then I'm going to give it a little padding one rim and then because the menu close is a paragraph element there's some padding already built into that or some margin already built into that so I'm just gonna get rid of that margin so that I get a truer sense of one rim of padding so now I has a true one rim but before it had one rim plus whatever the margin was on that element so I like to just kind of clear that out so that I'm I can work with a little bit more true values let's work on the menu now so the menu is just an unordered list of list items so our menu has a name it's called menu pages so we can just take that name and copy it and we can put it down here and say menu pages the list style is none so that'll get rid of the bullets you can see that there's a still a little bit of padding over here it's more than I really want what I want is no padding on the top or the bottom then I won't wrote one Rama padding on the edges okay so there's no padding up here any space between these elements is being created by this X okay and then let's put a little space between the list items so we'll say the margin between them is going to be one rim and so that gives a space on the outside in the left and right margins as well so let's set that to zero and get it back where we want it I'm gonna make those a little bit larger so that they're just a little bit more prominent and then the list items have an anchor tag inside of it and so I'm just going to get rid of the text decoration which is the underline and say it's none so that should get rid of the underline here but when I hover over it I do want that to come back okay so I'll just copy that and incest what you do is you say and hover sorry let's try again and hover and then that's like saying a hover okay so anytime you indent underneath you can do pseudo elements and you just have to write the ampersand and then that gives you it's like saying whatever was above it and then whatever the pseudo element is so we want the text decoration to be underlined so now whenever we hover over it we get an underline okay so that's not completely necessary but a little bit helpful for me the menu close I want to match the font size so I want to also give that a to rim so we make that menu close item that I that a link we make it to rim muscle you could add some hover effects to that if you wanted to I'm not gonna worry about that right now it looks exactly like I want it to and what we want is for this to slide in okay so we need to begin creating that slide in feature we're going to do that using a special class called slide in and we're gonna call that through a JavaScript event so let's come to the menu because that's where we're going to attach this slide in I'm just going to call it slide in and I'm gonna use a little bit of it's not CSS hacking but it's just one way of creating animation on the web especially if you have something going from one place to another place or one one property value to another property value and at this point we want to we actually want to translate our menu to 100 I was doing 50 just so that you could see it but right now it's 100 percent of the viewport width or 100 viewport width units so it's actually it's right here at the edge of just off the edge but it's 100 viewport whit's that way so what we want to do is we want to bring it back 50 viewport width okay so let's do transform we want to translate at X and we want it to be we're going to come in 50 viewport widths I think that's going to work the way you can test it is you can take the class that you want to and you can manually put it on to the place that you want it to go let's see yeah so it takes it from 100 viewport whit's to the right and then instead when you add this class it changes it from 100 to 50 so it has the effect of bringing it back 50 viewport width so it's a little bit I don't might feel a little janky to you but this is a way that you can do it completely in CSS there are probably other ways so if you have another way that you can think about doing this you know please put it in the comments and share it with everybody or make a video and share with everybody that way they can know that there are multiple ways to do this but this is typically how I do just kind of a simple slide in menu like this so you transform it all the way off the screen and then you translate it back okay so you translate it off and you translate it back and that's gonna happen when we add this class to this container so we know that that works and now we just need to do the JavaScript then when we click this so right now we're clicking and nothing is happening so we need to attach that click event to add slide in to this container so that's what we're gonna do down here let's just say menu slide in and then what we're gonna do is we're going to look at the menu trigger so that's what we called this trigger up at the top so that's this menu trigger right here and whenever we click on so on click we're going to run a function and that function is going to be to add slide in to the menu container so we take kind of think about it backwards the dot menu container we're going to add a class of slide in to the menu container and then that should actually bring our menu into view okay so it does it but you see how quickly it goes it goes very quickly and it's not animated it's just moving it from 100 viewport widths back to 50 that's all it's doing but we can create a little animation so if you're looking for like just a one point to another point quick animation we can use on the container that's being changed we say transition sorry we say transition and then we choose what property do we want to transition and then how many milliseconds or how many seconds do you want it to take and then what sort of animation do you want it to be so I'll go through that with you at this point I think it's I'll just say all it's bad practice typically to say all but I'm just going to make sure that it works because the problem is that this is now listening for all of the possible changes so if you are just transitioning a color or you know width or height or something like that you want to only put that property that one property here I'm just gonna say all right now it's more performant to choose the actual property that's what I'm saying and then we'll say 300 milliseconds so it's one third of a second and then we're gonna use I like to just use ease you could use ease in you could use ease in out or you could just use ease out or you can actually if you go there are any number of tools including Google Chrome where you can look at a website and you can actually create your own unique animation or transition so at this point I'm just gonna say ease which is a key word for ease in and ease out so it's gonna it's gonna ease into the screen smoothly and it's gonna ease out you could also use something called linear a linear means it moves from one place to the other in the same motion so like if you were running like you started running and you hit your top speed from your first step and then when you stop you just completely stop but that's not the way that we run so it's not a very realistic or smooth animation more smooth animation would be you know you take your first step and you're not at top speed but when you get to the middle you are and then when you try to slow down you want to stop somewhere too specific and you begin to slow down and then you stop okay so that's what he's in now so your ease in you start slow and you finish so and then in the middle you should reach your top speed so that's a quick little animation primer if you watch the dev tips for designers channel on YouTube with Travis Nielsen he has a really great like three or four part series on different styles and types of animation in CSS I would highly recommend that you go there it was one of the places where I went to learn CSS animations and they're just little small things that you can add into your website that just give it a little bit more style they give it a little bit more professionalism a little bit more class and they're definitely well worth learning how to do and transition is one of those animation types so I'm just going to go with everything 300 milliseconds and ease so any changes that are made here with the width the height the position the transform all of these things their background color all these things are going to be changed with a 300 millisecond animation so from one to the other so that's what we want to do when we add slide in we want it to animate and it'll take 300 milliseconds for this to slide in if you want something slower or faster you can just manipulate this so a smaller number goes faster a higher number goes slower and then for every 1000 milliseconds that is one second okay so milla is a thousand and so it's 1000 milliseconds that's one second let's stick with 300 and then we need to write I think that's good let's check it out and I want to look at this as we would see it here so let's get up our mobile styles here so when we click on this it should slide in to place okay and so it does so you can see we have a trigger and then we have a slide in okay maybe that's too fast for you like I said if it's too fast for you just need to change to change this number here to something larger maybe 600 is better for you or whatever you want to create fast is modern slower is going to be kind of classier and so just little things to think about but it does work and now what happens is we get stuck out here and what we want is to be able to click this and have this move back so what we can do is we can essentially just reverse this so we copy it and we say not the menu trigger but the menu close remember we've named that we name this close button menu close so we're gonna use that to target the X and then instead of adding the class of slide and we just want to remove it and it's that easy you do need two separate functions for that or at least I'm gonna use two separate functions so when I click this that should close it's very fast there we go so now you have a proper slide in menu okay now what about if people click over here okay a lot of times if you click outside you'll see the menu slide off so what we need to do for that is I like to use an overlay or an underlay method and the way you do that is you come and you create a new div and I'm just going to call it overlay and then we need to style that div come down and what we want is a semi-transparent layer that sits over the top of the normal content that sits underneath so like a sandwich it's over the top of the normal content and it's under like it's tucked under this menu in this menu is at the very top layer so what we want to do is we're going to say overlay we're going to call it position fixed because we just need it to cover everything and so top:0 left:0 and when it's a fixed position or absolute position and you start moving it around the page you have to declare a width so it does not have its own automatic width so we're gonna say width 100% and a height of 100% so that means it's going to take up all of the width of the body or the viewport and it's not going to take up all the height of the viewport I want to make the background color on this semi-transparent so for that we have to use this RGB a function and this is how you would write it in sass you can also write it a little bit differently if you want to learn how to do transparent background colors you can look that up and and figure out how to do it with us how you can do it in sass so I'll just use a simple black and then I will say is 0.5 okay so now you see that there's a dark layer over the top of everything so if I change this at 0.2 0.1 Oh point nine is almost everything okay so we're just changing the transparency so you say RGB that's the color and then a is for the Alpha Channel and then we have in parentheses our color this could be a hash so it could be any color that you want and then a comma and then you have anywhere from one is the complete color so there's no transparency and zero is no color at all and then in between that are your steps so 0.5 is 50% transparency so if you are familiar with graphic design or you know designing any sort of thing in Illustrator or Photoshop and you do a transparency that's essentially what we're doing this is 50% but it's on top of everything which is not what we want so what we want is it to be on top of this layer but under our menu later so what we do is we come back to our menu and we can force our menu to the top by using what's called the z-index property now z-index controls the vertical index of each of the different elements on your website and I can just make it something really big like 100 if you have a lot of stacked elements and your website you might have to make it a thousand or 9,000 sometimes you see 9999 so it's whatever you want to make it just make sure that it's more than one because one is the initial layer that everything is painted on and then I'm gonna go ahead and add a layer to the overlay as well because we're doing a simple example here but if you were to add other parts to the HTML and you wanted to add more HTML then what it would essentially just be in between those layers and you wouldn't have to worry about actually moving it in the HTML because right now it's sitting on top of all this because it's coming last in the HTML not because I've declared what position I want it to be in so I'll go down and I do a z-index on this and I want it to be somewhere between 100 and 1 so I say I'll just say 50 so now we have everything in proper alignment here our overlay is there and what I want to do you can see that it's not working properly because I don't want the overlay to be there all the time I only want it to be there when I click on the menu trigger which because it's higher in the stack then the regular content it's not even allowing me to to click on the menu trigger okay so what I want to do is I already have a high class so what I'm going to do is I'm going to add that hide class to the overlay and that should hide it that should give it a display:none and I only want it to show up when I want it to show up and that's when I click the trigger so we come up to our menu trigger so when we click on the menu trigger we add the class of slide into the menu but we also add or remove the class of hide from the overlay layer so we're just going to remove the class of hide from that layer every time that we click this trigger and now you see that this slides in we get our overlay and then you know it still doesn't work properly because when we close it our overlay needs to go away so instead of totally rewriting this let's just go down here and we'll say we're gonna add the class of hide whenever we click the menu close okay so now we click menu trigger which is essentially the opening the menu then we get an overlay and it highlights essentially this menu and then when we click it it takes everything away what I also want to do which is a nice little something that most websites have to have a mobile menu like this is when you click outside of the menu then everything goes away – and if we want to do that because we want these two things to happen when we click outside on the overlay and because the overlay is an actual thing we can add the overlay here and then so whether we click menu closed or overlay on the click it's gonna do the same thing so if we click on the X it goes away if we click on the menu overlay it goes away as well okay and then I'm gonna add a third thing which is if you click on one of these links here nothing happens at this point but I want it to like when I go let's say this is a one-page website and the About section is down you know somewhere to lower part of the page when I click this I want to be able to go down to that section but I don't want this to stay here so right now if I click that and it was linked to another part of the page it would go down to that section but this would all be there and the user would have to click the X again to get out of the menu but I want them to be able to open the menu click on services all this stuff closes and you find yourself down at the services section this will be for one page web apps or for one page landing pages so the way we do that is we just call our what do we call them we call them a menu page link okay so when we click on a menu page link we also want to do the same thing as when there's a closed or an overlay so we can just chain them together like this making sure that you put the the class delimiter there of the dot and then all these functions whether whatever these functions that we do it's gonna run this function inside so when we click on about everything goes away and theoretically you would scroll to a different section of the webpage if we click the X it all goes away and if we click on overlay then it all goes away so that is the essentials of our slide in menu now you can make that slide in from the left or the right or top or bottom or however you wanted to come in you would just need to try and change this translate so translating Y sorry has to be a capital so translating Y what give you the effect of going up and down okay so it's a little bit different so you see how this is translated to the to the y-axis the vertical axis so you have to fiddle around with the numbers a little bit to get it to work on the y-axis but it's I've done those sorts of menus before too so one last thing when when I get to this point when I get to the 550 pixels it's still gonna make a menu out here even though I don't need the menu so what I want to do is I want to make sure that this menu is hidden or display:none whenever the viewport gets outside of when I'm going to use it that way the website doesn't create the menu and it's just kind of sitting out there something funky happens and it shows up on the page and it's not supposed to so I just say media at media at a minimum width of 550 pixels I want the menu to be display:none okay so it won't create the menu once I'm you know when those links are showing it'll only the menu will only be there whenever I need it which is now at 550 pixels or less okay hopefully that's pretty clear it's not a lot of JavaScript it's mostly just adding and removing some classes and then we're using those we're using some CSS animation here in order to be able to move that fixed position element the menu element forward and backwards you could certainly have this to be 100 if you wanted to and then you would just need to come down and change this to 100 so that it takes up the full part of the website so let's see I'm gonna add live here maybe that's not right oh there it goes I think it just messed up on me save it and try it again we need to bring it back to zero there it goes okay so you can make it a full-width like this I'm just choosing to make it half with the 50 viewport widths so one too many so hopefully that teaches you something new something that you can use on any sort of web project this is just kind of a simple basic little responsive slide in menu you can use these for anything you can trigger them with anything it doesn't have to be you know the classic you know hamburger menu you could trigger that with any sort of trigger and use that to bring it on to the page if you have any comments or questions please leave them down in the comment section below and you can also ask me on twitter i'm at brian Haffer camp and my first name is spelled with an i brian with an i and i'll also put a link to this code into the information or the description of the video thanks for watching and I'll see you next time

3 thoughts on “Create A Basic Mobile Slide-In Menu // Responsive Web Design”

  1. Hello Brian, thank you for this vid but this time i'm sorry to tell you it's disappointing:
    Why didn't you use the same links and Dom structure from the first video? (bad practice for my opinion).
    The whole idea of responsiveness is to use the same content and only alternate the visuals with css/js/whatever…
    Sorry, but I couldn't understand this kind of Non logic and i'm frustrated because i spent time over the first part
    just to find out that in the 2nd video tut we will NOT use it. I stopped the video after 3 minutes – looking somewhere else to learn the professional way of responsiveness.

    Brian, Keep the good work I'm sure someone out there get the good out of this video 🙂
    Thank you anyway.

Leave a Reply

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