Hey Andy,

 

Excellent idea.  I've implemented something a bit simpler, but it works:

 

            $('.responsive-menu .menu-item.menu-item-has-children a').click(function(event){

                        window.location.href = $(this).attr('href');

            });

 

I see your earlier point about this being poor UX.  Looking at the desktop menu, how would you create good UX out of it for mobiles?  I'd love to see a similar example.

 

Thanks again,

Gal

 

 

From: [address removed] [mailto:[address removed]] On Behalf Of Andrejs Liepinieks
Sent: Wednesday, 6 July[masked]:16 PM

To: [address removed]
Subject: Re: [webdesign-429] Responsive jQuery menu question

 

Hey Gal,

 

Back in the office now (finally!).

 

My bad - I only tested it on the menu while it was open, not while closed.

 

This fixes it, and as I can't "undo" the changes you've already made to the script, I can't tell you if there's a better way, but I'm sure you could streamline this into something much more elegant given the time...

 

jQuery('.responsive-menu .menu-item.menu-item-has-children, .responsive-menu .menu-item.menu-item-has-children > a > span').click(function(event){ if (event.target == this) { window.location = jQuery(this).parent().attr('href'); } });

 

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 18:53, Gal Baras <[address removed]> wrote:

Hi Andy,

 

This didn't make a noticeable difference L

 

I've tried this:

 

$('.responsive-menu .menu-item.menu-item-has-children:before').click(function(event){

            if (event.target !== this) {

                        if( event.target.not('a') ) return;

            }

            $(this).parent().children().filter('.sub-menu:first').slideToggle(function(){

                        jQuery(this).parent().toggleClass('menu-open');

            });

});

 

It stops the open/close, but doesn't make the menu items navigate.

 

I think there may be other events at play here besides "click", or maybe other "click" handlers, because I can see the sub-menu open and then close.  I'm just not sure how to trace this in the JS code, so I was hoping someone with experience can show me the way.

 

Thanks again,

Gal

 

 

From: [address removed] [mailto:[address removed]] On Behalf Of Andrejs Liepinieks
Sent: Wednesday, 6 July[masked]:41 PM

To: [address removed]
Subject: Re: [webdesign-429] Responsive jQuery menu question

 

Oh dear, helps if I read your question properly!

 

I see what you mean now, however I'd suggest there's an argument that this provides a poor UX?

 

While you are aware of the difference between the arrow and the text, others may not? I'd argue that a sub-menu for the parent element is a better alternative, at least for those who are not as tech-savvy, however I have argued this case before with some resistance : )

 

While I can't look now, my recollection is that the click event on the anchor element never fires, or is stopped at some point (e.g. event.preventDefault).

 

In fact I seem to recall there was something along the lines of the following...

 

if( event.target !== this ) return;

 

That tells me you need to alter that, perhaps something like so...

 

$('.responsive-menu .menu-item.menu-item-has-children').click(function(event){

            if (event.target !== this) {

                        if( event.target.not('a') ) return;

            }

            $(this).children().filter('.sub-menu:first').slideToggle(function(){

                        jQuery(this).parent().toggleClass('menu-open');

            });

});

 

Thoughts?

 

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 17:25, Gal Baras <[address removed]> wrote:

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

 

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

 

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

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