Menustructuur 01 - Slide in

<script>
//-- mobile footer info in dropdown menu
$(function() {
$('.footer-content .column-25:first-child, .footer-content .column-25:nth-child(2)').clone().appendTo('.nav-dropdown').wrapAll('<div class="menu_infoblock"></div>');
}); 
</script>
<style>
@media only screen and (max-width: 671px) {
/*MOBILE MENU NAVIGATION*/
/* menu slide in */
#identityWrapper { position: fixed;  top: 0px; left: 0px; z-index: 99;  width: 100%;}
nav.hidden { display: block; position: fixed; left: 120%; top:65px; /*- AFHANKELIJK VAN HOOGTE #IDENTITYWRAPPER-*/}
.nav-dropdown {	box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.5); padding: 0px 4.375% 1px; position: absolute; 	left: 0px; height: calc(100vh - 65px);
-webkit-transition: all 400ms cubic-bezier(0.785, 0.135, 0.150, 0.860);
-moz-transition: all 400ms cubic-bezier(0.785, 0.135, 0.150, 0.860);
-o-transition: all 400ms cubic-bezier(0.785, 0.135, 0.150, 0.860);
transition: all 400ms cubic-bezier(0.785, 0.135, 0.150, 0.860); /* easeInOutCirc */}  
/*menu layout*/
.nav-dropdown ul { display: block; height: calc(50vh - 30px); overflow-y: scroll; overflow-x: hidden;}
.nav-dropdown a  { position: relative;  padding-left: 1em;}
/*Mobile Menu footer info*/
.footer-content .columns  { padding: 0.875em 0px 0.5em;}
.nav-dropdown .column-25  { display: block; margin: 0px 4.79452%;  width: 100%;  position: relative;bottom: 0vh;}
.nav-dropdown .column-25 a  {margin-left: -4.79452%;}
.nav-dropdown .column-25 [itemprop="faxNumber"] { display: none;}
.menu_infoblock { display: block; position: absolute; width: 100%; height: calc(50vh - 30px); bottom: calc(0vh + 0px);}
}
</style>