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

Yo ninjas, in this responsive design tutorial, I'm gonna show you how to make a simple but effective drop-down mobile navigation using just CSS and a little jQuery.

========== JavaScript for Beginners Playlist ==========

========== CSS for Beginners Playlist ==========

========== HTML for Beginners Playlist ==========

========== The Net Ninja ============

========== Social Links ==========

[cleversonmatias]

I've been trying so much tutorials and finally I found one that I could understand. Thank you so much!!!

[christiankoranteng]

Amazing I have spent a whole day trying to figure how to do this, this tutorial just saved me. Total noob here. You just got a subscriber

[sidneysousa]

Don't mind the dislikes. If you had no haters your tutorials wouldn't have been so great.
This tutorial is Short and simple.
Thanks for it Ninja!!.

[Supermason]

I literally have to say by far this is the most simple, well explained, and well taught tutorial ever watched.  I have watched literally 20 different tutorials and neither could help me properly.  I was able to follow this one and was able to achieve what I was attempting to do.  I am still a rookie in the land of JavaScript and jQuery, but I was definitely able to follow this and do what I was trying to accomplish.  Thank you for this video.

[asankalk]

Mate, this is the best, tried so many tutorials and even paid versions. But you made it so easy! Thank you!

[lossen]

Thank you so much! I literally can't thank enough. I have searched for this kind of video for AGES, and finally, I found one that explained it good enough for me to understand (I'm very bad at HTML/CSS/JavaScript). Just subbed and liked!

[gmorley]

You are a legend Net Ninja! I have gone through 5 of your tutorials and I have learnt much. I love your style and way of presenting - no nonsense, simple instruction. However, like a couple of comments on this one from other guys I followed your instruction to the letter (using notepad++ as an editor)I created a burger.png in photoshop as well, and even though I am confident the syntax is correct the dropdown didn't work on the mobile viewport. Any clues to the problem would be, well, awesome!

[PatiphanPhengpao]

I got the problem "Uncaught ReferenceError: $ is not defined" WHY?

[kjn]

8:20 no need to copy those changes to the file manually. You could've saved them through the browser.
Look at the file name style.css in the Sources tab, it has that asterisk sign * at the beginning / end of the file name.

[bananesalee]

i've been enjoying your tutorial a lot lately, great work.

[mcplus]

thank you so much i tried doing a burger menu since 3days and only cause of your tutorial i finally got one working

[erick_la]

For those without image:

html: <div class="burguer-nav">
<div class="btn">
<div class="btn-line"></div>
<div class="btn-line"></div>
<div class="btn-line"></div>
</div>
</div>


css:

.burguer-nav {
height: 40px;
width: 100%;
background-color: #404040;
padding: 10px 0 0 0;
}

.btn {
cursor: pointer;
width: 30px;
float: right;
padding-right: 10px;
}

.btn.open .btn-line:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}

.btn.open .btn-line:nth-child(2) {
opacity: 0;
}

.btn.open .btn-line:nth-child(3) {
transform: rotate(135deg) translate(-6px, 6px);
}

.btn-line {
width: 28px;
height: 3px;
margin: 5px 0 0 0;
background: #fff;
transition: all 0.5s;
}

header nav ul {
width: 100%;
background-color: #444;
display: none;
}

header nav ul.open {
display: block;
}

header nav ul li {
width: 100%;
float: none;
margin: 0 auto;
padding: 5px;
}

header nav ul li a {
color: #fff;
}
 
js

const btn =
const ul = nav ul');

btn.addEventListener('click', () => {
ul.classList.toggle('open');
btn.classList.toggle('open');
});

[alexdewilde]

Amazing job doing this tutorial. Finaly the most simpel way of doing it, raw code and no you got a new sub..

[mjscorner]

Your code is so clean! Thanks for the series.

[artempetrov]

Clear and to the point. Love your tutorials!

[xxchrsxx]

I always get lost and some how this Youtube channel always explains it to me so easily. Thank you!

[SlightlyOverripeAvocado]

Concise and very helpful! Just what I needed!

[SligzOffical]

I love your tutorials! I have learned so much. I was wondering if there was any way to make the { height:auto } come in with a transition? Greetings from Belgium

[sepidekia]

Thank you a million, You really stand out

[nickwoodward]

Just wondering if you've any advice for a drop down navigation menu that's in a grid or flex container?

I've a <header> which contains a <logo><nav> and <burger> button. At mobile screen sizes I don't use a grid or flex, and the drop down menu works fine. But as the sizes get larger I'd like to use grid to position the elements and the nav items.

However, because the nav is a child of header, it's included in the grid layout. And I can't work out how to get a drop down menu to work in grid without it expanding in all the wrong ways XD

should i just separate the header and the nav completely?

great series as always btw