Building an OCN

Eine Off-Canvas Navigation ist eine Navigation, die außerhalb des Bildschirms (bzw. Canvas) platziert und sichtbar wird, sobald ein Button geklickt oder mit der Tastatur aktiviert wird.

Wir benötigen also ein <div> für den Offsite-Container und ein <div> für den Site-Container:

<div class="off-site-container">
  <nav class="main">
    <!-- <ul> -->
  </nav>
</div>

<div class="site-container">
  <button>Open Navigation</button>
  <!-- ... -->
</div>

Making it work

Die Website und die Navigation, also sowohl der Off-Site-Container als auch der Site-Container, werden nach einem Klick auf den Button nach rechts verschoben - die Navigation wird sichtbar – und nach einem weiteren Klick wieder zurück.

Wir müssen

einen EventListener auf einen Button legen
den Screen nach rechts verschieben, wenn der Button geklickt wird
den Screen wieder nach links verschieben, wenn der Button nochmals geklickt wird

Adding the event listener

Zuerst müssen wir den Button selektieren, dann legen wir einen EventListener drauf:

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

button.addEventListener('click', e => {
  console.log('Push the screen');
});

Pushing the screen

Wenn wir in CSS Dinge verschieben wollen, nehmen wir am besten die Eigenschaft transform.

.offsite-container,
.site-container {
  transform: translateX(14rem);
}

Der einfachste Weg, der Navigation zu sagen, dass sie sich öffen soll, ist, dem <body> eine Klasse offsite-is-open mitzugeben. Wenn es die Klasse gibt, öffnen wir die Navigation.

.offsite-is-open .offsite-container,
.offsite-is-open .site-container {
  transform: translateX(14rem);
}

Um die Navigation zu öffnen, fügen wir die Klasse offsite-is-open zu <body> hinzu:

const button = document.querySelector('button');
const body = document.body;

button.addEventListener('click', e => {
  body.classList.add('offsite-is-open');
});

Pushing the containers back

Wenn der Button erneut gedrückt wird, wollen wir die Navigation wieder verschwinden lassen. Wir entfernen die Klasse offsite-is-open wieder aus dem <body>.

Zuerst prüfen wir, ob die Klasse vorhanden ist
Wenn die Klasse vorhanden ist, nehmen wir sie weg
Wenn die Klasse nicht vorhanden ist, fügen wir sie hinzu

button.addEventListener('click', e => {
  if (body.classList.contains('offsite-is-open')) {
    body.classList.remove('offsite-is-open');
  } else {
    body.classList.add('offsite-is-open');
  }
});

Wir können den Code etwas vereinfachen, indem wir die Klasse toggeln:

button.addEventListener('click', e => {
  body.classList.toggle('offsite-is-open');
});