# Hamburger Menu (Mobile Menu)

{% hint style="warning" %}
**Dependency**: jQuery
{% endhint %}

### HTML

<pre class="language-html" data-line-numbers><code class="lang-html">&#x3C;div id="menu-trigger" class="pull-right hamburger-menu">
<strong>    &#x3C;span>&#x3C;/span>
</strong>    &#x3C;span>&#x3C;/span>
    &#x3C;span>&#x3C;/span>
&#x3C;/div>
</code></pre>

### CSS

<pre class="language-scss" data-line-numbers><code class="lang-scss">#menu-trigger{
    height: 36px;
    width: 36px;
    margin: 10px;
<strong>    span{
</strong>        transition: 0.1s linear;
        width: 100%;
        height: 3px;
        margin-top: 6px;
        background-color: white;
        display: block;
    }
<strong>    &#x26;.active{
</strong>        span{
            transition: 0.1s linear;
                &#x26;:nth-child(1){
                transform: rotate(45deg);
                position: relative;
                top: 10px;
            }    
            &#x26;:nth-child(2){
                display: none;
            }
            &#x26;:nth-child(3){
                transform: rotate(-45deg);
                top: 1px;
                position: relative;
<strong>            }
</strong>        }
    }
}
</code></pre>

### JavaScript

{% code lineNumbers="true" %}

```javascript
var $hamburgerMenu = $(".hamburger-menu");

$hamburgerMenu.on("click", function(e) {
        $hamburgerMenu.toggleClass("active");
        $(".mobile-navigation").toggleClass("active");
});
```

{% endcode %}