Link to home
Start Free TrialLog in
Avatar of Heather Ritchey
Heather RitcheyFlag for United States of America

asked on

Collapsing mobile menu

I found code that makes the mobile menu collapse the submenus until you click the parent of it that has a + sign after it. http://dev1.wpmate.net/
(You can see the mobile menu there just by making your browser skinny.)

We'd like for the parent link to actually link to it's page though and only clicking on the + make the sub-menu show. I can see in the code why it doesn't work that way, but I am very weak in jQuery and can't understand how to adjust the code so it works the way we want.

Does it look like the below code could be edited to work the right way?

<style>
.et_mobile_menu .menu-item-has-children > a { background-color: transparent; }
#main-header .et_mobile_menu li ul.sub-menu.hide { display: none !important; visibility: hidden !important;  transition: all 1.5s ease-in-out;}
#main-header .et_mobile_menu li ul.sub-menu.visible { display: block !important; visibility: visible !important; }
.et_mobile_menu .menu-item-has-children > a:after { content: '+'; position: absolute; right: 20px; font-size: 22px; }
</style>
<script>
(function($) {
     
    function setup_collapsible_submenus() {
        var $menu = $('#mobile_menu'),
            top_level_link = '.menu-item-has-children > a';
        $menu.find('a').each(function() {
            $(this).off('click');
             
            if ( $(this).is(top_level_link) ) {
                $(this).attr('href', '#');
                $(this).next('.sub-menu').addClass('hide');
            }
             
            if ( ! $(this).siblings('.sub-menu').length ) {
                $(this).on('click', function(event) {
                    $(this).parents('.mobile_nav').trigger('click');
                });
            } else {
                $(this).on('click', function(event) {
                    event.preventDefault();
                    $(this).next('.sub-menu').toggleClass('visible');
                });
            }
        });
    }
     
    $(window).load(function() {
        setTimeout(function() {
            setup_collapsible_submenus();
        }, 700);
    });
})(jQuery);
</script>

Open in new window

Avatar of Kim Walker
Kim Walker
Flag of United States of America image

I'm afraid this would be difficult as is. Since the + is added dynamically by CSS, it is not part of the DOM and can't be accessed by jQuery. In order to do what you are describing, you would need to add the + to the page manually and have two separate links, one to go to the page and another around the + to expand the sub-menu. Then the jQuery script would need to target the link around the + rather than the link around the page description.
Avatar of Heather Ritchey

ASKER

Maybe also not possible, but would there be a way to have the jquery append something like a span with the plus sign next to the top level link so that it could be targeted for the click to show the sub-menu?
Again, jQuery is my weakest language so I might just be reaching in the dark.

The theme we'll be using this in is Divi by Elegant Themes. We use a child for it. But the menu is worked with by functions in the parent Divi so we obviously don't want to edit in it and it be overwritten on upgrades.

We'd even be ok with creating a second menu that could show for mobile view so that non-clickable link could just be different text for the sub-menu parent, but again, would need to figure out how to edit into the child theme for it to work.
I assume the reason for the delay is that you're waiting for Wordpress to finish and then modifying its result. At any rate, what you're proposing would be to totally restructure the code you have posted. Not only would you need jQuery to insert the + as a separate button, you would need to prevent CSS from adding another + and re-target the click event that expands the menu.

Are you looking for someone to help you or for someone to do it for you? If you want someone to do it for you, I suggest you look into the Gigs section of EE.
I'd prefer just having help because I do learn a bit more each time someone helps me out with fixing or editing anything in jQuery. But I have to get approval to be able to hire someone for help. I'm sure he wouldn't mind if I can at least tell him for sure that it can be done.
ASKER CERTIFIED SOLUTION
Avatar of Kim Walker
Kim Walker
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
You still answered my questions though Kim. Thanks for your help. The code I posted is free to use from the original author, so it may still be useful for someone else who doesn't mind the parent link non-clickable.