Menu-aim on mouseover event

[JoshuaCE]

Can you help me to get the Menu-aim working on mouseover event..

[sanjayushi]

I am also looking for the same mouseover event, can you please help?

[JoshuaCE]

Hi Sanjay,

sorry for the delay,

Here the code i used to bring menu on Mouseover,

$(document).ready(function () {
$('.dropdown-toggle').on('mouseover', function () {
$('.nav li').removeClass("open");
$(this).parent().toggleClass("open");
var height = $menu.outerHeight(); var width = $menu.outerWidth();
$('ul.' + $(this).attr("rel") + ' li > a').removeClass("maintainHover");
$('ul.' + $(this).attr("rel") + ' li > div').hide();
$('ul.' + $(this).attr("rel") + ' li:first-child > a').addClass("maintainHover");
$('ul.' + $(this).attr("rel") + ' li:first-child > div').css({
'display': 'block',
'left': width - 3,
'height': height - 4,
'top': -1
});
});
});

#HTML // Add one extra REL in your menu link rel="pt" data-toggle="dropdown" class="dropdown-toggle" id="">Portugal

[MarcoSt87]

Hi,

you can also try to insert the following code in your script (to open the menu on mouse over, if its not opened):

$(".dropdown-toggle").mouseover(function() {
if ( !$(this).parent().hasClass("open") ) {
$(this).trigger( "click" );
}
});

[miki2020]

How to make it work with mouseout?

[aftabalamdev99]

. Please answer miki2020 question. I am waiting for the same answer.

[sanjayushi]

Here the code i used to bring menu on Mouseover,

$(document).ready(function () {
$('.dropdown-toggle').on('mouseover', function () {
$('.nav li').removeClass("open");
$(this).parent().toggleClass("open");
var height = $menu.outerHeight(); var width = $menu.outerWidth();
$('ul.' + $(this).attr("rel") + ' li > a').removeClass("maintainHover");
$('ul.' + $(this).attr("rel") + ' li > div').hide();
$('ul.' + $(this).attr("rel") + ' li:first-child >
a').addClass("maintainHover");
$('ul.' + $(this).attr("rel") + ' li:first-child > div').css({
'display': 'block',
'left': width - 3,
'height': height - 4,
'top': -1
});
});
});
On Jun 16, 2015 16:37, "aftabdev99" notifications@github.com wrote:

. Please answer miki2020 question. I am waiting for the same answer.

—
Reply to this email directly or view it on GitHub
#37 (comment)
.

[banesto]

Here's my vision to solve it: #67

[aftabalamdev99]

I am using MarcoSt87 code. It is safe. When
I hover out the the element the popup is still displaying. Any idea how to resolve it. link how it behaves http://s28.postimg.org/5zjezwmkd/jquery_aim.png

[banesto]

Sadly, there are two issues here - mouseover and mouseleave. I am referring to mouseleave as it is solved in my merge request. As to mouseover - it works in the original code. MarcoSt87 code does not include mouseleave so no wonder here.

[aftabalamdev99]

could you give me a complete exact replica of amazon.com when we hover over the mouse the on the Explore the Monkey. It should display the sub menu list and on hovering each sub menu the list of the sub menu will be show. My end goal is exact replica of amazon.com menu

    var $menu = $(".dropdown-menu");
    // jQuery-menu-aim: <meaningful part of the example>
    // Hook up events to be fired on menu row activation.
    $menu.menuAim({
        activate: activateSubmenu,
        deactivate: deactivateSubmenu,
        exitMenu: function(){
            console.log("Exit menu triggered");
            return true; //this new line added by aftab
        } /* added by aftab alam*/
    });
    // jQuery-menu-aim: </meaningful part of the example>

    // jQuery-menu-aim: the following JS is used to show and hide the submenu
    // contents. Again, this can be done in any number of ways. jQuery-menu-aim
    // doesn't care how you do this, it just fires the activate and deactivate
    // events at the right times so you know when to show and hide your submenus.
    function activateSubmenu(row) {
        var $row = $(row),
            submenuId = $row.data("submenuId"),
            $submenu = $("#" + submenuId),
            height = $menu.outerHeight(),
            width = $menu.outerWidth();

        // Show the submenu
        $submenu.css({
            display: "block",
            top: -1,
            left: width - 3,  // main should overlay submenu
            height: height - 4  // padding for main dropdown's arrow
        });

        // Keep the currently activated row's highlighted look
        $row.find("a").addClass("maintainHover");
    }

    function deactivateSubmenu(row) {
        var $row = $(row),
            submenuId = $row.data("submenuId"),
            $submenu = $("#" + submenuId);

        // Hide the submenu and remove the row's highlighted look
        $submenu.css("display", "none");
        $row.find("a").removeClass("maintainHover");
    }

    // Bootstrap's dropdown menus immediately close on document click.
    // Don't let this event close the menu if a submenu is being clicked.
    // This event propagation control doesn't belong in the menu-aim plugin
    // itself because the plugin is agnostic to bootstrap.
    $(".dropdown-menu li").click(function(e) {
        e.stopPropagation();
    });

    $(document).click(function() {
        // Simply hide the submenu on any click. Again, this is just a hacked
        // together menu/submenu structure to show the use of jQuery-menu-aim.
        $(".popover").css("display", "none");
        $("a.maintainHover").removeClass("maintainHover");
    });
    //activate the jquery menu aim on hover
    $(".dropdown-toggle").mouseover(function() {
        if ( !$(this).parent().hasClass("open") ) {
            $(this).trigger( "click" );
        }
    });

I am not in practice in jquery for few months that is why I am a feeling uncomfortable while working with the code. Many Many thanks to u

[banesto]

I just finished now coding option to set whether submenu opens on click and/or hover with ability to change behaviour on the fly - have to polish it and create examples - really hope to do it this week.

[banesto]

You can check my fork here.

[aftabalamdev99]

thank you banesto but I have impelemented this behaviour using ''Bootstrap Hover Dropdown''. You can find detail also on the github as well as on his site http://cameronspear.com/blog/bootstrap-dropdown-on-hover-plugin/. One of very close example what I wanted to implement on my site naptol.com. If you mange to design vertical mega plugin and similar example to naptol.com there is a very good response comes from the open source community if you make your plugin like daraz.pk vertical mega menu plugin and like naptol.com because this is the two latest trend of mega menu on web now a days. thanks banesto