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"); }