Monday, September 25, 2017

Auto Expanding Menu on Hover

Today someone on the apex.world Slack asked a question about having the side navigation menu auto-expand when hovering it. So I thought I would share this with others as well.

It can be easily be done using only a couple of JavaScript lines of code:
(function(ut, $) {

var TREE_NAV_WIDGET_KEY = 'nav';

$(window).on('theme42ready', function() {
    /* Make sure that the navigation menu is collapsed on page load */
    if (ut.toggleWidgets.isExpanded(TREE_NAV_WIDGET_KEY)){
        ut.toggleWidgets.collapseWidget(TREE_NAV_WIDGET_KEY);
    }

    /* Expand on mouse over, collapse on mouse out */
    $('.apex-side-nav.js-navCollapsed .t-Body-nav').hover(
        function(){
            ut.toggleWidgets.expandWidget(TREE_NAV_WIDGET_KEY);
        },
        function() {
            ut.toggleWidgets.collapseWidget(TREE_NAV_WIDGET_KEY);
        }
    );
});

})(apex.theme42, apex.jQuery);
First thing we need to do is make sure that the side navigation is collapsed.
Then we add a hovering handler using the jQuery .hover() on the navigation menu container.

You'll end up with something like this:

Have fun

You can have a look at it in action in my Demo Application
Edit 09-27
Now triggers the custom navigation menu event.
Also calls the delayResize function so that any sticky headers get resized correctly when the side navigation menu is expanded and collapsed.

Edit 09-28
Rewrote to use namespacing, wrapped using the "theme42ready" event and replaced the collapsed/expand calls with the universal theme functions.

21 comments:

  1. Hello Maxime,
    thank for this port!

    Do you know how to do the same with the Top Navigation Menu in APEX 5?

    Best regards,
    Joerg

    ReplyDelete
    Replies
    1. Hello Joerg

      Both the top and side navigation menu are only rendering the first level items of the menu. Then when you click to expand a node, APEX is making an AJAX request to insert the node's children direct children.

      To be able to display them automatically, you would have to simulate click events when hovering the parent nodes with children.

      Max

      Delete
    2. Thanks for the tip! Javascript is not my favourite language - so I hope I can figure that out. :-j

      Delete
  2. Hi Max, really like the look of the Menu; however I am a total noob at this! I can incorporate the Javascript on Page Load but not sure where to add the JQuery.hover(). Any help would be appreciated.

    ReplyDelete
    Replies
    1. Hello
      You could either do it in an On Page Load JavaScript dynamic on page 0. Simply copy the above code in the DA.
      Even better would be to have the above code in a JavaScript file and then include that file in your application.

      Delete
  3. Hi Max,
    It works good but Problem when refresh region!

    ReplyDelete
  4. Hello Maxime,
    I am trying to use your solution and I get following error:
    Uncaught TypeError: Cannot read property 'isExpanded' of undefined

    We are using Apex 19.1 Do you know what is causing this error?

    Thank you

    ReplyDelete
  5. Hello Maxime Sir,
    I am trying to use your solution and I get following error:
    Uncaught TypeError: Cannot read property 'isExpanded' of undefined

    We are using Apex 19.1 Do you know what is causing this error?

    Thank you

    ReplyDelete
    Replies
    1. Athuku konjam selavu aagume..

      Delete
    2. APEX 19 removed some of the methods that were used in the above code. I will update it so that it can also work on APEX 19

      Delete
    3. This comment has been removed by the author.

      Delete
    4. Thanks Sir,Awaiting for your reply.

      Delete
    5. Here its a Solution For 19 Version

      AUTO EXPAND / COLLAPSE FOR 19 VERSION

      $(window).on("theme42ready", function() {
      if ($("body").hasClass("js-navExpanded")) {
      $("#t_Button_navControl").click();
      }

      $(".apex-side-nav.js-navCollapsed .t-Body-nav").hover(
      function(){
      $("#t_Button_navControl").click();
      },
      function(){
      $("#t_Button_navControl").click();
      }
      );

      });

      Delete
    6. Thank You @Ganesh.. It's working for APEX 19 with your code.

      Delete
    7. can you please explain the code? i am new to javascript

      Delete
  6. Dear Maxime,

    Am also getting the same error (Uncaught TypeError: Cannot read property 'isExpanded' of undefined) while running on APEX 19 but there is no problem in APEX 18. Is there any fix available to overcome that error.

    ReplyDelete
    Replies
    1. APEX 19 removed some of the methods that were used in the above code. I will update it so that it can also work on APEX 19

      Delete
  7. AUTO EXPAND / COLLAPSE FOR 19 VERSION

    $(window).on("theme42ready", function() {
    if ($("body").hasClass("js-navExpanded")) {
    $("#t_Button_navControl").click();
    }

    $(".apex-side-nav.js-navCollapsed .t-Body-nav").hover(
    function(){
    $("#t_Button_navControl").click();
    },
    function(){
    $("#t_Button_navControl").click();
    }
    );

    });

    ReplyDelete
    Replies
    1. Hi @ganesh its working thank you and can you please explain the code as I am new to javascript. Thanks

      Delete
  8. Useful article, thank you for sharing the article!!!

    Website: bloggiaidap247.com giúp bạn giải đáp bash là gì hay bash idol là gì và nhiều thông tin hữu ích

    ReplyDelete