Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Menu-aim on mouseover event #37

Open
JoshuaCE opened this issue Sep 24, 2013 · 13 comments
Open

Menu-aim on mouseover event #37

JoshuaCE opened this issue Sep 24, 2013 · 13 comments

Comments

@JoshuaCE
Copy link

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

@sanjayushi
Copy link

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

@JoshuaCE
Copy link
Author

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
Copy link

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
Copy link

miki2020 commented Jun 8, 2015

How to make it work with mouseout?

@aftabalamdev99
Copy link

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

@sanjayushi
Copy link

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
Copy link

banesto commented Jun 16, 2015

Here's my vision to solve it: #67

@aftabalamdev99
Copy link

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
Copy link

banesto commented Jun 16, 2015

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
Copy link

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
Copy link

banesto commented Jun 21, 2015

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
Copy link

banesto commented Jun 22, 2015

You can check my fork here.

@aftabalamdev99
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants