Sidr Menu Mobile Submenus

If you’re like me, and have menus with submenus with submenus, the built in menu leaves much to be desired on this theme. Specifically, it lists every item all together on the mobile submenu, which can make navigation very unwieldy if you have menus more than two levels deep.

I created a little bit of javascript that fixes this. It’s pretty shoddy, but it works at least for my website. I’ve duplicated the theme, so I’ve just inserted this bit of javascript in my footer. It would be better to save it as a js file and enqueue it like you’re supposed to according to the codex.

One issue I ran across debugging this was that it would work if you loaded the website and then resized it, but loading it in a mobile size either on the desktop or on a phone would eliminate the arrows (no span elements in the links for items with children). The javascript adds those back in itself if it detects they’ve been removed.

Hope this helps someone.

jQuery( window ).load(function() {
			if(jQuery("#sidr-main").length !== 0) {
    				jQuery(".sidr-class-sub-menu").each(function() {
					jQuery(this).hide();
				});
				jQuery(".sidr-class-menu-item-has-children > a").each(function() {
					if(jQuery(this).children().length == 0) {
						jQuery(this).append('<span class="sidr-class-menu_arrow"><i class="fa fa-angle-right"></i></span>');
					}
				});
    				jQuery( ".fa-angle-down" ).each(function() {
    					jQuery(this).removeClass("fa-angle-down");
					jQuery(this).addClass("fa-angle-right");
    				});
				jQuery(".sidr-class-sub-menu").hide();
				jQuery(".sidr-class-menu_arrow").toggle(function() {
					var id1 = jQuery(this).parent().parent().attr("id");
					jQuery(this).children().removeClass("fa-angle-right");
					jQuery(this).children().addClass("fa-angle-down");
	    			    	jQuery("#" + id1 + " ul.sidr-class-sub-menu").show();
	    			    	jQuery("#" + id1 + " .sidr-class-menu-item-has-children ul").hide();
      				}, function() {
       				 	var id1= jQuery( this ).parent().parent().attr("id");
	        			jQuery("#" + id1 + " ul.sidr-class-sub-menu").hide();
	        			jQuery(this).children().removeClass("fa-angle-down");
					jQuery(this).children().addClass("fa-angle-right");
        			});
			}
});