Differences

This shows you the differences between two versions of the page.

--- cecilia:webdesign:curtain_menu [2022/02/10 11:18] – ceciliav
+++ cecilia:webdesign:curtain_menu [2022/02/10 11:30] (current) – ceciliav
@@ Line 1: / Line 1: @@
-====== Curtain menu ======
+====== Curtain menu en hamburger icon en X ======
+Maak van Wordpress sidebar 1 een curtain menu. Pas hierin het hoofdmenu toe via widget. De sidebar moet standaard verborgen staan. Met het onderstaande script kan de sidebar (het menu dus) uitgeklapt worden als een "curtain menu". Dit stuk is zonder CSS.
-Maak van Wordpress sidebar 1 een curtain menu. Pas hierin het hoofdmenu toe via widget. De sidebar moet standaard verborgen staan. Met het onderstaande script kan de sidebar (het menu dus) uitgeklapt worden als een "curtain menu".
+===== HTML =====
+**Hamburgermenu**
-HTML
 <code>
@@ Line 10: / Line 10: @@
 </code>
-Verschillende opties voor de Javascript, namelijk zichtbaar/onzichtbaar, Z-index of verschil in breedte of hoogte.
+===== Javascript =====
+Verschillende opties voor javascript, namelijk zichtbaar/onzichtbaar, Z-index of verschil in breedte of hoogte. Mooi met een transition effect.
 <code>
@@ Line 70: / Line 72: @@
 }
 </script>
+</code>
+----
+===== HTML =====
+**Hamburger icon**
+<code>
+<div class="container" onclick="myFunction(this)">
+  <div class="bar1"></div>
+  <div class="bar2"></div>
+  <div class="bar3"></div>
+</div>
 </code>
 ===== CSS =====
-**hamburger wijzigt in X**
+**hamburger icon wijzigt in X**
 <code>
@@ Line 104: / Line 119: @@
 </code>
+===== Javascript =====
+**Hamburger icon toggle class**
+<code>
+<script>
+function myFunction(x) {
+  x.classList.toggle("change");
+}
+</script>
+</code>