mmenu

mmenu on monopage

HTML

<script src="http://www.white-board.be/AMG/jquery.mmenu.all.js"></script>
<body class="result">

<div>


<nav id="my-menu">
<ul>
   <li id="80"><span id="80_basis">80% werken</span>					
	<ul id="80_sub">
		<li id="zorgen"><span>	tijdskrediet met motief		</span>		
		<ul> 
			<li><a href="data/zorgen.html"><i class="fas fa-hand-holding-heart fa-lg"></i>&nbsp;&nbsp;"zorgen" voor een derde</a></li>
			<li><a href="/80/opleiding"><i class="fas fa-graduation-cap fa-lg"></i>&nbsp;&nbsp;erkende opleiding</a></li>
		</ul>					
		</li>	
		<li><span>	thematische verloven			</span>		
		<ul> <li><a href="/80/ouderschap"><i class="fas fa-child fa-lg"></i>&nbsp;&nbsp;ouderschapsverlof</a></li>
			<li><a href="/80/palliatief"><i class="fas fa-dove fa-lg"></i>&nbsp;&nbsp;palliatief verlof				</a></li>
			<li><a href="/80/medbed"><i class="fas fa-briefcase-medical fa-lg"></i>&nbsp;&nbsp;verlof medische bijstand		</a></li>
		</ul>						
		</li>
	</ul>
	</li>	
	<li id="50"><span>	50%	werken</span>
			<ul>
		<li><span>	tijdskrediet met motief			</span>		
		<ul> 
			<li><a href="zorgen.html">	tijdskrediet "zorgen" voor een derde				</a></li>
			<li><a href="/50/opleiding">	tijdskrediet erkende opleiding				</a></li>
		</ul>					
		</li>	
		<li><span>	thematische verloven			</span>		
		<ul> <li><a href="/80/ouderschap">	ouderschapsverlof				</a></li>
			<li><a href="/80/palliatief">	palliatief verlof				</a></li>
			<li><a href="/80/medbed">	verlof voor medische bijstand		</a></li>
		</ul>						
		</li>
	</ul>	
	</li>		
	<li id="00"><span>	  voltijdse schorsing</span>
		<ul>
		<li><span>	tijdskrediet met motief			</span>		
		<ul> 
			<li><a href="/80/zorgen">	tijdskrediet "zorgen" voor een derde				</a></li>
			<li><a href="/80/opleiding">	tijdskrediet erkende opleiding				</a></li>
		</ul>					
		</li>	
		<li><span>	thematische verloven			</span>		
		<ul> <li><a href="/80/ouderschap">	ouderschapsverlof				</a></li>
			<li><a href="/80/palliatief">	palliatief...

CSS

/*! * jQuery mmenu * mmenu.frebsite.nl * * Copyright (c) Fred Heusschen */
.mm-hidden{
    display:none!important
}
.mm-wrapper{
    overflow-x:hidden;
    position:relative
}
.mm-menu{
    box-sizing:border-box;
    background:inherit;
    display:block;
    padding:0;
    margin:0;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    z-index:0;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}
.mm-menu a,.mm-menu a:active,.mm-menu a:hover,.mm-menu a:link,.mm-menu a:visited{
    color:inherit;
    text-decoration:none
}
.mm-panels,.mm-panels>.mm-panel{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    z-index:0
}
.mm-panel,.mm-panels{
    background:inherit;
    border-color:inherit;
    box-sizing:border-box;
    margin:0
}
.mm-panels{
    overflow:hidden
}
.mm-panel{
    -webkit-overflow-scrolling:touch;
    overflow:scroll;
    overflow-x:hidden;
    overflow-y:auto;
    padding:0 20px;
    -webkit-transform:translate(100%,0);
    -ms-transform:translate(100%,0);
    transform:translate(100%,0);
    -webkit-transform:translate3d(100%,0,0);
    transform:translate3d(100%,0,0);
    transition:-webkit-transform .4s ease;
    transition:transform .4s ease;
    transition:transform .4s ease,-webkit-transform .4s ease;
    -webkit-transform-origin:top left;
    -ms-transform-origin:top left;
    transform-origin:top left
}
.mm-panel:not(.mm-hidden){
    display:block
}
.mm-panel:after,.mm-panel:before{
    content:'';
    display:block;
    height:20px
}
.mm-panel_has-navbar{
    padding-top:40px
}
.mm-panel_opened{
    z-index:1;
    -webkit-transform:translate(0,0);
    -ms-transform:translate(0,0);
    transform:translate(0,0);
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0)
}
.mm-panel_opened-parent{
    -webkit-transform:translate(-30%,0);
    -ms-transform:translate(-30%,0);
    transform:translate(-30%,0);
    -webkit-transform:translate3d(-30%,0,0);
 ...

JavaScript

$(document).ready(function() {
   
	
   
		var $menu = $("#my-menu").mmenu({
				"offCanvas": {
				"blockUI": 'modal'		
				},
				"slidingSubmenus": true,
				"extensions": ["border-full","theme-white"],
				"navbar":	{
					"add": true,
					"title": 'deeltijdse tewerkstelling'
				},
				"backButton": {
					"close": true
				},
				"iconPanels": { 
					"add": true,
					"size": 80		
				},
				"setSelected": {
				"parent": true
				},
				"iconbar": {
					"add": true,
					"type": "tabs",
					"top": [
					   "<a href='index.php'><i class='fas fa-home'></i></a>",
					],
					"bottom": [
					  
					]
				 },
				 
								
		});
		
				
		var api = $("#my-menu").data( "mmenu" );
      
		api.open();  
       
  	$('#external').click(function(ev) {
    		ev.preventDefault(); //Avoid mmenu to get the click and close
        var api = $("#my-menu").data( "mmenu" );
        api.openPanel( $("#80_sub") );
    });
       
});