I need a pure javascript solution.

Question

I am aware the best solution for this problem is JQuery. However, I am wanting to clearly understand how this would work with plain javascript.

I have a navigation with the class "menu" that is hidden(height: 0) inside a media screen with a max width of 480 pixels.

When the hamburger icon (class: "hamburger") is clicked, I need to add the class "open" to the ul with the class "menu".

<html>
<head>
<meta charset="utf-8">
<title>Hamburger</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
    <h1>Hamburger Menu</h1>
    <nav>
        <a href="#" class="hamburger">
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
            </a>
        <ul class="clearfix menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Service</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">About</a></li>
        </ul>   

    </nav>
</header>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</body>
</html>

css

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');

*, *:before, *:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

html, body {
    height: 100%;
}

body {
    font: 1em 'Roboto', san-serif;
    color: #555;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

ul {
    list-style: none;
    max-width: 800px;
    margin: 0 auto;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

h1 {
    padding: 30px 0;
    font: 1.5em 'Open Sans', san-serif;
    text-align: center;
}

nav {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background-color: #f5f5f5;
}


ul a {
    display: block;
    padding: 20px;
    padding-right: 0 !important; /*important! overides media queries---*/
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    color: #aaa;
    cursor: pointer;
    text-decoration: none;
}




ul a:hover {
    background: #eee
}

nav li {
    float: left;
    width: 20%;
    border-right: 1px solid #ddd;
    }

nav li:last-child {
  border-right: none;
}


@media only screen and (max-width: 480px) {

    .hamburger {
        padding: 15px;
        display: block;
    }

    .line {
        border-bottom: 4px solid #bbb;
        width: 35px;
        margin-bottom: 6px;
    }

    .line:last-child {
        margin-bottom: 0;
    }

    nav li {
        width: 100%;
    }

    .menu {
        height: 0;
        overflow: hidden;
        transition: height .3s linear;
    }

    .open {
        height: 295px;
    }

}

The Jquery solution I have is:

$('.hamburger').on('click', function(e) {
  e.preventDefault();
  $('.menu').toggleClass('open');
});

How would this work with plain javascript?

Answer 1 · 2017-07-12T19:49:52Z

July 12, 2017 7:49pm

This is a pretty simple task so converting it to plain JavaScript is relatively simple:

document.querySelector(".hamburger").addEventListener('click', function(e) {
  e.preventDefault();
  document.querySelector('.menu').classList.toggle("open");
});

It should be noted that this code assumes that there is only one element with a class of hamburger and menu, since the querySelector method automatically picks the first element it finds. Rather than acting on all the elements it finds like the jQuery code does.

If you needed the code to act on many elements then you would need to use something like querySelectorAll in combination with a loop to use the code on all the individual elements.

Welcome to the Treehouse Community

Looking to learn something new?

Kent Hefley

Kent Hefley

I need a pure javascript solution.

1 Answer

andren

andren

Kent Hefley

Kent Hefley