How to hook drupal menu system in order to add a div around children?

By modjodandy on 19 Feb 2010 at 17:02 UTC

Drupal generate menus like this :


<ul class="menu">
	<li>
		<a href="#" >ITEM 1</a>
		
		<ul>
			<li><a href="#" >subitem 1</a></li> 
			
			<li>
				<a href="#">subitem 2</a>
				
				<ul>
					<li><a href="#">subsubitem 1</a></li> 
					<li><a href="#">subsubitem 2</a></li>
					<li><a href="#">subsubitem 3</a></li> 
				</ul>
			</li> 
			
			<li><a href="#">subitem 3</a></li>
			
		</ul>
	</li> 

	<li>
		<a href="#">ITEM 2</a>
	</li>
	<li>
		<a href="#">ITEM 3</a>
	</li> 
	<li>
		<a href="#">ITEM 4</a>
	</li> 	
	
</ul>

Is it possible to add a hook in my template.php in order to add a div around menu's children?


<ul class="menu"> 
	<li> 
		<a href="#" class="home">ITEM 1</a> 
	</li> 
	<li> 
		<a href="#" class="products">ITEM 2</a> 
		<div class="sub"> 
			<ul> 
				<li><h2><a href="#">SUBITEM 1</a></h2></li> 
				<li><a href="#">subsubitem 1</a></li> 
				<li><a href="#">subsubitem 2</a></li> 
				<li><a href="#">subsubitem 3</a></li> 
				<li><a href="#">subsubitem 4</a></li>
			</ul> 
		   
		</div> 
	</li> 
  
	<li> 
		<a href="#" class="community">ITEM 3</a> 
	</li> 
	<li> 
		<a href="#" class="store">ITEM 4</a> 
	</li> 
</ul>

I searched for a while in the drupal API website but, theme_menu_item and theme_menu_tree don't seems to do the job.

Thanks for your help!

Comments

You can do this using a hook

nicl commented 19 February 2010 at 23:25

You can do this using a hook I think but I don't know how.

But an alternative is to edit the theme template file (this will be something.tpl.php ) by copying the relevant system css file into your theme folder and editing it directly.

I quested for that template

modjodandy commented 20 February 2010 at 09:10

I quested for that template file, but drupal won't let me do the trick because it can't make the difference between a parent and a child.

Somewhere in the menu.inc file, sleep a magic class, that generate menu tree like i want to, but i can't find it anywhere.
I read a good part of the Drupal API, but i feel kind of lost T_T

div can be added in

dreammer6 commented 21 August 2010 at 13:07

div can be added in theme_menu_item hook, like this:

function themename_menu_item($link, $has_children, $menu = '', $in_active_trail = FALSE, $extra_class = NULL) {
  $class = ($menu ? 'expanded' : ($has_children ? 'collapsed' : 'leaf'));
  if (!empty($extra_class)) {
    $class .= ' '. $extra_class;
  }
  if ($in_active_trail) {
    $class .= ' active-trail';
  }
  return '<li class="'. $class .'">'. $link . (($menu) ? '<div class="drop">'.$menu.'</div>' : '') ."</li>\n";
}

To add a div around children in Drupal 7

vickey commented 30 April 2013 at 14:22

In Drupal 7, Use theme_menu_link to add a div around children. Refer below code :

function yourtheme_menu_link(array $variables) {
  $element = $variables['element'];
  $sub_menu = '';

  if ($element['#below']) {
    $sub_menu = drupal_render($element['#below']);
  }
  $output = l($element['#title'], $element['#href'], $element['#localized_options']);
  return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . '<div class = "submenucont">'. $sub_menu . "</div></li>\n";
}