Verhaar_Wiki

You've loaded an old revision of the document! If you save it, you will create a new version with this data.

====== Curtain menu ======
 
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.

===== HTML =====
**Hamburgermenu**

<code>
<a href="javascript:void(0)" class="closebtn"  onclick="closeNav()">&times; SLUIT VENSTER</a>
</code>

===== Javascript =====

Verschillende opties voor javascript, namelijk zichtbaar/onzichtbaar, Z-index of verschil in breedte of hoogte. Mooi met een transition effect.

<code>
<script>
function openNav() {
document.getElementById("sidebar1").style.z-index = "100";
}

function closeNav() {
document.getElementById("sidebar1").style.z-index = "-100";
}
</script>
</code>

<code>
<script>
function openNav() {
document.getElementById("sidebar1").style.visibility = "visible";
}

function closeNav() {
document.getElementById("sidebar1").style.visibility = "hidden";
}
</script>
</code>

<code>
<script>
function openNav() {
document.getElementById("sidebar1").style.width = "80%";
}

function closeNav() {
document.getElementById("sidebar1").style.width = "0%";
}
</script>
</code>

<code>
<script>
function openNav() {
document.getElementById("sidebar1").style.height = "100%";
}

function closeNav() {
document.getElementById("sidebar1").style.height = "9%";
}
</script>
</code>

<code>
<script>
function openNav() {
document.getElementById("sidebar1").style.width = "275px";
}

function closeNav() {
document.getElementById("sidebar1").style.width = "0px";
}
</script>
</code>

----

===== CSS =====
**hamburger icon wijzigt in X**

<code>
<style>
.container {
  display: inline-block;
  cursor: pointer;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}
</style>
</code>

===== HTML =====
**Hamburger icon**

===== Javascript =====
**Hamburger icon toggle class**

<code>
<script>
function myFunction(x) {
  x.classList.toggle("change");
}
</script>
</code>

Edit summary