From: | Gal B. |
Sent on: | Wednesday, 6 July 2016, 5:24 pm |
Hi guys,
Thanks to everyone who responded.
I'm testing on Android phones, including one good HTC model. In both cases, I'm using Chrome. In both cases, there's still a problem,
I've just tested on Internet Explorer and it exhibits the same behaviour. Strangely, when IE and Chrome aren't emulating a touch device, I see a flicker of the sub-menus on hover.
Setting the :before element to 100% width is the opposite of what I want. The way I see it, the CSS is right, but the JS is not.
I hope this helps generate more ideas.
Thanks again,
Gal
From: [address removed] [mailto:[address removed]] On Behalf Of Andrejs Liepinieks
Sent: Wednesday, 6 July[masked]:26 PM
To: [address removed]
Subject: Re: [webdesign-429] Responsive jQuery menu question
In fact altering the jQuery doesn't look like the best solution, as you would need to add another check to prevent buggy behaviour.
I simply added width: 100%; to the class .genesis-nav-menu.responsive-menu .menu-item-has-children:before, which extends the element the entire width of the menu, allowing the listener to be triggered.
Cheers
Andy
Andrejs Liepinieks |
On 6 July 2016 at 16:22, Andrejs Liepinieks <[address removed]> wrote:
Hey Gal,
I think the problem is that when you click on the menu, the event that's firing is not the one that your script is listening out for.
jQuery('.responsive-menu .menu-item.menu-item-has-children').on( 'click', function(event) {
if (event.target !== this)
return;
jQuery(this).children().filter('.sub-menu:first').slideToggle(function(){
jQuery(this).parent().toggleClass('menu-open');
});
});
This code is listening for the click event on the LI, not the anchor, and the reason the menu works when you click on the arrow is because the arrow has CSS that's positioning it absolutely, and then using the z-index to lay it over the top of the anchor.
So I guess you could add the anchor as another element that jQuery is listening out for, or simply alter the CSS of the arrow so that it fills the tap target?
Cheers
Andy
Andrejs Liepinieks |
On 6 July 2016 at 16:06, Theticus <[address removed]> wrote:
On my phone it does exactly as u wanted. When click on arrow, it opens up sub menu. And when click on text, selected menu page opens.
Hope this helps.
On 6 Jul[masked]:46, Gal Baras <[address removed]> wrote:
Hi guys,
If you examine https://www.behappyinlife.com/ in "mobile mode", you'll see that level-2 and level-2 elements with sub-menus cannot be used to navigate when their sub-menus are hidden/closed, only when they are visible/open. In fact, clicking them creates no visible changes.
What I want is for the menu to open and close when the arrows are clicked, and for navigation to occur when the link text is clicked. Any ideas on how to make this happen will be wholeheartedly appreciated.
Superfish is involved and another script, called responsive-menu.js, both of which are included separately on the page for your convenience (the custom script is also un-minified).
Best regards,
Gal