Effect I want . Basically I want to popup a simple menu when the user mouseovers a link .
I tried several ready made scripts , but had trouble integrating them with my site. SO decided to built my own.
here is what I am trying to do:
<li onmouseover=showlist1() onmouseout=hidelist1() ><a class="navigation" href="show_delhi_items.php">Menu heading</a></li>
function showlist1() //onmouseover
{
document.getElementById('list1').style.visibility='visible' ;
}
function hidelist1() //onmouseout
{
if (menu elements don't have focus)
{
document.getElementById('list1').style.visibility='hidden' ;
}
}
now in this how do I implement the 'menu elements don't have focus' part ? I know its not possible to know which elemtn has focus. so I need an alternative. Basically the problem is that as soon as the mouse moves outside the main link(the link that popups the hidden menu), the menu hides. what i want is for the menu to remain visible if it gets focus. but currently it gets hidden as soon as the mouse outside our main link
hope I was clear enough.
Make the menu overlap the list item that has the onmouseover menu. Then only close the menu if the mouse is outside both the list item and the menu. You will have to use:
position: absolute;
top: some-y-value;
left: some-x-value;
Hmm now I made that comment i better back it up with an actual way of doing it :)
Go here and read all about suckerfish dropdowns
Go here to see an example implementation
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 :)
In the below code, How do I determine the dimensions of the menu that appears when you click the button? Currently the menu I'm using is extending outside of the Window. I want to get the dimensions of the menu itself so I can adjust the style of the menu to keep it from extending outside the window.
render: function () {
return<BS.DropdownButton title={this.props.title} style={this.state.buttonStyle}>
<span ref="ddMenu">{this.props.children}</span>
</BS.DropdownButton>
}
I've tried using ref with getDOMNode().getBoundingClientRect() on the ddMenu, but the dimensions and coordinates are always 0. I've tried using this getDOMNode code in the componentDidMount function. But that runs when the button is rendered, not the menu.
The problem is that the menu's dimensions and coordinates don't exist until the button is pushed. Unfortunately I couldn't find a react way of doing this. So I came up with a none react solution.
The solution is to add an onClick to the button. In the function that is called, add window.setTimeout set for 1 millisecond. Reason: The menu doesn't appear right away, setTimeout gives you just enough time to wait for the menu to show up. Then you can run this.refs.ddMenu.getDOMNode().parentNode. If you don't add parentNode, you will only get the elements you added to the menu, not the menu itself. Once you have the menu, you can then run getBoundingClientRect() to get the menu dimensions and coordinates.
render: function () {
return<bs.DropdownButton title={this.props.title} onClick={this.getMenu}>
<div ref="ddMenu">{this.props.children}</div>
</bs.DropdownButton>
}
getMenu: function(){
window.setTimeout(function(){
var dropMen = this.refs.ddMenu.getDOMNode().parentNode;
}, 1);
}
dropMen will give you the menu. dropmen.getBoundingClientRect() will give you the menu's dimensions and coordinates.
Any css styles added to dropMen will then shown on the menu.
One way to overcome this problem is to use drop directions and menu align as mentioned in the React-Bootstrap Docs.Changing the direction and the alignment of the dropdown menu was helpful for me to prevent the drop down menu extending the window.
Add this css to solve this issue:
.dropdown-menu {
min-width: auto !important;
}
#lang-nav-dropdown {
width: fit-content;
}
I am trying to build a MEGA MENU using jquery and css using the following code:
$(".sub-menu").find('a.amenu').hover(function(){
$(this).parent().find(".sub-menu-panel").show();
}
,function(){
$(this).parent().find(".sub-menu-panel").hide();
}
);
where the menu links has a class called "sub-menu" and the panel related to it has a class called "sub-menu-panel".
How to keep the related panel of a menu link visible if the mouse hover it ?
my problem is when i move the mouse over a panel to click any sub-link on it the panel it self disapeared because the mouse out event fired when i leave the main link.
Firstly - providing an example of what you're trying to explain would be advantageous to getting a working response.
Secondly - you shouldn't need any javascript/jQuery to show a submenu on hover - a simple :hover mechanic in CSS should give you the effect you want.
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.
This is probably a simple problem I'm having, but for the life of me, I can't seem to figure it out. If any of you could help me with this, I would be much obliged.
I'm using JQuery to make a menu appear when a user hovers over a certain div. The menu will be displayed on the top left of the div.
I got this to work, but when I try to click on a menu item of the div that appeared, the div disappears again, because the mouse is technically not over the div, but over the menu.
In the example below, "#blockMenu" is the menu that dynamically appears. I fade the current div ($this)) out a bit, to emphasize the menu as well.
I use the following code to make this happen:
$("div.editable").hover(function () {
$(this).fadeTo(500, 0.25);
$('#Menu').css("position", "absolute");
$("#Menu").css("top", $(this).offset().top);
$("#Menu").css("left", $(this).offset().left);
$("#Menu").css("zIndex", "10000");
$('#Menu').show();
}, function (e) { // on mouseout
$(this).fadeTo(500, 1);
$("#Menu").hide();
});
I want the menu to disappear when the cursor leaves the div, while the div remains faded out when the cursor is on the menu. When the cursor leaves the menu AND the div at the same time, the div should fade back in and the menu should disappear.
Does anyone have an idea of how I could edit my code to make this work correctly?
Thank you very much for any help you can give me.
Just use the :hover pseudo class, that's likely to help the situation. You'll lose animation effects, but it could sure make things easier, and take javascript out of the picture
Add a hover function for the menu and set some state when the mouse is hovering over the menu and only take the menu down if the mouse is not over the div AND not over the menu.