0

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?

3

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

0

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.

2
  • 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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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