Collapse sub-menu items on mobile

Forums Forums Foody Pro Collapse sub-menu items on mobile

This topic contains 8 replies, has 3 voices, and was last updated by  shantichu87 3 weeks, 4 days ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #119

    shantichu87
    Participant

    When I’m on mobile and press the Menu button in the navbar, all menu items as well as their sub-menu items are fully expanded. Is there an easy way to make it so sub-menu items are collapsed until the user presses the appropriate primary menu item? This is how it works on desktop, and it would be a good user experience to behave the same on mobile.

    Please let me know if any clarification is needed. Thank you

    #122

    pankogut
    Moderator

    Hi there,
    thank you for your suggestion.

    I’ll let you know as soon as possible about that.

    Cheers
    Pasquale

    #152

    shantichu87
    Participant

    Hi Pasquale, could you tell me which file has the logic for the drop down menu effect for desktop screens? And also which file has the logic for the mobile version of the navbar?

    #154

    pankogut
    Moderator

    Sure, the code is in the JS folder, the name is navigation.js

    #155

    shantichu87
    Participant

    Thanks!

    #157

    pankogut
    Moderator

    You’re welcome 😉

    #160

    shantichu87
    Participant

    I finally implemented functionality for this feature. If you or anyone else wishes to use it, feel free to go off my approach.

    In navigation.js, I added the following lines:

    var $j = jQuery.noConflict();
    
    // Find all menus with children and append font awesome down angle to text
    var $menusWithChildren = $j('.menu-item-has-children');
    $menusWithChildren.children('a').append(' <span class="fa fa-angle-down"></span>');
    
    // Check screen width so this only runs in mobile view
    var screenWidth = $j(window).width();
    if (screenWidth <= 1023) {
    		
      $j($menusWithChildren).click(function() {
        var childMenu = $j(this).children('.sub-menu');
    			
        // Slide child menu down or up smoothly based on visibility of element
        if (childMenu.is(':hidden')){
           childMenu.delay(20).slideDown(200);
           this.setAttribute('aria-expanded', 'true');
        } else {
           childMenu.delay(20).slideUp(200);
           this.setAttribute('aria-expanded', 'false');
        }
      }).click($menusWithChildren, function(e) {
          e.stopPropagation();
      });
    }

    Also, in the else clause of the preexisting button.click function, I added the following line to hide all navbar submenus upon opening the main mobile drop down:
    $j('.menu-primary-container .sub-menu').hide();

    I’m sure it can be optimized, but I thought this was a pretty good solution.

    Cheers

    #161

    Pasquale
    Keymaster

    Thank you so much for sharing your solution. 😉

    #163

    shantichu87
    Participant

    You’re very welcome!

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.