How to create a hamburger mobile drop down menu in Dreamweaver.

In this video we're going to create an ugly looking desktop menu which we'll Style in the next video, but when it gets down to Tablet, and Mobile, it turns into a Nav Sandwich. So let's go and do that now in Dreamweaver.

First thing we're going to do is, we're going to, in this video, put in the core components and turn them on and off for the different views. After that, in the next video, we'll look at doing the JavaScript that makes the click action happens, when you click it, the menu drops down. And in the last video, or at least the third of this little chunk here, we'll be styling it to make it look pretty. The first thing we need to do is add our Navigation. And it's this Navigation tag here, I want it to be just after this image, so I'm going to click on this image, and remember, there's an image, but that image is inside this a-tag. That is the link that we put around it. So, click it up here, click the image. And we're going to click down here, and say the a-tag, that's actually around the outside of this image, we want it just after you, please. And say, 'Navigation', click on him. So I would like it after the thing I've selected, there it is there.

First thing I want to do with Navigation is add a Style to it, to get it to float to the right because I don't want it underneath here, I want it in the top right here. So go to 'CSS Designer', under 'styles.css', I would like it in 'Global' I would like a Selector called 'Nav'. And I'm going to use the 'up' arrow. Remember, specificity just means that it's saying, the Nav tag which is inside the Header, which is inside the Container. I don't need a way around that because I only got one Nav tag for this whole document. So I don't need to be that specific. I'm not going to say specificity any more in this course because it's very hard to say.

So, I want the Nav tag to float to the right. Float is this one here, I'm going to say 'Float to the right'. And it kind of just jumps on to the right side of the page. Awesome! Next thing I want to do is put two Div tags inside of this Navigation. One Div tag is going to be for my Mobile menu, which is going to be my Burger menu, the strappy line thing. And the Desktop view is going to be those colored buttons that say 'About Us' and 'Contact Us'. So basically what happens is you have two separate Div tags. One with the Mobile menu in it, and one with the Desktop menu in it. And we just say, turn one off when we're in Mobile view, and turn the other one on. And switch it around when we're on Desktop.

So, let's go and set those Div tags. So I've got Nav selected, I'm going to go to 'Insert', click on 'Div'. I want this on the inside, please. And we've got a new Div tag, you can see, there is my Nav, and there is the guy that's inside. Do we need this text anymore, we don't. I like to delete the text here in Code view. Deleting it in Live view works most of the time but I find it's a little bit easier to do it in Code view. So you can see, there's my Nav tag opening and closing, and there's the Div tag inside of it, only two of these.

What I can do is, over here I can select on the 'Div tag' and say, another one please, just after him, here he is. So now I have two. Let's put in different components. So in this first one here, I'd like to insert an 'Image' which is going to nest inside. And I'd like it to be my Burger menu, which is under 'Exercise Files', 'images'. And we're going to use the svg version Burger menu. You can use png, svg is the newer scalable vector graphic version. Let's click 'Open'. And it's going to say "You've selected something outside, would you like to put it in there for you?" And you say, "Yes please, put it in with my images." There, please. Because I've practiced this one already to make it super slick for this video I've already got my Nav, so you won't have to click 'Replace'. You'll notice it's very big, so with it selected, I can say-- hit the little menu here, and say, "Actually I just want it to be 25 pixels." You decide how big you want yours to be.

Next thing I want to do is get rid of our text. And like I said, I like to delete the text here in Code view. I don't need that text anymore. So I've got a Div tag, and it has my images inside. Let's put in the Desktop version. So inside this guy I click on him, there he is there, a red Div tag. I'm going to put in something called an Unordered List. This is how we describe Lists. And Navigation is just a list of options you can go to on a page. To select on this Div, I'm going to say insert 'HTML', I'm going to find this one called Unordered List. An Ordered List is a numbered list, and an Unordered List is a bullet pointed list. So you can see, bullet points. We're going to remove those from the Styling a little bit later on.

So, what I want to do is change this text. I want to say, this one is going to be the 'About Us'. I've used capitals, you don't have to. 'Return', and 'Contact Us'. I mean, 'Me', 'Contact Me'. 'About Me', because this is just my Portfolio. So I'm going to click out, you can see I got two bullet points. Let's have a look at how these are constructed, there's the Div tag, and inside of that is my Unordered List. There you see, the beginning and ending. And inside this Unordered List are the List Items. So these are the different bullet points. That's just how it's constructed. It's going to be important for when we later on go and start styling.

What I'd like to do while we're here is to give them Hyperlinks. So I'm going to double click 'About Me', and click on this one here, see, it goes orange, click on the 'Hyperlink''. And where is this going to go? It's going to go to hash '#'. Hash is just-- I don't know yet what that icon means, or that pound '#' sign. You could put 'About Us'. 'aboutus.html', in lower case. But I don't really know what it's going to be called, so if you don't know, just put in hash '#'. And that allows it to be a link, but it doesn't cause an error. You can change this later on. Same with 'Contact Me', both of them are going to hash '#' at the moment.

Next thing I'd like to do is turn them on and off at different views because at the moment, you can see them all the way through. Mobile, Tablet, Desktop. So, what I'm going to do is do the Mobile one first. I double click this, there we go. I want you to turn off, when you're in Desktop view. So, what I'd like to do is go to my CSS Designer panel in styles.css, in my Desktop view, which is Global. I want to say-- I'm going to create a new Selector, this one's going to be '.mobile'. So this is going to be a Class, mobile view. And what I'd like to do is, when it's in Mobile view - so this is that thing, it's going to control this. - so at Mobile view, I would like you to display 'none'. None, just means, we can't see. So nothing happens, because what I need to do is find the Div tag. It's wrapping around the outside of this image, and apply it. Where do I do it? I can do it down here.

So I have my Image selected, now I've got my Div tag selected. And Div means, the .mobile, you're there. He's gone. Cool, huh? So, this Div tag now is called Mobile view Div tag. And what we're saying is, when it's in Global, which is Desktop, I would like you to display 'none'. And the problem is, it displays 'none' all the time. That's why they call it Global, and not specifically Desktop. Because what it means is, it means everything. Global means everything unless Tablet view says, do something different. But at the moment, if I go to my css, I look at my Tablet view. My Tablet view doesn't save anything. So it doesn't override Mobile view. It's a cascading Style Sheet, so it flows down and flows over all of these unless they say something different. And they don't, they say, Mobile view, we don't say anything.

So that's what we're going to do, we're going to say under 'styles.css', when I get to Tablet view just select a name.mobile-view. Hit 'return' again, it's gone. Instead of saying 'none' now, we're going to say, apply 'block'. Block is a weird one, it sounds like 'none'. I think block of wood, block of concrete, something solid, I can see it now. Works for me anyway. So, I can see it. So let's go and check it in a browser, Live view is not great, remember. 'Save All', check in a browser. So, my Mobile menu in Desktop view can't be seen, it's 'none'. Now when it gets down to Tablet view it's blocked, it's a block of wood. And when it gets down to Mobile view, it disappears again.

So what we need to say is, styles.css, when it's at Mobile view which is my maximum of 400 pixels I can make another Selector called '.mobile-view'. I'd like to say, display 'block' as well, so I can see both of them. 'Save All', test, there he is. It's not lined up, that's okay, we'll do the styling later on. It's mechanics here at the moment. So, you can't see him, you can see him, you can see him, awesome. So what I want to do now is create a new Class called Desktop view, and I want to apply it to these buttons here, and I want to turn it on and off, depending on the view.

So, let's create a new Styles. I don't want to make it Global, I could, I could say, I'd like you to be 'block'. But it's audience block, we can only see it at Desktop view. So I don't need to restate that, what I need to say is, Tablet, turn off. So I'm going to go to my 'Tablet' view, I'm going to click 'Selector'. I'll call this one 'desktop-view'. I did not call it Desktop view at all. 'Return' a couple of times, it's working. So Desktop view, and I'm going to say, display 'none'. Now I need to apply it to it, so I select on it. Let's click on that Div tag that's wrapped around the outside. I'll click here, click full stop '.', click 'Desktop'. It's not appearing. This happens a bit. You need to hit 'Save All'. And then go back and undo this, and hopefully it's there. 'Save All'. 'Desktop', still not doing it. I'm going to leave this in the video just because it happens to everybody.

So I'm going to just type it in physically, hit 'return'. It's going to say, "Would you like to create something new?" Keep hitting return on your keyboard until it goes away. And it is applied, if I click on this guy, you can kind of see, there's my Div tag, and it's got that Class applied. That happens to me a bit in Dreamweaver. Just the way it is. 'Save All', let's preview in a browser. You can see, Desktop view, I can see him, but when it gets down to Tablet, goodbye, he is 'none', but it is back when it is in Mobile. So let's do the same thing, 'styles.css' in Mobile view, I'd like to create a Selector called '.desktop'. Awesome! And I'd like to say, I'd like to display 'none', please. 'Save All', preview in a browser, gone. Gone there, nice. So that's all we're doing.

We have two Div tags, one's called Mobile, one's called Desktop. And we're just turning them on using display at different Media Queries. Problem now is, this doesn't work yet. So we're going to go through now and use some JavaScript to make this a little drop down button to make that work. You're ready for your first bit of JavaScript? Let's go and do that in the next video.