Wordpress nav menu -- adding conditional span - php

Question

Does anyone have a working example of a Wordpress menu outputted manually? The one on the Codex didn't seem to work, though my menu_name slug of "Footer" can't be that complicated..? I need to add offscreen spans within external menu links for accessibility purposes. I already have CSS classes; what I need is specific markup added via the functions.php file.
The basic code I'm looking for (see list items w/ 'external' class. Hrefs changed to # for code brevity, they link offsite in real life):
<ul id="menu-footer" class="menu">
<li class="menu-item">
About Us
</li>
<li class="external menu-item">
<a title="Link opens in a new window." target="_blank" href="#">Terms & Conditions <span class="offscreen">Opens in a new window</span></a>
</li>
<li class="menu-item">
Comments Policy
</li>
<li class="external menu-item">
<a title="Link opens in a new window." target="_blank" href="#">Privacy Statement<span class="offscreen">Opens in a new window</span></a>
</li>
<li class="menu-item">
Contact Us
</li>
</ul>

Answer 1

A custom "walker" class?
http://www.kriesi.at/archives/improve-your-wordpress-navigation-menu-output

Answer 2

Option 1:
Assuming you've created your menu by using Appearance -> Menus , you can try the following.
Navigate to Appearance -> Menus
Click the "Screen Options" (top right) of the screen, make sure "CSS Classes" is selected.
Once you've done the above steps, each of the menu items will now have a "CSS Classses" textbox showing where you can on an individual basis assign CSS Classes (have a look at the screen grab).
Option 2:
You could also try http://codex.wordpress.org/Function_Reference/wp_nav_menu#Adding_Conditional_Classes_to_Menu_Items
<?php
add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
function special_nav_class($classes, $item){
if(is_single() && $item->title == "Blog"){ //Notice you can change the conditional from is_single() and $item->title
$classes[] = "special-class";
}
return $classes;
}
?>
Option 3:
Provided the above 2 options don't work you have the 3rd option of using jQuery.
HTH

Answer 3

Answer: the nav menu has to be registered & assigned to the theme for the Codex example to work. DUH!
in functions.php:
// default register any navigation menus
register_nav_menus(
array(
'footer' => 'Footer Menu',
'links' => 'Links Menu'
)
);
Assign menu(s) to your theme:
Back in functions.php:
function accessibleAnchors($menu_name, $link_after = NULL){
if ( ( $locations = get_nav_menu_locations() ) && isset( $locations[ $menu_name ] ) ) {
$menu = wp_get_nav_menu_object( $locations[ $menu_name ] );
$menu_items = wp_get_nav_menu_items($menu->term_id);
$menu_list = '<ul id="menu-' . $menu_name . '" class="menu">';
foreach ( (array) $menu_items as $key => $menu_item ) {
// uncomment next line to see all array values
// print_r($menu_item);
$linkText = $menu_item->title;
$url = $menu_item->url;
$target = $menu_item->target;
$titleAttr = $menu_item->attr_title;
// hard-coding the first & only CSS class here, you could loop through others
$cssClass = $menu_item->classes[0];
if($target == '_blank'):
$titleAttr = " title=\"$titleAttr\"";
$span = "<span class=\"offscreen\"> Opens in a new window</span>";
else:
$span = "";
endif;
$menu_list .= '<li class="menu-item '.$cssClass.'"><a href="' . $url . '"'.$titleAttr. '>' . $linkText . $span . $link_after .'</a></li>';
}
$menu_list .= '</ul>';
}
return $menu_list;
}
Now call the function in your template:
<?php echo accessibleAnchors('footer'); ?>
Boom.

Answer 4

You'll have to start in wp-includes/nav-menu-template.php to Copy and paste the function to your theme's functions.php and change the name or use a filter in functions.php to change selected markup of the hook. And possibly take a look in wp-includes/nav-menu.php as well.
Sorry I can't provide more detail.