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

Responsive Net Design Tutorial #9 – Making a Cell Drop-down Menu

by



Yo ninjas, on this responsive design tutorial, I am gonna present you how you can make a easy however efficient drop-down cell navigation utilizing simply CSS and just a little jQuery.

jQuery – http://code.jquery.com/jquery-1.11.3.min.js

SUBSCRIBE TO CHANNEL – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== JavaScript for Newbies Playlist ==========

https://www.youtube.com/playlist?checklist=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

========== CSS for Newbies Playlist ==========

https://www.youtube.com/playlist?checklist=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

========== HTML for Newbies Playlist ==========

https://www.youtube.com/playlist?checklist=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc

========== The Internet Ninja ============

For extra front-end improvement tutorials & to black-belt your coding abilities, head over to – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk

========== Social Hyperlinks ==========

Twitter – @TheNetNinja – https://twitter.com/thenetninjauk

source

21 thoughts on “Responsive Net Design Tutorial #9 – Making a Cell Drop-down Menu”

  5. YOU have absolutely no idea how happy am I. I was doing this my whole day searching it on W3S, StackOverflow…nothing. I was searching for the burger menu button, that opened links for smaller sreen size and that it didnt disturb larger sizes. Unfortulately nothing worked untill you showed us. THANK YOU FROM THE BOOTOM OF MY HEART!!!

    Reply

  10. 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.

    Reply

  15. 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 = document.querySelector('.btn');
    const ul = document.querySelector('header nav ul');

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

    Reply

  20. 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.

    Reply

  21. 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!

    Reply

Leave a Comment