wordpress plugin to add images to main navigation menu

Question

Please advise about wordpress plugin to add multi states images to the main navigation menu

I need to be able to add images on top of text for normal, hover and current state.

Thanks

Answer 1

You may want to look into the walker class. I've used it to add down arrows to WordPress created menus and added my own css div's and sections. Perhaps you could add a box using the Walker Menu, then set its background to a certain image on :hover etc...

class My_Walker extends Walker_Nav_Menu
{
function start_el(&$output, $item, $depth, $args) {
    global $wp_query;
    $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

    $class_names = $value = '';

    $classes = empty( $item->classes ) ? array() : (array) $item->classes;

    $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
    $class_names = ' class="' . esc_attr( $class_names ) . '"';

    $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

    $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        ) .'"' : '';

    $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 .= '<br /><div class="sub">' . $item->description . '</div>';
    $item_output .= '</a>';
    $item_output .= $args->after;

    $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}

If you see towards the end, I added a class 'sub' so I could add my own data. It's kind of confusing at first, but a very powerful class.

http://codex.wordpress.org/Function_Reference/Walker_Class

Answer 2

If doesn't have to be free, I believe UberMenu - WordPress Mega Menu Plugin does what you need.

Features:

• Integrates out of the box with the WordPress 3 Menu System

• Responsive CSS & jQuery menus

• 20+ presets - or use the style generator

• Supports images and descriptions for menu items

• Add widgets, shortcodes & more

It's very well maintained, responsive, has a 5 star buyer rating, and is a featured plugin on CodeCanyon. It costs around $18.

Checkout the screenshots, or the live preview.