Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

share|improve this question
add comment

2 Answers 2

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

share|improve this answer
add comment

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.

share|improve this answer
    
thanks alot..I just need to place the image above the text in the main menu not to the left side. any idea ? –  neo Jul 5 '12 at 17:16
    
If you buy the plugin, you get support from the developers. Or you can ask them directly before purchasing. Or follow Jonathan's raw answer. –  its_me Jul 6 '12 at 2:28
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.