mmenu

mmenu on monopage

by Jaydip Shingala

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>
                            <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>		
        ...

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 () {

                $(document).on("click", ".open-dynamic", function () {
                    $(document).find("[href='" + $(this).attr("data-href") + "']").trigger("click");
                });

                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();



            });