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.

I have a navigation menu but I need to be able to have background images with multiple states. There would be a background image for the multiple link states: normal, hover, and current. What is the best way to achieve what I need?

share|improve this question

2 Answers 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.

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

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

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.