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

Course contents

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

38 lessons / 4 hours

Overview

Hi there, my name is Dan and together we’re going to build a portfolio website using Adobe Dreamweaver.

We’ll use Dreamweaver's handy templating tools to make updates to our site super easy. We’ll create our very own mobile 'burger menu' from scratch learning some basic Javascript & jQuery.

I am an Adobe Certified Instructor and better yet I work closely with Adobe themselves to develop their own online help videos. I am also a Dreamweaver speaker at the huge Adobe Max conference in Las Vegas 2017. I’m even inside your version of Dreamweaver right now... go on try it... open Dreamweaver > Go to Help > quick tutorial - I’m right there!This course is for beginners. You do not need any previous knowledge in Dreamweaver or web design experience. We will use Dreamweaver ‘split’ view so we can use all the good visual tools as well as doing some simple amends down here in the code as well.

In this series we will take this static design from either Illustrator or Photoshop and together, step by step, build everything in HTML, CSS & Javascript. We will make our own navigation. We will make adjustments so that everything looks great on different mobile devices.We will work with beautiful fonts & colours & even add Google Analytics to our site to get amazing information about exactly who visits your site.
 Now web design can sometimes be tricky so I am here to help - just message me if you get stuck. There are also exercise files so you can follow along. I even save a full copy of the website at the end of every video so that you can check yours again mine if you’re is not working quite right.

Check out this link here www.byolisawesome.com, for the site we build together. Let's get excited about finally being able to build a website like a professional web designer. See you in class.


What are the requirements?

  • You will need a copy of Adobe Dreamweaver CC 2017 or above. A free trial can be downloaded from Adobe.
  • No previous web design skills are needed.
  • No previous Dreamweaver skills are needed.

What am I going to get from this course?

  • 39 lectures 3+ hours of well-structured content!
  • You'll learn to build a responsive portfolio website from scratch.
  • Learn how to take a design from Illustrator & create a professional website.
  • How to use templates in Dreamweaver.
  • Create mobile, tablet & desktop versions of the website.
  • Build our own custom responsive navigation with burger menu.
  • Introduction to Javascript & jQuery.
  • How to publish your website to the internet.
  • Ways to preview your designs straight to your mobile device.
  • How to get the most from your portfolio Images.
  • How to use beautiful web fonts in your designs.
  • You will get the finished files so you never fall behind.
  • Downloadable exercise files & cheat sheet.
  • Forum support from me and the rest of the BYOL crew.
  • All the techniques used by professional website designers.

What is the target audience?

  • YES: This course is for beginners. Aimed at people new to the world of web design. No previous Dreamweaver experience is necessary.
  • NO: This course is NOT suited to people experienced in using HTML & CSS.

Course duration approx 4 hours + your study.
Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Download Exercise Files

Transcript

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.

  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024