Overview
This document explains how to hide the left navigation menu on entry to the page in Oracle apex and expand navigation menu on mouse over.
Technologies and Tools Used
The following technology has been used to achieve this in oracle apex.
- Oracle Apex
Use Case
The Navigation menu can be expanded by clicking on the menu control button and then manually compressed again by clicking the button again. However, it can be used to automatically hide the navigation menu.
Auto-Hiding the Navigation Menu
JQUERY CODE
$(window).on(“theme42ready”, function()
{
if (
$(“body”).hasClass(“js-navExpanded”)
)
{
$(“#t_Button_navControl”).click();
}
}
);
Put the Code in Execute when Page Load like the below Image in page.
Example:
have added the code in Employee Details Page. You can see the navigation menu before adding the code
After adding the code:
Expand Navigation Menu on hover
Step1: Change Template options
Application > Shared Components > User Interface – User Interface Attributes > Navigation Menu > Template Options (Collapse Mode – Icon (Default).
Step2: Put the Code in Function and Global Variable Declaration the below Image in page.
JQuery Code:
(function ($) {
$(window).on(‘theme42ready’, function () {
if ($(‘.t-PageBody’).hasClass(‘js-navExpanded’)) {
$(‘#t_Button_navControl’).click();
}
$(‘.apex-side-nav .t-Body-nav’).hover(
function () {
$(‘.t-PageBody:not(.js-navExpanded) #t_Button_navControl’).click();
},
function () {
$(‘#t_Button_navControl’).click();
}
);
});
})(apex.jQuery);
