Expand subnav menu when pressing main nav menu

[Fernando Díaz Gascón]

Hello,

When I hover the main navigation menu, the sub-navigation appear. In mobile case, hover has no sense, so I have to press the symbol that appear at the right to display submenus (lets call this symbol “arrow”).
Due my main menu elements that have submenus are not linking to any page, I put ‘#’ as link. But in mobile case, when you press on them, nothing happens and it looks like an error.
What I would like is that when you press in the main menu elements with submenu, the submenu displays. In other words, that the main menu element works as the arrow. Do you know some way to do this?

Thanks a lot.

[Franz]

We are also in urgent need of this feature. On mobiles the submenue should be opened not just by pressing the small arrow but also when pressing somewhere in the same line. I suppose the majority of users think the submenue is not working and have problems with the navigation. This is a absolutely no-go.

Please fix it. Thx a lot!

P.S. We already tested your plugin “Generate Legacy Mobile Menu” however it’s not working with WP 4.4.2. (no function at all).

• This reply was modified 8 years, 1 month ago by Franz.

[Tom]

I just built this into the next version.

Basically, it will check to see if the URL is # or empty, and it will display the sub menu on click.

You can give it a try now by adding this into GP Hooks in the “wp_footer” hook:

<script>
    jQuery( document ).ready( function( $ ) {
        $( document ).on( 'click', '.main-nav .menu-item-has-children > a', function( e ) {
            // Get the clicked element
            var _this = $( this );
            var mobile = $( '.menu-toggle' );
            var slideout = $( '.slideout-navigation' );
            var url = _this.attr( 'href' );
            if ( '#' == url || '' == url ) {
                if ( mobile.is( ':visible' ) || 'visible' == slideout.css( 'visibility' ) ) {
                    e.preventDefault();
                    _this.closest( 'li' ).toggleClass( 'sfHover' );
                    _this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
                    _this.attr( 'aria-expanded', $( this ).attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
                    return false;
                }
            }
        });
    });
</script>

[Franz]

Hi Tom,

great it works! Just perfect…

Thx for your kind support

[Tom]

Perfect – you’ll be able to remove that code when you update to 1.3.28 🙂

[Fernando Díaz Gascón]

Hello,

I did not take time to test it. I tested and it does not work, I dont know if I am making something wrong.

I put the code in wp_footer (I tried checking and not checking “execute PHP”). I am testing in maipacific.com.mialias.net . The navigation link is called “Conoce” and it has got a # in the url. I tried also removing the # and it does not work.

To access to the web:
user: maipac482
pass: 34OnUnwQ

[Tom]

Ah, it won’t work in the slideout menu until I release this upcoming version of GP Premium.

Should be very soon now 🙂

[Fernando Díaz Gascón]

Hello,

I installed the new 1.3.28 GP version and I tested it with no good result. I tried in the mobile and . I have # in the main menu link. I have installed it in http://congruentia.es.mialias.net/

Also, I have seen that the slideout menu appeareance looks ugly (the icon to press to appear the submenu is glued to the right). Can be due to the version change?

Thanks in advance

To enter in the web:
user: congru203
pass: hq9tTxoW

[Tom]

Hi there,

The next version of GP Premium has this functionality in it for the slideout menu.

It also fixes the arrow issue.

Working on this update really hard all day today hoping to get it out tomorrow 🙂

[Emily]

Just ran into the same issue, have you had any luck getting the sub-menu in mobile to drop down by clicking the parent item?

Latest updates, and script didn’t work for me. Thanks!

[Tom]

If the URL of the parent item is #, then clicking the entire item will open the sub menu.

[itcwiz]

Hi Tom

I have this situation now in GP 2.0.2, I have parent item is #, but when clicking the entire item will NOT open the sub menu. Only if I click the small arrow in the right. Can you tell me what I should do? Is it a special configuration?

[Leo]

Can you link us to your site?

[itcwiz]

petra.it-couture.ch

[Tom]

Your menu items don’t have # as the URL – the URLs are just empty. Can you try adding a #?

[Author]

Posts