Altering html structure and creating custom menus

Given the amount of customization you’re looking to make, your best bet may be to integrate a custom Walker function. From the Codex:

For deeper conditional classes, you’ll need to use a custom walker function (created in the 'walker' => new Your_Walker_Function argument).

The easiest way to build a new walker function is to copy the default class (Walker_Nav_Menu) from \wp-includes\nav-menu-template.php and simply customize what you need.

Using a custom Walker gives you a wide degree of flexibility and control that the wp_nav_menu() function just doesn’t allow for in and of itself. It enables you to not just reformat the output of menu items, but now you’re able to run all manner of code during the menu building process.

In a nutshell, what you’d do is:

1. Copy/Paste the code for the Walker_Nav_Menu class from into your theme’s functions.php file;
2. Edit the top line to something like class My_HTML5Blank_Walker_Nav_Menu extends Walker_Nav_Menu;
3. Insert all the new code for building image tag references in the start_el public function;
4. Modify the last line of your wp_nav_menu code to point to your new custom Walker, i.e. 'walker' => 'My_HTML5Blank_Walker_Nav_Menu'.

Now, the way you decide to integrate those images is entirely up to you… but check this out: if the menu items are posts/pages/categories, etc. (i.e., not custom/manual links), then using the custom Walker means you can pull in each post/page/term object’s metadata and use that to alter the menu output. (In other words, you can set a featured image for a post, then using a custom Walker you can grab the metadata for that post and embed its associated featured image thumbnail!)

Anyway, hopefully I gave you enough to get started here. Let me know if I missed anything (or if there’s something confusing here that you’d like me to clear up).