Responsive Web Design Tutorial #9 – Making a Mobile Drop-down Menu

yo Scott um people you’re watching accept designing assignment 9 and in this video we’re going to make a mobile menu for our website Wow alright then so this is the way our website currently ogles on mobile retain in the last lesson we made some changes to the banner these things now to spread them out a little bit more and these scenes and the footer so all we really need to do is make this mobile navigation we’re going to make a drop down navigation but before we start with any code I time want to show you a couple of things I’ve already done in preparation for this tutorial so the first thing is in Photoshop I’ve just made a dead simple three forbid burger nav icon okay and this is what the user is going to click to show the drop down menu on a portable you’ve probably heard things like this all the time when you end websites on mobile if you can’t see that very clearly I’m just going to click this background so “youre seeing” these three lily-white divests so I’ve go that background off and I’ve saved this as a transparent PNG this is really zoomed in if I go to the actual pixels it’s really small okay so that’s just a little icon that the user can press on a mobile the next thing I want to show you is just this code so we’re in the index scatter HTML file of our website and you can see right here in the nav I’ve added this one tag and it’s an a call with a class of burger – nav now it’s called burger now because the little icon looks like a burger right it’s got three little orders but that doesn’t really matter you can give it whatever categorizes you want and we’re going to use this element right here to expose that icon on the website so it’s not going to show anything up yet because we’ve not styled it but it will do by the end of this tutorial the next thing I’ve done in this HTML file is down here I have added a dialogue link to the jQuery CDN so it’s this link right here so what I’ll do is leave that relate down below and you can pop that in your dialogue tag as well in this file and below that and that’s important it has to be below this because it has a dependency on it I’ve added another dialogue label with a source of menu j/ s and that menu guess is this thing right here I’ve gone onward and composed a blank J’s file just right-click go to new file and I’ve called it menu Jas you can see there’s nothing in there at the minute but we’re going to use this javascript folder to procreate our JavaScript for the drop down menu so that is all I’ve done I’ve constitute that icon in Photoshop and I’ve saved it into this images folder right here can see it’s called Berger dot PNG then I induced those simple changes to the HTML file index speck HTML this thing right here and these two writes at the bottom of link those up and that is it so what we’re going to do is jump into the website itself and we’re going to start styling up that Bergen out class that popped in so we only want it to show more dominance so it’s going to be within this media query right here at 480 pixels and the first thing we want to do is just grab that class Burger – at nav and style that up a little so what we’re going to say is we want this to display as block and then we’re going to give it a height of 40 pixels and we’ve aim it display block so we can give it that specific height and it’s got access to those block rank assets the next thing we want to do is afford it a diameter of 100% and then we’ll present it a backdrop of the URL we’re going to give it a backdrop of that idol that big enough that we are only formed so that we know it’s in the idols folder forward slash burger fleck PNG and then we’re going to say no-repeat because we only want this to be shown once not several hundreds of meters and then we’re going to specify some primacy and properties or arrange values rather of where we want this to appear so we’re going to say 98% across the x coordinate so it’s going to appear privilege over here on the right and then I’m going to say Center when it comes to the horizontal situation so it’s going to appear centrally from top to bottom okay and it’s not showing up at the minute because the background is white itself and the burger is white as well but if we give this a background hue now of like a depth grey-haired we’ll say 400 400 400 now you can see that big enough right there on that burger icon right there okay so that’s what the user is going to click to show these ties in a minute alright eventually I want to say cursor Poynter you don’t need to do this I just like it so that when we hover over you can see that we can click it okay even on the desktop okay so the next thing I want to do is just get rid of these two little cracks right here you see this and this this is being caused by the wrapper if we right-click and scrutinize this and hover over this cover you can see the little lettuce bits on the left and right over there that is the padding of the cover so I’m going to come rid of that so to do that all I need to do is say header and then the negligee div within that and then I’ll dedicate it a extent of 100% and a stuffing of zero and that’s going to get rid of those two little breaches all right so next thing we want to do is style up this UL a little bit so I’ll say header and a ul and then what I’ll do is say overflow: concealed that’s going to come in handy where reference is do the drop down so it doesn’t show by default we’re going to give it a backdrop of 500 500 500 so a little bit lighter than this colour right here then what I’m going to do is a little forward slash forward trounce so it doesn’t actually apply this next property and I’m going to say height zero and I don’t want it to apply it for now because I want to style this if I made height zero it’s going to get rid of it so I can’t see it I’ll exercise that later on okay so and too I’ll explain why we’re doing that later as well so what I want to do next is give this UL a class of open as well right so let me explain this in a second I’m just writing for now header now ul fleck open claim so when this UL class has a so when SQL has a class of open I want it to apply these following wordings the meridian going to get the bottle and in fact that is the AMA style I need to give it so what’s going to happen is by default height of that UL is going to be zero so we can’t see on a mobile but when we click this we’re going to apply a class of open so that ul so that then the height becomes auto and it will show and then when we click it again we’ll go that class off it so the height will be zero so it testifies and registers depending on whether it has that class or not all right so let’s commentary that out again just so we can see for now and next I want to style up these associates right here so the first thing I’ll do is grab the Li text so I’ll emulate that paste it below here and threw an li on the end and I’m going to say hovers not to get rid of those floats the composition wire is going to be the left instead of censor like that and I’ll give them a width of 100% instead of the 20% the currently have and then I’ll give them a margin of a zero let’s take out those margins okay now we’ll really adept the links themselves so we’ll follow this again and placed an A on the M 2 hotshot those tie-ups and within now I want to give them a complexion of white which is FFF then I’ll give them a stuffing of ten pixels I’ll give them a border bottom of 1 pixel solid and we’ll say about 400 400 400 K I want to display these as block like that and when the exhibition is block it automatically takes up the full diameter available that’s what’s happening there and then we’ll give them a margin I was 0 just in case you have any margin associated with them that should be about right okay so that is the styling done okay so when the menu is open it’s going to look like this when the menu is closed it’s going to look like this all right so we’ll left open at that I’m going to imitation all of these forms that we’ve done right here I’ve control-c those and we’re going to pop them in our CSS file over here within this media query and I’ll save it ok so now what I want to do is compose this JavaScript so that when someone clicks on that Burger that little icon I want it to expand so the first thing we need to do is situated a document.ready affirmation so let’s do that we’ll say paper and this is where you jQuery comes in handy by the way and don’t ready and then function like that okay so when the document is ready when it’s loaded then we’re going to fire off this function and the first thing we’re going to do is go after the heat burger nav so that’s going to seizure that component and then I’m going to say on clink so when someone clicks that burger now I require you to fire the following function which I’m specifying right here and within that I’m going to say header nav ul toggle class which is a jQuery method and the class we’re going to toggle is open so what’s the herbal I watch is gape whenever you click on burger nav that little icon I crave you to either give the UL within it a class of open or take it away if it already has that class okay so that’s all there is to it guys I want to save that now and then come back over to this website we’re going to freshen when we click on this now it hands this a class of open if we scrutinize you can see this UL class open they’re actually get those modes of height: auto which is overriding this height of zero but when we click it again it takes away that class and this time the summit is zero okay perfect alright guys so that is the mobile menu moved if you have any questions whatsoever feel free to leave a comment down below otherwise guys don’t forget to subscribe yada yada yada and I’ll see you in the very next tutorial

digital marketing

As found on YouTube

Share this article

Leave a comment