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: Gal B.
Sent on: Wednesday, July 6, 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

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: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
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

 

 

 





--
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]

 

This message was sent by Meetup on behalf of Andrejs Liepinieks 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 Andrejs Liepinieks 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