I have a menu with a sub-menu of two options, as you leave one sub-menu item to go to the next the sub-menu disappears. How Do I stop this?
jQuery:
// SHOW TAKE ATTENDANCE SUB MENU
$('#take_attendance').hover(function(){
$('#taskbar_sub ul').fadeIn(100);
});
$('#taskbar_sub').mouseout(function(){
$('#taskbar_sub ul').hide();
});
// /SHOW TAKE ATTENDANCE SUB MENU
It'll be hard to debug without seeing the HTML/CSS.
It sounds like one of three things:
Your submenu is not nested within #take_attendance.
Your submenu ul is positioned outside the parent element (floated or absolutely positioned)
Your submenu li has margins below each item.
To get a better answer, I would suggest using jsfiddle to input sample HTML/CSS/JS so that someone can properly debug it.
As #Justice said, it's easier to do this if your submenus are nested. If you're going to keep the ULs separate, however, take a look at this answer for some help.
Related
My e-commerce store requires three tier menu item to achieve the multi-column megamenu appearance that I want, and although its a bit weird I have found a workaround on desktop by simply hiding the "middle" menu item as "shown" here by the red box (as in there are menu items there, but they are display none).
This is honestly fine, as I hover over the parent menu item, and then only see the li menu items. However my issue is actually on mobile, where the expanding of the top menu item requires a click, and then I need to click a second time to expand the "middle" menu item as you can see in the screenshot below:
There is an event attached to both "caret" clicks, and that is:
function(e) {
e.target.closest("li").classList.toggle("dropdown-open"), e.preventDefault()
}
This attaches an event to the menu item as shown in this screenshot:
..and that allows the submenu to appear below "Weighing Categories" like this:
So my goal (on the mobile viewport) is to show all the submenu items (with the exception of the middle one, in this case "weighing categories") when the categories caret is clicked. I have tried a CSS approach (which is what the dropdown-open class is basically adding), but this results in it always showing (whereas I still want to keep the first click, just not the second click requirement).
body .main-navigation ul.menu li.menu-item-has-children > .sub-menu-wrapper { position: inherit; left: auto; opacity: 1; transform: translateX(0); }
I have also tried multiple variations of using JS to insert a class, and I think this is on the right track, but missing something lol.. I must admit that my JS is poor, mainly trying examples I have found during my research and adapting them.
jQuery("nav-menu-item-1247 .caret").click(function() {
jQuery("#nav-menu-item-6721").addClass( "dropdown-open");
});
The above (and note that it is not working) was supposed to add "dropdown-open" proactively to the weighing categories menu item ("6721") when the top menu item (the "1247" is the "categories" one) is clicked. Perhaps the prevent default in the default JS is blocking it, I am not sure and do not have the skill to troubleshoot it lol.
I would really appreciate some help, been fighting with this for almost 4 hours and I am probably doing something stupid lol. I can share the URL if needed, it is just locked behind a user/pass before it goes live, but I can temporarily remove it.
Thanks :)
Below is a script with a few bugs and I am trying to work out the kinks. The main bug is a confusion or mix-up between currently selected(hovered) items' sub-menus and previously selected sub-menus.
jQuery(document).ready(function($) {
$("ul.menu > li").hover(
function() {
$(this).find("ul.sub-menu").stop().animate({
height: 'toggle',
opacity: 'toggle'
});
}
);
});
The bug doesn't appear on the initial hover of each parent item but seems to only happen, as can be seen from this fiddle, if hovered over the 2nd parent item, then hover the 1st parent, and then quickly hover into 1st sub-menu, you will see the desired sub-menu disappear, and the previously selected sub-menu reappears. Also, I should also add that if hovered over the 3rd parent item, then hover over the 2nd parent, and then quickly hover into 2nd sub-menu, you will again see the undesired effects, or bug.
Another less detailed bug or glitch is that after the right combination or amount of random hovers 1 of 3 sub-menus permanatly disappears. Basically, the script is very unstable; how can I make this script a rock solid UI? How can these bugs be eliminated to ensure the best UX? Thanks.
Problem is that you are catching the second sub menu while it is still visible and it counts as hovering it once again.
You can solve this pretty easily by updating the z-index for the sub-menu corresponding to the hovered element:
$("ul.sub-menu").css('z-index', 1);
$(this).find("ul.sub-menu").css('z-index', 2).stop()...
http://jsfiddle.net/pF8wZ/6/
I have a jQuery menu widget which contains a single root entry and several sub entries. I want it to behave as follows:
It shouldn't open on hover but on click
It shouldn't open to the side but upwards
How can I achieve this?
$("#menu").menu({ trigger: "click" });
That will change the event that triggers the menu from "hover" to "click"
I am assuming by "It shouldn't open to the side by upwards" you mean the sub menu should appear below the selected main menu option, expanding the height of the main menu. However, this is an assumption; If you could clarify your requirements I will come back and edit my answer.
Instead of hover event you would use click event. And most of the time direction of the sub menus or menu item contents is defined with absolute position so in your case you would define the position in a way where you would define a top negative position, where value would be the height of your hidden content.
Hope it helps.
I'm trying to create an effect similar to the navigation on this site: http://rogwai.com/. I'm fairly close as you can this in this jsFiddle.
It's working fine if you hover into one li at a time (i.e. from the bottom). If however, you slide horizontally through each list item the 'follower' returns to the active position or slides of the end after each item that's hovered over. Instead it should follow the mouse.
Looking at the code executed on hover out this is completely understandable. What I can't get my head around is how to make it only return to the active position or slide off the end when the mouse completely leaves the menu.
Hopefully that makes sense - you should see the problem straight away from the jsFiddle.
Thanks in advance.
What you can do is add the mouseenter part to the li as you have it, but put the mouseleave part on the entire ul. This way, the leave will only fire when you mouse out of the entire ul.
http://jsfiddle.net/YZr5b/6/
$('nav.block-system-main-menu ul li:not(.follower)').mouseenter(function() {
followerMove($(this));
});
$('nav.block-system-main-menu ul').mouseleave(function(){
followerMove($active);
});
Note, if you are really using jquery 1.2.6 (quite old), you will need to modify this a bit as mouseenter and mouseleave do not exist.
I am stuck on the CSS part, am helping a friend to implement one thing on her webpage. Its a dropdown menu and i got everything working the way i want it to. My problem is that it moves itself to the beginning of the row?
http://gazet.se/TestPages/Test.aspx
How do i get it to be centered?
(I have removed the code that has been solved to reduce the size)
The menu has an id called #jsddm
#jsddm {
float:left;
margin:0;
padding:0;
}
Remove float left - that is first step. Second thing you should put the menu all in one list with sublevels as nested lists and get rid of img separators - they can be added as background images trough css. I suggest you create a new structure for your menu. Heres a nice article explaining it http://www.alistapart.com/articles/dropdowns/
Basically all you have to do is add additional <li> elements to #jsdm and move all menu links inside it.
The menu is floated block element, while the element around it are inline elements, which basicly can't mix. You need to either have all elements in #header_menu to also float, or let the menu be inline, too. (However I'm not sure, the latter would work).