Koumbit.org

For freedom and solidarity online

Liens de menu en ligne dans Drupal 7

Today I had to do a fairly common Drupal theming task, turning a menu block into a set of inline links. In pictures, I needed to go from this: Unmodified drupal menu links to this: Final inline menu links

Since I usually do module dev and similar tasks for Koumbit, I was aware that Drupal already has a built in class for lists containing links that would display my links inline. That class is "links inline". Unfortunately I wan't sure how to go about changing those values at the theme layer. So I visited the API page of theme_menu_tree()hoping for some inspiration, and found some in this comment by wgsimon. A custom theme can override the theming of a specific menu item in Drupal 7 by using the pattern THEME_menu_tree__MENU_NAME().

I added the following code to the template.php of my theme, to make both the standard user menu and our custom menu for anonymous users use Drupal's built in theming for inline links:

/**
 * Make the user menu inline
 */
function customtheme_menu_tree__user_menu($variables) {
  return '<ul class="links inline clearfix">' . $variables['tree'] . '</ul>';
}

/**
 * Make the anonymous user menu inline
 */
function customtheme_menu_tree__menu_user_menu_anonymous_($variables) {
  return '<ul class="links inline clearfix">' . $variables['tree'] . '</ul>';
}

Just replace customtheme with your themes name and change the menu names to use this yourself.

For the language switcher I did something similar, after consulting locale_block_view() in the API and seeing that the language switcher block uses theme('links__locale_block', $variables); to provide its content. The template.php based override looked like this:

/**
 * Theme the language switcher link as inline
 */
function customtheme_links__locale_block($variables) {
  array_push($variables['attributes']['class'], 'links', 'inline', 'clearfix');
  return theme('links', $variables);
}

So I learned that the theme_function__object_name pattern will work for any theme function called this way. I am certain this must be specified somewhere in the Drupal API documentation.

At this point my menus looked like this: Menu links after changes to template.php

The last step is more theme specific. In my case I moved the contents of <div class="region region-header"> and surrounding markup in my page.tpl.php to before the logo, and inserted the following CSS rules into the appropriate files:

.region-header .block {
  display: inline-block;
  margin-bottom: 0;
}

.region-header {
  text-align: right;
}

The result: Menu links after changes to CSS

Obviously, there is still some work left before the final product looks like the design, but my main concern up until this point was to avoid cluttering up my CSS with code that is already present in the Drupal core.

Comment this article, make suggestions, and see code samples with syntax highlighting.

Add new comment

Call us

☏ +1 514 907 9494
Lun: 10h à 12h
Mar/Mer: 10h à 12h et 13h à 16h
Jeu: 10h à 12h
Mon: 10AM to 12PM
Tue/Wed: 10AM to 12PM et 13AM to 16PM
Thu: 10AM to 12PM

Come and See Us!

1883, rue Atateken,
Montréal (Québec) H2L 3L7, Canada
Veuillez noter que nos bureaux n'ont pas de stationnement attitré.
1883 Atateken Street,
Montreal, Quebec, H2L 3L7, Canada
Please note that you'll need to find on-street parking.

Write to Us

Informations générales

Support technique

Pour une demande de devis, voir le formulaire à la page contact.

Nos clefs PGP

General inquiries

Technical support

For a free estimate, see the form on our contact page.

Our PGP keys

Follow Us

ktweb_menu_social