Styling menu block's menu links in Drupal 7

0
votes

I'm trying to style a block in Drupal 7 and I'm having a very hard time figuring things out!

I've used the menu_block module to get all links from the main menu. It produces a block with links in a ul, which I would like to theme as divs for each menu tree.

The styling itself should be easy, but I'm really struggling with finding the theme hook/template filename that I should use to style it.

I've tried to hook into theme_menu_tree and theme_menu_link, but they theme way too many places, and I can't see what I'm styling. I've tried menu-tree--menu-block--main-menu.tpl.php, but the variables are nothing like what I need.

My thought is that I need to style the $content variable in block.tpl.php, but I can't figure out how to do it for a specific block. Where should I hook in, if I want to style the menu points when the block (block type) is display (in the footer)?

3
templatesdrupalhookdrupal-themes

3 Answers

2
votes

I think the easiest (not necessarily the best) place to do this in hook_block_view_alter()

function MYMODULE_block_view_alter(&$data, $block) {
 if ($block->module == 'menu_block') {
    // Extract the links from the available data
    $links = element_children($data['content']['#content']);
    $content = '';

    // Loop through the links and build up the required output.
    foreach ($links as $link) {
      $content .= '<div class="something">' . l($link['#title'], $link['#href']) . '</div>';
    }

    // Assign the new output to the block content...done :)
    $data['content'] = $content; 
  }
}

The Devel module and it's handy dpm() function are your best friend here...they'll let you examine any PHP variable in a nicely structured format in the standard messages area. If you don't already have it installed I'd advise doing so, it's an absolute must for Drupal development.

Don't forget to clear Drupal's caches once you've implemented that hook or the system won't pick it up.

2
votes

I had a very similar problem trying to figure out how to name my templates and hooks properly. Googling didn't help (way too much noise), but eventually I tried the Menu Block module documentation on drupal.org and it lead me in the right direction...

Template: menu-block-wrapper--main-menu.tpl.php

<nav role="navigation" id="siteNavigation">
<?php echo render($content); ?>
</nav>

Hooks: THEMENAME_menu_tree__menu_block__MENUNAME() and THEMENAME_menu_link__menu_block__MENUNAME(): 

function THEME_menu_tree__menu_block__main_menu($vars) {
    return '<ul class="my-custom-menu-wrapper">' . $vars['tree'] . '</ul>';
}

function THEME_menu_link__menu_block__main_menu($data) {

    $el = $data['element'];

    // ... render any classes or other attributes that need to go in this <li> 
    $attr = drupal_attributes($el['#attributes']);

    // ... render the menu link
    $link = l($el['#title'], $el['#href'], $el['#localized_options']);

    // ... and render any submenus
    $sub_menu = drupal_render($el['#below']);

    return sprintf("\n<li %s>%s %s</li>", $attr, $link, $sub_menu);
}
0
votes

With print theme you can put CSS styles to the < ul >

print theme('links', array('links' => menu_navigation_links($your_menu_name), 'attributes' => array('class'=> array('ul_class')) ));