Mixins

Hamburger menu

Standaard variabelen:$hamburger-height: 					25px
$hamburger-width: 					33px
$hamburger-span-height: 			3px
$hamburger-span-color: 			$color-dark
$hamburger-span-color-active: 		$color-dark

Hamburger basis

@include hamburger-base;

Kopiëren

<div class="hamburger">
   <span></span>
   <span></span>
   <span></span>
</div>

Kopiëren

const hamburger = document.querySelector('.hamburger');

hamburger.addEventListener('click', () => {
   hamburger.classList.toggle('-active');
});

Kopiëren

Hamburger effect 1

@include hamburger-effect-1 ($duration, $ease);

Kopiëren

<div class="hamburger">
   <span></span>
   <span></span>
   <span></span>
</div>

Kopiëren

const hamburger = document.querySelector('.hamburger');

hamburger.addEventListener('click', () => {
   hamburger.classList.toggle('-active');
});

Kopiëren

Hamburger effect 2

@include hamburger-effect-2 ($duration, $ease);

Kopiëren

<div class="hamburger">
   <span></span>
   <span></span>
   <span></span>
</div>

Kopiëren

const hamburger = document.querySelector('.hamburger');

hamburger.addEventListener('click', () => {
   hamburger.classList.toggle('-active');
});

Kopiëren

Hamburger effect 3

@include hamburger-effect-3

Kopiëren

<div class="hamburger">
   <span></span>
   <span></span>
   <span></span>
</div>

Kopiëren

const hamburger = document.querySelector('.hamburger');

hamburger.addEventListener('click', () => {
   hamburger.classList.toggle('-active');
});

Kopiëren

Hamburger effect 4

@include hamburger-effect-4 ($duration, $ease);

Kopiëren

<div class="hamburger">
   <span></span>
   <span></span>
   <span></span>
</div>

Kopiëren

const hamburger = document.querySelector('.hamburger');

hamburger.addEventListener('click', () => {
   hamburger.classList.toggle('-active');
});

Kopiëren

Hamburger effect 5

@include hamburger-effect-5

Kopiëren

<div class="hamburger">
   <span></span>
   <span></span>
   <span></span>
</div>

Kopiëren

const hamburger = document.querySelector('.hamburger');

hamburger.addEventListener('click', () => {
   hamburger.classList.toggle('-active');
});

Kopiëren

Hamburger effect 6

@include hamburger-effect-6

Kopiëren

<div class="hamburger">
   <span></span>
   <span></span>
   <span></span>
</div>

Kopiëren

const hamburger = document.querySelector('.hamburger');

hamburger.addEventListener('click', () => {
   hamburger.classList.toggle('-active');
});

Kopiëren