How To Create A Ham Burger Icon

Question

Hi, I wanted to know if any great coder out there knows how to create a simple ham burger icon. The ham burger icon should be a working drop down menu type. It should have some text in it after the drop down. It should be like the one used in the TreeHouse Website after sizing the page to have less width. Please can anyone help me with this. You can use simple jQuery, HTML & CSS. Thanks a lot!

Answer 1 · 2016-09-11T12:35:43Z

on Sep 11, 2016

There's a lot of different ways to create a hamburger icon.

You can use a simple png file.
You can use an svg file. (you can download both types from the Internet, from here for example: http://www.flaticon.com/free-icon/menu-button-of-three-lines_54994#term=menu icon&page=1&position=4)
You can create a button with 3 span elements in it and then style them to render 3 bottom-borders of 80% width inside the button:
```
<button type="button" class="menu-button">
<span></span>
<span></span>
<span></span>
</button>
```

.menu-button span {
    display: block;
    width: 80%;
    border-bottom: solid #000000 1px;
}

An SVG icon would probably be the best bet here, as you can later animate it with CSS - everything depends on your needs though. :)

Answer 2 · 2016-09-11T15:04:23Z

on Sep 11, 2016

Hey Ronav,

I'd suggest taking the span route when creating a hamburger menu. You can then easily manipulate the span with transforms on click.

You can checkout an example I made here (Resize the browser to 767px or lower): link

Answer 3 · 2016-09-11T17:33:27Z

on Sep 11, 2016

Hi,
Patryk. I actually am a beginner with all of this. So can we please go step by step. I will be very grateful. Can you please tell me how to go through making a simple ham burger icon. Thanks a lot. Ron

Answer 4 · 2016-09-11T19:29:08Z

on Sep 11, 2016

Ronav,

Add a following code into your HTML:

<button type="button" class="menu-button">
<span></span>
<span></span>
<span></span>
</button>

and in your CSS file:

.menu-button {
    width: 30px;
    height: 30px;
    padding-top: 3px; /* you're gonna have to adjust the paddings */
    text-align: center;
}

.menu-button span {
    border-bottom: solid #000000 1px;
    width: 80%;
}

You're just going to have to adjust the values for width, height and paddings in your button element.

Answer 5 · 2016-09-12T05:44:12Z

on Sep 12, 2016

Hi, I have done all of the HTML and CSS part in the hamburger. So can you please send me the jQuery code to make the hamburger icon's functionality. I will be thankful if you can explain the code in the jQuery code. Thanks a lot. Ron

Answer 6 · 2016-09-12T07:31:52Z

on Sep 12, 2016

Ronav, I could do that, but I don't know what exactly you're trying to do with the hamburger :) Basically, you need to add something like this in your JavaScript file:

$(document).on('click', '.menu-icon', function() {
    $('some-menu-selector').toggleClass('visible');
});

Provided you have a menu, which goes visible when has a class '.visible' attached to it. You're going to have to tinker with it for a while. :)

Answer 7 · 2016-09-12T11:33:58Z

on Sep 12, 2016

Hi, this is what I want to do. It would be nice if I knew a way to make the drop down in only css and html. If you have understood my code then I think you can help me. Please try for the simplest method. If not html and css, please explain the jQuery you will send to me next. What should i do in the onclick part? This is the HTML.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="interactions.css">
    <title> Test </title>
  </head>
  <body>
    <header>
      <h1> Test </h1>
      <h2> Test </h2>
    </header>
    <div id="top">
    <button onclick="??????????????"><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-256.png" alt ="hamburger icon" class="hamburger-icon"></button>
    </div>
    <div class="wrapper">
      <div class="photo">
      <img src="" alt="" class="photo1">
      </div>
      <div class="photo">
      <img src="" alt="" class="photo2">
      </div>
      </div>
      <div class="photo">
      <img src="" alt="" class="photo3">
    </div>
  </body>
</html>

This is the css. Save it as 'main.css'.

/* Basic Design Structure For Page */
* {
  font-family: cursive;
}
html, body {
  max-width: 450px;
  margin: 0;
  padding: 0;
}
header {
  background-color: #00FF00;
  margin-top: -25px;
}
header h1, h2 {
  color: white;
  text-align: center;
}
header h1 {
  padding-top: 10px;
}
header h2 {
  font-size: 18px;
  margin-top: -20px;
  padding-bottom: 10px;
}
/* The #Top(ID) Denotes The Hamburger Icon. I Have Kept It As Top Because This Will Be The Anchor On Our Page */
#top {
  margin-top: -20px;
  background-color: #00E500;
}
#top button {
  background-color: white;
  height: 60px;
  width: 100%;
}
.hamburger-icon {
  width: 30px;
  height: 50px;
}

I will be very grateful to you sir, if you can help me with this troubling problem. Thanks a ton. Ron

Answer 8 · 2016-09-14T11:41:43Z

on Sep 14, 2016

Hi again Ronav Saundh,

Sorry I didn't reply yesterday, but I've been very busy. Of course now I can help you with your code :)

I see you already have a button with hamburger icon. Good. Although you shouldn't use onclick attribute on the button, as using inline scripts is considered a bad practice. Also, you should give your button attribute type="button", see the snippet below:

<button type="button" id="menu-button">...</button>

If you want to have a dropdown menu, you should add one in your code, for example - next to your hamburger button:

<nav class="dropdown-menu">
    <ul>
        <li><a href="#">Element 1</a></li>
        <li><a href="#">Element 2</a></li>
        <li><a href="#">Element 3</a></li>
        <li><a href="#">Element 4</a></li>
    </ul>
</nav>

Then, you should make it invisible by default in your CSS. The snippet below lets you set the menu's opacity to zero and keep it from being clickable by cursor:

.dropdown-menu {
    opacity: 0;
    visibility: hidden;
    z-index: -1;
    transition: all .25s ease-out;
}

Also, we're going to need to make it visible once the user clicks the menu:

.dropdown-menu.visible {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

But nothing will work yet, as we haven't set the click event yet. So we're going to need some jQuery.

$(document).ready(function() {
    $(this).on('click', '#menu-button', function(event) {
        event.preventDefault(); // just to be sure
        $(this).toggleClass('visible');
    }
}

There you go, your menu should be working now :)

Answer 9 · 2016-09-14T11:46:11Z

on Sep 14, 2016

Hi, Thanks a lot. You have helped me a lot. I just have one final question about why my jQuery is not working when I add it in my html page. Is there any thing I have to add. Thanks again. Ron

Answer 10 · 2016-09-14T18:27:40Z

on Sep 14, 2016

Ronav Saundh, yes, you need to add jQuery library before your jQuery code.

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

You can just copy and paste the snippet above. :)

Welcome to the Treehouse Community

Looking to learn something new?

Ronav Saundh

Ronav Saundh

How To Create A Ham Burger Icon

10 Answers

Patryk Bernasiewicz

Patryk Bernasiewicz

jacobproffer

jacobproffer

Ronav Saundh

Ronav Saundh

Patryk Bernasiewicz

Patryk Bernasiewicz

Ronav Saundh

Ronav Saundh

Patryk Bernasiewicz

Patryk Bernasiewicz

Ronav Saundh

Ronav Saundh

Patryk Bernasiewicz

Patryk Bernasiewicz

Ronav Saundh

Ronav Saundh

Patryk Bernasiewicz

Patryk Bernasiewicz

Ronav Saundh

Ronav Saundh