DropDownMenu OnHover

  
Hello,

Since having a navigation menu with only one level can be limited when we have complex applications, OutSystems version 8 provides navigation submenus out of the box that can be used just by using drag & drop (link).

These menus (RichWidgets' DropDownMenu) work on click in order to support touch devices such as smartphones and tablets.

However, in some specific scenarios, we may want them to work on hover (being able to use the first-level menu's link and providing a cool interaction). If you want this, and let me reinforce that this will not work on touch devices, you can customize the default menus by adding the following Javascript in your Menu:

/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@ Add this to the Menu web block javascript @@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/

// Menus triggered on hover
$(function($) {
    
    // 1. Don't propagate click event to body element
    $(".Menu_TopMenus").click(function(event){
        event.stopPropagation();
    });
    
    // On mouse enter, trigger the click event (opening the menu)
    $( document.body ).on("mouseenter", '.Menu_DropDownButton', function(ev) {
        var $inMenu = $(ev.target).closest('.Menu_DropDownButton');
        if (!$inMenu.hasClass('open')) {
            $inMenu.find('.Menu_TopMenu').click();
        }
    });
    
    // On mouse leave, close all menus
    $( document.body ).on("mouseleave", '.Menu_DropDownButton', function(ev) {
        var $inMenu = $(ev.target).closest('.Menu_DropDownButton');
        if ($inMenu.hasClass('open')) {
            RichWidgets.DropDownMenus.closeAllMenus();
        }
    });
});

In attachment, you can check a sample eSpace that shows this ;)

Best Regards,
Vasco Pessanha
Thanks for sharing this. The new DropDownMenu kicks ass!
It's super easy to use (I mean... IntelliWarp works exactly as expected) and the javascript API was a nice surprise. :)
Hi Vasco,

I think why is that the On hover effect is not functioning in Firefox browser??

Hi Regie,
Did you use the "MenuOnHover.oml" attached to the post? It is working in Firefox (at least in my machine)..
Do you have a recent version of Firefox?

Cheers,
Vasco Pessanha
Hi Vasco,

Maybe you are right, i think i dont have the most recent version of the Firefox. Thanks for your reply


Cheers,
Regie
Hi all,
As I mentioned in my other post :http://www.outsystems.com/forums/discussion/11185/the-new-dropdownmenu-not-working-on-imac-and-safari-on-pc/

Reason being If you add this script to the dropdown, it does not work anymore in Safari (both mac and windows)
So I fumbled around and changed the script a little to rule out Safari, so we still can enjoy the hover on any other browser but Safari ...


/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@ Add this to the Menu web block javascript @@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/

// Menus triggered on hover
$(function($) {

   var nAgt = navigator.userAgent;
   console.log( nAgt );  
   // Chrome has Safari also, but Safari does not have Chrome :-)
   if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
       return;
   }
   
    // 1. Don't propagate click event to body element
    $(".Menu_TopMenus").click(function(event){
        event.stopPropagation();
    });
    
    // On mouse enter, trigger the click event (opening the menu)
    $( document.body ).on("mouseenter", '.Menu_DropDownButton', function(ev) {
        var $inMenu = $(ev.target).closest('.Menu_DropDownButton');
        if (!$inMenu.hasClass('open')) {
            $inMenu.find('.Menu_TopMenu').click();
        }
    });
    
    // On mouse leave, close all menus
    $( document.body ).on("mouseleave", '.Menu_DropDownButton', function(ev) {
        var $inMenu = $(ev.target).closest('.Menu_DropDownButton');
        if ($inMenu.hasClass('open')) {
            RichWidgets.DropDownMenus.closeAllMenus();
        }
    });
});

Enjoy and Happy Coding or do I need to say Merry Coding and Happy NewYear() !!
Thanks Joop, didn't notice this issue..

Cheers,
Vasco Pessanha
Hello People,

I ran sample oml on my Chrome browser, it worked fine.

But when I integrated this javascript code in my application, it's not working. What can be the problem? Please advice.

Thanks,
Suraj Borade
Suraj,

You're responding to an article that's almost two years old, so I suspect it doesn't work in the latest version of the platform.
Hey Kilian,

Thanks for the reply.

I wanted to generate menu drop down list "onhover" when I go to menu. I copied this Javascript in my application.

My drop down's sub menu items are coming from the database.
i.e. If I have Test as a menu, it's submenu item Test1,Test2..... are coming from the database.

With this Javascript what's happening is that when I enter into the application for very first time, "onhover" I am not getting any sub menu item drop down. But as I click on any menu item and go to other screen, "onhover" code is working fine.

Do you know the cause? or do you have any other way of implementing onhover functionality?

Thanks,
Suraj
Hi Suraj,

I implemented a menu using CSS only, that also has onhover functionality, but it doesn't work with the platform menus. I unfortunately can't help you with your questions.
Hi vasco,

Thanks a lot for sharing it, it really helpful. May I ask two questions here:
1. In this version, you can see the menu on mouse hover. So can we disable the click, for I want to set the click area with a link. So I can open the url by clicking, and open the menu by hovering.
2. The sub-menu will occpy empty lines in the webpage though I didn`t open it. How can I remove the empty lines.

Eric,

Is it hidden with visibility:hidden or display:none? If the former, that explains it still takes real estate.