I've got my Custom Nav Walker set up and it works fine with the main menu items, and displays them how I want.
However the same HTML is being applied to the sub-menu
elements which isn't what I want.
I'm aiming to get the sub-menu
to have the following styling:
<ul>
<li>
<h2 class="dropdown-text">Blog 1</h2>
</li>
<li>
<h2 class="dropdown-text">Blog 2</h2>
</li>
<li>
<h2 class="dropdown-text">Blog 3</h2>
</li>
<li>
<h2 class="dropdown-text">Blog 4</h2>
</li>
</ul>
Here is the HTML Structure for the full navigation
<div class="postit-surround">
<a href="#">
<div class="postit">
<div class="pin">
<img src="<?php echo get_template_directory_uri(); ?>/assets/drawing-pin.png">
</div>
<div class="postit-title">
<h1 class="nav-title-text">Products</h1>
</div>
<div class="corner-peel">
<img src="<?php echo get_template_directory_uri(); ?>/assets/corner-flick-cyan.png">
</div>
</div>
</a>
<div class="navigation-dropdown">
<ul>
<li>
<h2 class="dropdown-text">Products 1</h2>
</li>
<li>
<h2 class="dropdown-text">Products 2</h2>
</li>
<li>
<h2 class="dropdown-text">Products 3</h2>
</li>
<li>
<h2 class="dropdown-text">Products 4</h2>
</li>
<li>
<h2 class="dropdown-text">Products 5</h2>
</li>
</ul>
</div>
</div>
Here is the HTML call for the wp_nav_menu:
<div class="navigation-container">
<?php
$walker = new my_nav_walker;
wp_nav_menu( array( 'theme_location' => 'header-menu', 'menu' => 'ul', 'menu_class' => 'navigation', 'menu_id' => '', 'walker' => $walker ) );
?>
</div>
Here is the construct for my Custom Walker HTML: (NOTE: I'm really new to this, so this is going to be messy...)
class my_nav_walker extends Walker {
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$direct = get_template_directory_uri();
$item_output = $args->before;
$item_output .= '<div class="postit-surround">';
$item_output .= '<a'. $attributes .'>';
/** This filter is documented in wp-includes/post-template.php */
$item_output .= '<div class="postit">
<div class="pin">';
$item_output .= '<img src="' . $direct . '/assets/drawing-pin.png">
</div>
<div class="postit-title">
<h1 class="nav-title-text">';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= '</h1>
</div>
<div class="corner-peel">
<img src="' . $direct . '/assets/corner-flick-green.png">
</div>
</div>';
$item_output .= '</a>';
$item_output .= '</div>';
$item_output .= $args->after;
}
} // Walker_Nav_Menu
Here's the CSS if needed:
I'm not sure if I'm doing the construct right to get the separate styling that I want.
What would you advise?
Are there any alternatives?
Constructive Criticism on the code? (Don't be too harsh! :P)
EDIT -----:
I've done some more research into understanding the php code, and I now realise where the defining of the start and end of the sub-menu starts (With start_lvl and end_lvl), but I still don't understand how to separate what code goes to the Parent navigation panes, and which goes to their respective sub-menus.
This is what I'm after with the display of the naviagtion: http://jsfiddle.net/TPD5L/