Menustructuur 02 - Fade in

HTML HOOFDTEKST (HTML en Jquery opbouw an layout):

.nav-dropdown {	box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.5); padding: 0px 4.375% 1px; position: fixed; left: 0px; top: 0 !important; height: 100vh; 
-webkit-transition: all 1.0s ease-in;
-moz-transition: all 1.0s  ease-in;
-o-transition: all 1.0s  ease-in;
opacity: 1;}

/* menuknop */		
#menubutton:before, #menubutton.btn-nav::before {   top: 0; left: 0; position: absolute; display: block; text-indent: 0px; height: 45px; width: 45px; line-height: 48px; text-align: center; content: "m"; font-family: "Fontello"; text-rendering: optimizelegibility; text-transform: none; border-radius: 50%; font-size: 22.5px;}
#menubutton, #menubutton.btn-nav	{ background: transparent; margin-top: 0; position: fixed; top: 20px; right: 24px; z-index: 999;}

/* logo in menu */
.menublock .logo.logoMobile { display: inline-block; vertical-align: top; text-decoration: none; padding: 0px;  pointer-events: none; margin-bottom: 0px; margin-top: -5px;}
	
/*menu layout*/
.menublock { position: absolute; display: block; height: calc(55vh - 32.5px); overflow: scroll; overflow-x: hidden;}
.menublock .logoMobile img {margin: 15px 4.79452%;}
.nav-dropdown ul { display: block;}
.nav-dropdown a, .nav-dropdown a:hover, .nav-dropdown a.active  { position: relative;  padding-left: 1em; height: auto; line-height: 1.4em;  margin-bottom: 1px; margin-top: 1px;  width: 100.839%; }
.nav-dropdown .menu_infoblock  .column-25 [itemprop="telephone"]::before { border-right: 1px dotted rgb(255, 255, 255);padding: 10px 16px 10px 0;}
.nav-dropdown .menu_infoblock  .column-25 [itemprop="email"]::before  { border-right: 1px dotted rgb(255, 255, 255);padding: 10px 15px 10px 0;}
.nav-dropdown .menu_infoblock  .column-25 p { margin-left: 4.79452%; margin-top: 0;}
.nav-dropdown .menu_infoblock  .column-25 strong {line-height:1.5; margin-bottom: 10px; display: block;}
.nav-dropdown .menu_infoblock  .column-25 a { margin-left: -4.79452%; width: 100%; display: block; padding-right: 0;}
.nav-dropdown .menu_infoblock  .column-25:nth-child(1) {  padding-bottom: 10px;}

/* menu-item */															
.nav-dropdown li a { padding: 10px 4.375% 10px 8.75%; }

/*Mobile Menu footer info*/
.footer-content .columns  { padding: 0.875em 0px 0.5em;}
.nav-dropdown .column-25  { display: block; margin: 0px; padding-left:; 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; height: calc(50vh - 30px); bottom: calc(0vh + 10px);;}
.nav-dropdown .column-25 p br { display: none;}
.menu_infoblock, .menublock {width: 91.25vw; margin: 2.5vw 4.375vw 0px;}
}
</style>

CUSTOM CSS (styling > kleuren, lettertypes, etc.):

/*Mobile Menu navigation*/		
.nav-dropdown 	{ background: #FFF;}
.nav-dropdown a, .nav-dropdown a:hover, .nav-dropdown a.active  { font-size: 1em; font-weight: inherit;  font-style: normal;}
.nav-dropdown a  	{ background: #1E1B9C; color: #FFF;}
.nav-dropdown a:hover {background: #2622D1;}

/*Mobile Menu footer info*/
.menu_infoblock { background: #9AC069;}
.nav-dropdown .menu_infoblock  .column-25 {margin-top: 10px;}
.nav-dropdown .menu_infoblock  .column-25 [itemprop="telephone"]::before {color:#FFF;}
.nav-dropdown .menu_infoblock  .column-25 [itemprop="email"]::before  {color:#FFF;}
.nav-dropdown .menu_infoblock  .column-25 p {color: #000000;}
.nav-dropdown .menu_infoblock  .column-25 strong {color: #FFF; font-weight: 700; font-size: 1em; font-family: ;}

/* menu-item */															
.nav-dropdown li a { color: #4E7E54; background: transparent; font-weight: 700; text-transform: uppercase; font-family: ;}
/* hover */															
.nav-dropdown li a:hover { color: #FFF; background: #4E7E54 !important; font-weight: 700;}
/* actief */															
.nav-dropdown > ul > .active > a, .nav-dropdown a.active {color: #FFF; background: #4E7E54 !important; font-weight: 700;}
/* logo in menu */
.menublock .logo.logoMobile { background: #FFF;}
}
</style>