Support » Developing with WordPress » My Drop Down Menu is not working with the Walker Class

  • I have just integrated the Walker Class into my WordPress website, however I am unable to ‘trigger’ the drop down menu when I scroll or click on the parent menu title. The Carat is visible and the child URL/title is visible in the source code, yet not accessible across my website.

    Below is the code I placed within my walker.php file. I would be grateful is anyone is able to comment inside the code, detailing which areas are responsible for ‘triggering’ the drop down menu and showing the child links. This is the first time I am worked with the Walker Class, so my knowledge on how it works is relatively basic.

    <?php
        class Walker_Nav_Primary extends Walker_Nav_menu {
        
        	function start_lvl( &$output, $depth = 0, $args = array() ) { 
        		$indent = str_repeat("\t",$depth);
        		$submenu = ($depth > 0)? ' sub-menu' : '';
        		$output .= "\n$indent<ul class=\"dropdown-menu$submenu depth_$depth\">\n";
        	}
        		
        	function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ){     			
        		$indent = ($depth) ? str_repeat("\t",$depth) : '';
        			
        		$li_attributes = '';
        		$class_names = $value = '';
        			
        		$classes = empty( $item->classes ) ? array() : (array) $item->classes;
        			
        		$classes[] = ($args->walker->has_children) ? 'dropdown' : ''; 
        		$classes[] = ($item->current || $item->current_item_anchestor) ? 'active' : ''; 
        		$classes[] = 'menu-item-' . $item->ID;
        		if( $depth && $args->walker->has_children ){
        			$classes[] = 'dropdown-submenu';
        		}
        		$class_names = join(' ', apply_filters('nav_menu_css_class', array_filter( $classes ), $item, $args ) );
        		$class_names = ' class="' . esc_attr($class_names) . '" ';
        		
        		$id = apply_filters('nav_menu_item_id', 'menu_item-'.$item->ID, $item, $args);
        		$id = strlen( $id ) ? ' id="' . esc_attr( $id ). '"' : '';
        		
        		$output .= $indent . '<li' .$id . $value . $class_names . $li_attributes . '>';
        		
        		$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr($item->attr_title). '"' : '';
        		$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr($item->target). '"' : '';
        		$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr($item->xfn). '"' : '';
        		$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr($item->url). '"' : '';
        	
        		$attributes .= ( $args->walker->has_children ) ? ' class="dropdown-toggle" data-toggle="dropdown"' : '';
        		
        		$item_output = $args->before;
        		$item_output .= '<a' . $attributes . '>';
        		$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
         		$item_output .= ( $depth == 0 && $args->walker->has_children ) ? ' <b class="caret"></b></a>' : '</a>';
        		$item_output .= $args->after;
        		
        		$output .= apply_filters ( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );	
        	}
        }
        ?>

    Any help on this matter, would be greatly appreciated.

Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    This code only generates the menu content. In most modern themes, what triggers the display of sub menus is managed by the CSS psuedo class “:hover”. Use your browser’s developer tools to inspect various menu elements to see how and where the pseudo class is used.

    Prior to CSS3 and the introduction of :hover, this sort of thing was managed with javascript events like onmouseover. You still may encounter javascript driven menus in older themes.

Viewing 1 replies (of 1 total)
  • The topic ‘My Drop Down Menu is not working with the Walker Class’ is closed to new replies.