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 :https://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.