Pitch your project

Random text






Blogs

0    
By admin Category Uncategorized, Posted January 24th, 2016
How to create a Hamburger menu

Everyone that enters the bootcamp in CodePamoja EU should create a portfolio first to see what their skill-level is, and improve it at the same time. Because I love responsive websites a hamburger would be a good idea. Since most menu use jQuery or a lot of JavaScript I tried to create my own, and with succes!

1. Setting up your file structure and link the files.

First off we need to set-up a basic file structure, which would be:
index.html
javascript_folder/file_name.js
css_folder/file_name.css

After everything is created open up your text-editor and create your index.html plus the JavaScript and CSS files.

< !DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Hamburger</title>
</head>
<body>

</body>
</html>

Because we need to interact between the files we need to link them, so to link your CSS file add to following line in your tags.

<link rel="stylesheet" href="css/style.css"/>

Now for the JavaScript we need to include this file in the bottom of the page, since these can be heavy files, and your DOM (Document Object Model) will be loaded. The best place to include JavaScript files is just before you close the tag.

<script language="javascript" type="text/javascript" src="javascript/main.js"></script>

Now that we’ve created these files, and linked everything together we can actually start building our hamburger menu!

2. The basic HTML.

In our index.html we create a button with a span tag in it, this should create a basic looking button in our browser.

<button class="hamburger hamburger-cross">
    <span></span>
</button>

3. The basic CSS.

To give it that hamburger look we edit our style.css , where we apply some additional styling to draw the outlines for the button (and make it invisible). Use the following code:

.hamburger {
    background: transparent;
    cursor: pointer;
    display: block;
    border: none;
    height: 40px;
    margin: 0;
    position: relative;
    overflow: hidden;
    padding: 0;
    width: 40px;
}

/* Prevents outline when clicking on the button */

.hamburger:focus {
    outline: none;
}

Now we can create and visualize the layers of our hamburgers, but because we don’t want to repeat ourselves we’ll use the CSS pseudo elements (selectors) ::before and ::after. These elements allows us to insert content into a page from CSS, without it actually existing in the HTML. In this case we can create two more bars without creating more HTML elements. In our CSS add the following code:

.hamburger span {
    background: #000000;
    display: block;
    position: absolute;
    height: 4px;
    left: 6px;
    right: 6px;
    top: 18px;
}

.hamburger span::before,
.hamburger span::after {
    background: #000000;
    content: "";
    display: block;
    left: 0;
    height: 4px;
    position: absolute;
    width: 100%;
}

Basically what we’ve done here is create three bars (the layers of our hamburger) with only one HTML element, and position them within our button. But the elements are still on top of each-other. That’s why we tell the span elements to move with negative pixel value’s, so you don’t need to worry about the height of the span:

.hamburger span::before {
    top: -10px;
}

.hamburger span::after {
    bottom: -10px;
}

4. The CSS animations

Now that we’ve created the basic looks of our hamburger we need to animate it, first let’s do the CSS part. CSS Transitions are an easy way to transform and animate certain elements. You can give them a property (what to change), a duration and a delay. Because we want to add some behaviour to the cross I’ve called the class is-active, which makes it more clear what the class actually does.

.hamburger-cross span {
    transition: background 0s 0.3s;
}

.hamburger-cross span::before,
.hamburger-cross span::after {
    transition-duration: 0.3s, 0.3s;
    transition-delay: 0.3s, 0s;
}

.hamburger-cross span::before {
    transition-property: top, transform;
}

.hamburger-cross span::after {
    transition-property: bottom, transform;
}

/* Hide span when active */

.hamburger-cross.is-active span {
    background: none;
}

/* Transform other blocks into cross */

.hamburger-cross.is-active span::before {
    top: 0;
    transform: rotate(45deg);
}

.hamburger-cross.is-active span::after {
    bottom: 0;
    transform: rotate(-45deg);
}

.hamburger-cross.is-active span::before,
.hamburger-cross.is-active span::after {
    transition-delay: 0s, 0.3s;
}

5. JavaScript

Now when we manually add and remove the class .is-active to our span we can actually see it transform. Of course we don’t want to do that, so that’s where JavaScript comes to the rescue! We have to create a self invoking (calling) function that gets all elements that match the class “hamburger”. After that we put the data we receive in an array so we can iterate over it later on.

(function() {
    var toggles = document.querySelectorAll(".hamburger");

    for(var i = toggles.length - 1; i >= 0; i--) {
        var toggle = toggles[i];
        toggleClass(toggle);
    };
}) ();

Now that we’ve received our data we need to toggle the class. That’s where an if – else statement comes in handy. Because we stored our data in the self invoking function we need to create another function within that function.

function toggleClass(toggle) {
    toggle.addEventListener( "click", function(event) {
        event.preventDefault();
        if (this.classList.contains("is-active") === true) {
            this.classList.remove("is-active")
        }
        else {
            this.classList.add("is-active");
        }
    });
}

The above function prevents the click from performing an action with the event.preventDefault function. This enables us to assign our own action to it, which is to toggle the .is-active class. Then we check if the class list we received from the array contains the class and toggle it. The “this” selector is to select the current object. Now if you’ve followed every step correctly you should have a working animated hamburger menu!

Posted by Michael Vrolijk

Leave a Reply

Your email address will not be published. Required fields are marked *