Return to previous page

Parent menu-items should just open submenu Section, not cat-page

This topic has 3 replies, 2 voices, and was last updated 8 years, 2 months ago ago by Eva Kemp

pushl

Participant

September 10, 2016 at 21:17
Hi,

we’re trying to change the mobile Menu to work like in this example: https://www.jtl-software.de/

So we basically don’t want the parent Menu-items to open the categories page on click but just show the Sub-Menu.

Reason: We’ve been testing the Menu on several mobile devices and where (sometimes) barely able to click the little arrow on the right, also most users are not used to this kind of design.

——————————

What I’ve tried so far is just removing the href-attribute via jQuery and insert the open-child span-tag again. And then, later just show/hide the Sub-Menu.
```
if ($(window).width() < 960) {
$('.menu-parent-item').html($('.menu-parent-item a:first').removeAttr('href'));
$( '<span class="open-child">(open)</span>' ).insertBefore( $( '.menu-parent-item a:first' ));
// show sub-menu 
}
else {
//nothing
}
```
Well.. that’s not working, because the whole child-tags just dissapeared when I tried.

———————————————————————-

What is the right/easiest way to achieve the desired result?

If you can’t provide an easy solution, can you tell me the files where I can find all the code for the mobile Menu (javascript, php, html whatsoever)?

Thank you for your help. You did a great job on this template. 🙂

Kind regards,
Chris

P.S. Excuse my English, this image may help you to understand what I need: image
#139366 Copied Theme version: latest WooCommerce version: latest
2 Answers
pushl

Participant

September 11, 2016 at 12:06
Well, we needed a quick solution so I couldn’t wait any longer.

If anyone needs to do the same here’s my quick and dirty solution:

Open: /themes/royal/js/etheme.js
Look out for:
```
   // **********************************************************************//
    // ! Mobile navigation
    // **********************************************************************//
```
Change it to this:
```
    var navList = $('.mobile-nav .menu');
    var etOpener = '<span class="open-child">(open)</span>';
    navList.addClass('et-mobile-menu');

    navList.find('li:has(ul)',this).each(function() {
        $(this).prepend(etOpener);
        $(this).find('a:first').removeAttr('href');
        $(this).find('a:first').addClass('mmenuclickable');
    });  

    navList.find('.mmenuclickable').click(function(){
        if ($(this).parent().hasClass('over')) {
            $(this).parent().removeClass('over').find('> ul').slideUp(200);
        }else{
            $(this).parent().parent().find('> li.over').removeClass('over').find('> ul').slideUp(200);
            $(this).parent().addClass('over').find('> ul').slideDown(200);
        }

    });

    navList.find('.open-child').click(function(){
        if ($(this).parent().hasClass('over')) {
            $(this).parent().removeClass('over').find('> ul').slideUp(200);
        }else{
            $(this).parent().parent().find('> li.over').removeClass('over').find('> ul').slideUp(200);
            $(this).parent().addClass('over').find('> ul').slideDown(200);
        }
    });
```
Seems to work, yet I’m still disappointed that noone has had that question before. 😉
#139376 Copied
Eva Kemp

Support staff

September 12, 2016 at 08:19

Hello,

We’re glad you’ve found the solution.

Have a nice day!
Regards,
Eva Kemp.

#139399 Copied
Tagged: cat-page, open, parent menu-items, submenu, templates, woocommerce, wordpress
Viewing 3 results - 1 through 3 (of 3 total)

The issue related to '‘Parent menu-items should just open submenu Section, not cat-page’' has been successfully resolved, and the topic is now closed for further responses

Parent menu-items should just open submenu Section, not cat-page

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection