Donnerstag, 11. August 2016

APEX 5 Hiding The Navigation Menu and Close a Menu by Clicking Anywhere on the Document

It is possible to hide  The Navigation Menu and close the  Menu when clicking outside in APEX 5.0. Let do like this Example.


JQUERY CODE


$(window).on("theme42ready", function() {

   if ($("body").hasClass("js-navExpanded")) {

   $("#t_Button_navControl").click();
     
     

  }

});



$(document).click(function (event) {
        var clickover = $(event.target);
        var _opened = $("body").hasClass("js-navExpanded");
        if (_opened === true&&!clickover.hasClass("body")&&(event.target.id!="t_Button_navControl"&&(event.target.id!="t_Body_nav"))){
            $("#t_Button_navControl").click();
        }
     
     
    });

Put the Code in Execute when Page Load like the below Image




CSS3 CODE
Put the Code in the page Inline Editor like the above Image


.apex-side-nav.js-navExpanded .t-Body-content,
.apex-side-nav.js-navExpanded .t-BreadcrumbRegion-body,
.apex-side-nav.js-navExpanded .t-Body-side,
.apex-side-nav.js-navExpanded .t-Body-title {
    margin-left: 0;
}
.apex-side-nav.js-navExpanded .t-Body-main {
    margin-left: 0;
    transform: translate3d(200px, 0px, 0px);
}
.apex-side-nav.js-navCollapsed .t-Body-nav {
    transform: translateX(-40px);
}
.apex-side-nav.js-navCollapsed .t-Body-content,
.apex-side-nav.js-navCollapsed .t-Body-side,
.apex-side-nav.js-navCollapsed  .t-BreadcrumbRegion-body,
.apex-side-nav.js-navCollapsed .t-Body-title {
    margin-left: 0;
}
.t-PageBody--login, .t-PageBody--login .t-Body {
    background-color: #fff;
}


Demo

Keine Kommentare:

Kommentar veröffentlichen