ThemeShaper Forums » Thematic

[closed]

Thematic menus - wrapping the <li> in the <a>

(3 posts)
  • Started 1 year ago by colfelt
  • Latest reply from colfelt
  • This topic is resolved
  1. colfelt
    Member

    I read through ALL 5 pages of posts in Helga's epic Thematic Menus Demystified topic and the other topics I could find. But I *think* I have a new challenge for this forum.

    Is there a "clever" way to flip the order of the li and a tags output in wp_nav_menu? I know I could remove thematic_access and smash in my own hand-rolled menu in it's place. But that seems like a clumsy solution.

    Why do I want to do this? Well, I've re-oriented my menu so it's vertical. And I have created nice backgrounds on hover with CSS, so the list items are a bit like buttons. But, you still have to click on the actual word in the menu list item (which is what the anchor tag wraps) and you can't click the rest of the block list item that is highlighted on hover (because the a doesn't wrap the li). In short, it's a usability problem when something highlights that you can't click.

    Does anybody know how I would alter the code (via my own functions.php) that generates wp_nav_menu (it's in includes/nav-menu-template - function start_el - line 67)? to switch these tags around?

    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;
    		$classes[] = 'menu-item-' . $item->ID;
    
    		$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
    		$class_names = ' class="' . esc_attr( $class_names ) . '"';
    
    		$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
    		$id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';
    
    		$output .= $indent . '<li' . $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 .= '</a>';
    		$item_output .= $args->after;
    
    		$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    	}
    
    	/**
    	 * @see Walker::end_el()
    	 * @since 3.0.0
    	 *
    	 * @param string $output Passed by reference. Used to append additional content.
    	 * @param object $item Page data object. Not used.
    	 * @param int $depth Depth of page. Not Used.
    	 */
    	function end_el(&$output, $item, $depth) {
    		$output .= "</li>\n";
    	}
    }

    I'm not confident that I can create something that will work...

    Posted 1 year ago #
  2. do you have a link to the styling you're using / trying to achieve? i think it is a mistake to invert the markup... you're probably better off wrapping the text in an extra span so
    <li><a><span> which should also be easier to create via a Walker.

    but maybe you just need to put display: block on the A element and then add your padding to that.

    Posted 1 year ago #
  3. colfelt
    Member

    It's all on my local server right now. Nevermind, your suggestion was WAY better. As usual, I was looking for a complicated way to solve a simple problem.

    Displaying the A element as a block and giving it a width attribute is all that was required.

    Thanks again HtV!

    Posted 1 year ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.