Crea un ícono menú hamburguesa, usando HTML, CSS y JavaScript.
Ejemplo
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://codepen.io/frontend-club/pen/MWdvYbr">https://codepen.io/frontend-club/pen/MWdvYbr</a></div>
 
<h2 id="heading-marcado-html">Marcado HTML</h2>
<pre><code class="lang-xml">&lt;div class="container" onclick="myFunction(this)"&gt;
 &lt;div class="bar1"&gt;&lt;/div&gt;
 &lt;div class="bar2"&gt;&lt;/div&gt;
 &lt;div class="bar3"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<h2 id="heading-estilos-css">Estilos CSS</h2>
<pre><code class="lang-css">.container {
 display: inline-block;
 cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
 width: 35px;
 height: 5px;
 background-color: #333;
 margin: 6px 0;
 transition: 0.4s;
}

.change .bar1 {
 transform: translate(0, 11px) rotate(-45deg);
}

.change .bar2 {
 opacity: 0;
}

.change .bar3 {
 transform: translate(0, -11px) rotate(45deg);
}
</code></pre>
<h2 id="heading-javascript">JavaScript</h2>
<pre><code class="lang-javascript">function myFunction(x) {
 x.classList.toggle("change");
}
</code></pre>
<h3 id="heading-referencias">Referencias</h3>
El contenido de este artículo es una inspiración y traducción de:
<ul>
<li><a target="_blank" href="https://www.w3schools.com/howto/howto_css_menu_icon.asp">How TO - Menu Icon</a></li>
</ul>
<hr />
"La mejor manera de aprender a programar es practicando todos los días"

Crea un ícono menú hamburguesa, usando HTML, CSS y JavaScript.

**Ejemplo**

%[https://codepen.io/frontend-club/pen/MWdvYbr] 

## Marcado HTML

```xml
<div class="container" onclick="myFunction(this)">
	<div class="bar1"></div>
	<div class="bar2"></div>
	<div class="bar3"></div>
</div>
```

## Estilos CSS

```css
.container {
	display: inline-block;
	cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
	width: 35px;
	height: 5px;
	background-color: #333;
	margin: 6px 0;
	transition: 0.4s;
}

.change .bar1 {
	transform: translate(0, 11px) rotate(-45deg);
}

.change .bar2 {
	opacity: 0;
}

.change .bar3 {
	transform: translate(0, -11px) rotate(45deg);
}
```

## JavaScript

```javascript
function myFunction(x) {
	x.classList.toggle("change");
}
```

### Referencias

El contenido de este artículo es una inspiración y traducción de:

* [How TO - Menu Icon](https://www.w3schools.com/howto/howto_css_menu_icon.asp)
 

---

*"La mejor manera de aprender a programar es practicando todos los días"*

Crea un ícono menú hamburguesa con HTML, CSS y JavaScript siguiendo este tutorial paso a paso.

Menu Icon - Frontend Club

Menu Icon

"La mejor manera de aprender a programar es practicando todos los días".
