Sidebar menu drop down

Hi,

Sorry for the delay. Did you remove the sub categories in the widget menu?

You can try the modification that @mike provided in the previous thread.

// https://kriesi.at/support/topic/tweaks-2/#post-1173326

If it doesn’t work, you can try this example.

// https://www.w3schools.com/css/css_dropdowns.asp

The modification will initially hide the child categories and only display them when the parent category is hovered.

Best regards,
Ismael

Hi,
Sorry for the late reply, I took a look at your widget navigation and adjusted the function to work for your site, but the only thing is your parent menu items need to not link to a page, just “#” because they can’t toggle and be a link at the same time.
Once you remove the links from the parent items, add this code to the end of your functions.php file in Appearance > Editor:

function widget_menu_dropdown(){
  ?>
  <script>
(function($){
   $(document).ready(function(){ 
   		$('#menu-sidebar-oferta-1 > li.menu-item-has-children').find('ul').hide();
        $('#menu-sidebar-oferta-1 > li.menu-item-has-children').click(function () {
            $('#menu-sidebar-oferta-1 > li.menu-item-has-children').not(this).find('ul').hide();  
            $(this).find('ul').toggle();  
        });  
     });  
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'widget_menu_dropdown');

I also tried the function using hover to toggle and it seems to work well allowing you to also use the parent links. Please give this a try in your functions.php, but don’t try both at the same time.

function widget_menu_dropdown_two(){
  ?>
  <script>
(function($){
   $(document).ready(function(){ 
   		$('#menu-sidebar-oferta-1 > li.menu-item-has-children').find('ul').hide();
        $('#menu-sidebar-oferta-1 > li.menu-item-has-children').hover(function () {
            $('#menu-sidebar-oferta-1 > li.menu-item-has-children').not(this).find('ul').hide();  
            $(this).find('ul').toggle();  
        });  
     });  
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'widget_menu_dropdown_two');

Best regards,
Mike

Hi,
Sorry, you can’t add a click event to the parent item because it is already a link. But if you add this css to your Quick CSS the menu will be expanded when on the parent or sub pages.

li.current_page_item.menu-item-has-children > ul.sub-menu,li.current_page_ancestor.menu-item-has-children > ul.sub-menu {
	display: block !important; 
}

Best regards,
Mike

Hi,
To do this you will have to remove the links from the parent items, right now if you click a parent you go to a URL, you can’t have a second click event because the browser doesn’t know if you want to open the menu or go to the URL.
I can override the first click event, but you will not be able to use those parent links.

Best regards,
Mike

Hi,
So, you want no hover effect?
Please point to an example of this behavior on our demo, or any of these demos.

Best regards,
Mike

Hi,
Thanks for the link, this sidebar menu doesn’t show the behavior you described, the sub-menu items don’t dropdown or show on click. When you click the parent item you go to the page, then the sub-menu is shown, but it doesn’t toggle when clicked.
For this behavior, please remove the function above and only use this css:

li.current_page_item.menu-item-has-children > ul.sub-menu,li.current_page_ancestor.menu-item-has-children > ul.sub-menu {
	display: block !important; 
}

Best regards,
Mike

Hi,
Sorry, the css was missing a rule, please try this css instead:

li.menu-item-has-children > ul.sub-menu,li.menu-item-has-children > ul.sub-menu {
	display: none !important; 
}
li.current_page_item.menu-item-has-children > ul.sub-menu,li.current_page_ancestor.menu-item-has-children > ul.sub-menu {
	display: block !important; 
}

Then clear your browser cache and check.

Best regards,
Mike

Hi,
Sorry, please try this css instead:

#nav_menu-2 li.menu-item-has-children > ul.sub-menu,#nav_menu-2 li.menu-item-has-children > ul.sub-menu {
	display: none !important; 
}
#nav_menu-2 li.current_page_item.menu-item-has-children > ul.sub-menu,#nav_menu-2 li.current_page_ancestor.menu-item-has-children > ul.sub-menu {
	display: block !important; 
}

Best regards,
Mike