Which looks just like this:
By overriding the Universal Theme's CSS related to the side navigation menu, I was able to make the menu display as an overlay.
I've also tested the solution on the Apex 5.1 EA2 and noticed that the html markup of the menu changed quite a bit in order to handle RTL applications.
You can retrieve both CSS here:
https://github.com/maxime-tremblay/apex-css-overlay-sidemenu
Then will need to include the corresponding CSS file either in the theme roller's custom CSS attribute or as an external file in your application's CSS files.
Additionally, by default, the side navigation menu remembers the previous state it was in. So if on a page you expand the menu and refresh it, the menu will be rendered as expanded.
What we can do to prevent that from happening is have some JavaScript code execute on page load that is going to collapse the menu if it's expanded.
$('.t-PageBody.js-navExpanded #t_Button_navControl').click();
That code can be executed as a dynamic action on page 0 or in a global JavaScript file so that it's going to affect all pages in the application.
You will get something that looks like this:
If you would like to have the menu be fullscreen you can simply uncomment the fullscreen part at the end of the CSS file.
You can have a look at my Demo Application
GREAT!
ReplyDeletenesto
ReplyDeleteCould you please explain in detail how to do it?
ReplyDeletehttps://community.oracle.com/thread/4009538
Hello Mahmoud
DeleteI just replied to you on the forum.
Thanks alot Max.
DeleteMax,
DeleteCould you help me in this new thread
https://community.oracle.com/thread/4009663
Thanks Max for your contribution. How to apply the grey overlay on the background if the side navigation is expanded.
ReplyDeletePlease see the following thread
https://community.oracle.com/thread/4012166
Hello Mahmound
DeleteI just replied in the forum thread.
Maxime,
ReplyDeleteThanks again, here is another thread concerned with Swipe effect
https://community.oracle.com/thread/4009663
Regards
Mahmoud
Hey Maxime, thanks for this.
ReplyDeleteI am currently on APEX 5.1, so do I have to just include the files: overlay-sidemenu-apex51.css and overlay-sidemenu-apex51-prefixed.css?
Also is there a way to customize the side menu to make it a bit bigger and have tabs/search etc..