I have the following menu in Wordpress: https://jsfiddle.net/L3y2rno8/ (renderd HTML)

The menu is using a custom walker in my theme functions.php:

function wp_nav_menu_attributes_filter($var) {
    return is_array($var) ? array_intersect($var, array('current-menu-item')) : '';
add_filter('nav_menu_css_class', 'wp_nav_menu_attributes_filter', 100, 1);
add_filter('nav_menu_item_id', 'wp_nav_menu_attributes_filter', 100, 1);
add_filter('page_css_class', 'wp_nav_menu_attributes_filter', 100, 1);

class Custom_Walker_Nav_Menu extends Walker_Nav_Menu { function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) { $output .= " url)."> ".esc_attr($item->title).""; }

function end_el( &$output, $item, $depth = 0, $args = array() ) { $output .= "</li>\n"; } }

The menu is now just a lit of all links because I have not added any CSS to it. How can I style the menu with CSS only so that if I click on "Group #" or "Sub Group" the list expands and shows the content below (sort of like an accordion menu)?

  • This doesn't seem specific to WordPress. If you can achieve your desired markup already, they presentation bits like animating it are probably better asked about at more generic site of the network like Stack Overflow. – Rarst Apr 21 '16 at 15:36
  • I tried asking on stack overflow, but I was just advised to use an article that did not explain how to achieve this in wordpress. – Arete Apr 21 '16 at 15:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.