Comments (13)
You can check my fork here.
from jquery-menu-aim.
I am also looking for the same mouseover event, can you please help?
from jquery-menu-aim.
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();
'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
from jquery-menu-aim.
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" );
}
});
from jquery-menu-aim.
How to make it work with mouseout?
from jquery-menu-aim.
. Please answer miki2020 question. I am waiting for the same answer.
from jquery-menu-aim.
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();
a').addClass("maintainHover");
'display': 'block',
'left': width - 3,
'height': height - 4,
'top': -1
});
});
});
On Jun 16, 2015 16:37, "aftabdev99" [email protected] wrote:
. Please answer miki2020 question. I am waiting for the same answer.
—
Reply to this email directly or view it on GitHub
#37 (comment)
.
from jquery-menu-aim.
Here's my vision to solve it: #67
from jquery-menu-aim.
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
from jquery-menu-aim.
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.
from jquery-menu-aim.
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
from jquery-menu-aim.
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.
from jquery-menu-aim.
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
from jquery-menu-aim.
Related Issues (20)
- Nested Menu with Menu-aim HOT 4
- if Submenu is active
- Bootstrap columns / rows HOT 1
- Menu aim can not show sub menu on Firefox HOT 2
- Publish to NPM? HOT 1
- Does a non-jquery version exist? HOT 2
- Delayed submenu on hover HOT 2
- Compatibility issue with displaing menu with jquery.stickyNavbar
- jQuery-menu-aim with Jquery Vertical UI tabs HOT 1
- Responsive dropdowns
- There is no git tags on GitHub repository
- how to keep the container fixed?
- Describe the tolerance option in the documentation
- Re-Hover doesn't work with 'bottom' settings (in Shopware) HOT 15
- submenuSelector not working
- Example for horizontal menus? HOT 2
- Prevent event bubbling ?
- Navigating through keyboard
- Wordpress plugin?
- Consider rewriting this plugin as a hook/component for react?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jquery-menu-aim.