This is an old revision of the document!

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”.

HTML

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

Verschillende opties voor de Javascript, namelijk zichtbaar/onzichtbaar, Z-index of verschil in breedte of hoogte.

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

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

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

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

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

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

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

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

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

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

CSS

<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>