addressalign-toparrow-leftarrow-leftarrow-right-10x10arrow-rightbackbellblockcalendarcameraccwcheckchevron-downchevron-leftchevron-rightchevron-small-downchevron-small-leftchevron-small-rightchevron-small-upchevron-upcircle-with-checkcircle-with-crosscircle-with-pluscontroller-playcredit-cardcrossdots-three-verticaleditemptyheartexporteye-with-lineeyefacebookfolderfullheartglobe--smallglobegmailgooglegroupshelp-with-circleimageimagesinstagramFill 1languagelaunch-new-window--smalllight-bulblinklocation-pinlockm-swarmSearchmailmediummessagesminusmobilemoremuplabelShape 3 + Rectangle 1ShapeoutlookpersonJoin Group on CardStartprice-ribbonprintShapeShapeShapeShapeImported LayersImported LayersImported Layersshieldstartickettrashtriangle-downtriangle-uptwitteruserwarningyahooyoutube

Re: [webdesign-429] Responsive jQuery menu question

From: Andrejs L.
Sent on: Wednesday, July 6, 2016 4:18 PM
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

21 Designs Australia Logo
Andrejs Liepinieks
Owner, Developer, Designer
Hosting, Design, Development & Marketing
Maintenance, Repairs, Security & Auditing
a: PO Box 7333 Loganholme Q 4129
t: (07)[masked]
m: [masked]
w: 21designs.com.au
w: websitemanagementservices.com.au

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

 

email-signature

 

 





--
Please Note: If you hit "REPLY", your message will be sent to everyone on this mailing list ([address removed])
This message was sent by Meetup on behalf of Gal Baras from The Brisbane Web Design Meetup Group.
To report this message or block the sender, please click here
Set my mailing list to email me As they are sent | In one daily email | Don't send me mailing list messages

Meetup, POB 4668 #37895 NY NY USA 10163 | [address removed]




--
Please Note: If you hit "REPLY", your message will be sent to everyone on this mailing list ([address removed])
This message was sent by Meetup on behalf of Theticus from The Brisbane Web Design Meetup Group.
To report this message or block the sender, please click here
Set my mailing list to email me As they are sent | In one daily email | Don't send me mailing list messages

Meetup, POB 4668 #37895 NY NY USA 10163 | [address removed]

People in this
group are also in:

Sign up

Meetup members, Log in

By clicking "Sign up" or "Sign up using Facebook", you confirm that you accept our Terms of Service & Privacy Policy