Mobile menu ikon

Mobil menu ikon.
HTML, CSS og jQuery - en nem og effektiv løsning.

HTML

<div class="menu__icon">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>

CSS

.menu__icon {
position: absolute;
top: 1em;
right: 1em;
z-index: 100000;
display: none;
}
 
.icon-bar {
display: block;
width: 18px;
height: 2px;
background-color: #ccc;
border-radius: 1px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
margin-top: 3px;
cursor: pointer;
}

/* Menu */
@media (max-width: 700px) {
#MENU-DER-VISES-OG-SKJULES-VED-KLIK {
display: none;
}
.menu__icon {
display: block;
}
}

jQuery

$(".menu__icon").click(function () {
      $("#MENU-DER-VISES-OG-SKJULES-VED-KLIK").toggle();
});