header

Det greieste er kanskje å inspisere koden og de enkelte elementene

De viktige bitene i stilsettet:

(Formatert som pre-element så de vil ikke flyte)

/* fixed button for changing menu visibility*/
#menuchanger{position:fixed;left:0px;top:50%;
             min-height:44px; min-width:12px}
.menuchangershow{background:url(showmenu.png) no-repeat 100% 0}
.menuchangerhide{background:url(hidemenu.png) no-repeat 100% 0}

/* keeping 3 columns: left show/hide marker, menu and content */
.mainbox{   
				display:flex;
				display: -webkit-flex;
				flex-flow: row;
				-webkit-flex-flow: row;
   
   min-height: 100px;
   max-width:100%   
}
/* first column fixed width*/
#menuchangercol{background-color:#D3EAFF;width:16px;
					
				-webkit-flex: none;
				flex: none;
                 }

/* the menu itself , second column fixed width*/
.mymenu{background-color:#D3EAFF;
	width:140px;
	font-size: 1em;
	line-height:130%;
	border-right:solid;border-width:thin;
	padding-left:5px;
	padding-top:20px
			   
				-webkit-flex: none;
				flex: none;
}
.mon{display:block}
.moff{display:none}

/* third column, main content, fill up all of the rest*/
.content{padding:5px
			  
				-webkit-flex: 1;
				flex: 1;
}

.header{border-bottom:solid;
	border-width:thin;
	width:100%;
	background-color:#D3EAFF;
	font-size: 1.4em}
.header h1{padding:20px;margin:0px}
.footer{border-top:solid;
	border-width:thin;
	font-size: 1.4em
}

Javascript

function toggleMenu(){
	var m=document.getElementById("mymenu");
	var changer=document.getElementById("menuchanger");
	m.classList.toggle("moff");
	m.classList.toggle("mon");
	changer.classList.toggle("menuchangershow");
	changer.classList.toggle("menuchangerhide");
}