Alter menu structure when using Superfish menu

Question

I am using Superfish menus. I wanted to add a <span> tag before each <a> tag for menu links. I tried the following code:

function mytheme_menu_link($variables) {
    $element = $variables['element'];
    $sub_menu = '';
    if (empty($element['localized_options'])) {
        $element['localized_options'] = array();
    }
    $element['localized_options']['html'] = TRUE; //let l function know that our link title includes html
    $output = l($element['#title'], $element['#href'], $element['#localized_options']);
    return '<li' . drupal_attributes($element['#attributes']) . '><span>' . $output . "</span></li>\n";
}

but it did not take any effect. Since I am using Superfish menus do I need to write any other code?

Answer 1

The Superfish module bypasses the usual Drupal theming hooks for menus and implements its own. You will need to override the theme_superfish() function in order to change the HTML around those menu items. Copy that function out of superfish.module into your theme's template.php file. Replace the word "theme" in the function name with your theme's machine name, and make your edits.

Answer 2

You can easily do this via the administration interface. You could also override theme_superfish_build(), but there's a simpler solution exactly for that task:

1. Go to admin/structure/block, search for the given Superfish block, and click configure. E.g. in my test Drupal, I'll edit "Superfish 4" block (in my case the path is the following: admin/structure/block/manage/superfish/4/configure):

2. Scroll down to "Advanced HTML Settings", expand the fieldset, and below the "HTML Wrappers" sub-fieldset, there will be a field called "Around the hyperlinks" (NOT the "Around the hyperlinks contents"), type in the following:

   <span class="this-is-your-span-class">,</span>
   

   

3. Save block, and you're done.

---

Screenshots

BEFORE

AFTER