By nimzie on

Hi,

For my main nav, I have buttons designed with IDs. There's an Active type as well. What I need to do is create the menu in Drupal, assign an ID to each menu item and be able to configure my "active" css state, too. Not so sure how to go about this.

Thanks for any advice.

Cheers

Adam

⋅ Categories: Drupal 5.x

Comments

nimzie’s picture

nimzie commented

Sorry to re-post in my own article. What I'm looking to do is have a menu I can make in Drupal. That menu has 5 items. Each has its own ID. Also, when one is clicked, it would have an Active state which I can tie to my CSS as well.

Is there a component or some snippets of code out there which can help me do this?

Thanks,

Adam

nimzie’s picture

nimzie commented

I'"ve figured out part of the problem. I've entered this function in my template.php

function phptemplate_menu_item($mid, $children = '', $leaf = TRUE) {
  return _phptemplate_callback('menu_item', array(
        'leaf' => $leaf,
        'mid' => $mid,
        'children' => $children
    ));
}

and this code in a menu_item.tpl.php file:

<?php
$link = menu_item_link($mid);
if ((drupal_get_normal_path($item['path']) == $_GET['q']) // if menu item path...
 || (drupal_is_front_page() && $item['path'] == '<front>')) { // or front page...
   $active_class = ' active'; // set active class
 } else { // otherwise...
   $active_class = ''; // do nothing
}
// replace spaces with "_", and strip HTML
$css_id = str_replace(' ', '_', strip_tags($link));
$output = '<li id="'.$css_id.'" class="'. ($leaf ? 'leaf' : ($children ? 'expanded' : 'collapsed')) . $active_class .'">'. $link . $children ."</li>\n";
print $output;
?>

This works perfectly when I click on one of my top menu items images. The active class is implemented as desired.

I would like to make these menu items "category" or taxonomy aware so when I'm on a page of X category, that category's corresponding top menu item is "active". As it is, when using the top menu only, the proper menu item stays "active" but as soon as I navigate other site items (which are categorized corresponding with the menu), the active state is not used.

Please advise.

Cheers,

Adam

summit’s picture

summit commented

Could what you describe also be used to highlight one menu item?
This need not be the active one? Just to give this menu item more look-and-feel?

greetings,
Martijn

ronnqvist’s picture

ronnqvist commented

Hi!

Unfortunately this doesn't work in Drupal 6 since _phptemplate_callback() has been dropped. However in Drupal 6 it's really easy to achieve the same thing, just put this in your template.php:

function phptemplate_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';
  }
#New line added to get unique ID:s for each menu item (id attribute also added to last line):
  $css_id = str_replace(' ', '_', strip_tags($link));
  return '<li class="'. $class .'" id="'. $css_id .'">'. $link . $menu ."</li>\n";
}

What I'd really like to achieve though would be having the list items numbered, this I've also tried to achieve in other occasions. It'd be really nice to be able to obtain the iteration number ($i) of the loop repeatedly calling this function. A dirty solution would be to use global variables and add one each time that the function is called, but I know that's not the way to go. Please Drupal gurus, enlighten me on this. ;) (I wanted to achieve this also for gallery index pages, in order to be able to position the items. So this piece of knowledge would be useful for many purposes.)

cheers, Simon

nimzie’s picture

nimzie commented

OK - I've managed to get a better understanding of Drupal. Simply using a menu as Primary and another as secondary maintains the active link between subnav and top nav.

My issue: for each section (think top nav) of my site, I slide in a different subnav menu. I'm not sure how to get things to stay "active" in the primary nav when I am navigating through secondary nav items.

i.e. If I'm in the "people" section of my site - I show the people menu as subnav. Clicking on a person in the subnav should maintain the active state of the "people" nav item up top.

How do I maintain this when I'm using different blocks for different menus?

scottatdrake’s picture

scottatdrake commented

I'm trying to do the exact same thing. I am using blocks as a 3rd level subnavs. When you click on a third level link, the 2nd level of navigation disappears.

Did you ever figure out how keep the state on the 2nd level menus, nimzie? I'll let you know if I do!

nimzie’s picture

nimzie commented

I worked with coreyp_1 (thank you - you're a Drupal Deity) to come up with this solution.

For my main nav, I'm outputting this.

  if ($primary_links):
      // customization from drupal.org/node/140491
      // original code: print theme('links', $primary_links);
      print customize_links($primary_links, array('class' => 'links primary-links'));
  endif;

For the secondary nav, I've created a block with the following code. This block IS my subnav code:

print get_custom_menu('secondary', 2);

I've got a new module which Corey developed for me. You can download it at:
http://shorelineconsulting.ca/upload/custom_menus.zip

Install it as a module and your block code will just "work".

To see this menu in action:
http://brighthost.ca/nsfa_main/

scottatdrake’s picture

scottatdrake commented

It looks like this is for 5.x. I've started to convert it for Drupal 6.x but am having a hell of a time so far. (This is my first attempt to update a module.)

I can't help but wonder... Is there an easier way to do this in 6 with the revamped menu system?

nimzie’s picture

nimzie commented

I worked with coreyp_1 (thank you - you're a Drupal Deity) to come up with this solution.

For my main nav, I'm outputting this.

  if ($primary_links):
      // customization from drupal.org/node/140491
      // original code: print theme('links', $primary_links);
      print customize_links($primary_links, array('class' => 'links primary-links'));
  endif;

For the secondary nav, I've created a block with the following code. This block IS my subnav code:

print get_custom_menu('secondary', 2);

I've got a new module which Corey developed for me. You can download it at:
http://shorelineconsulting.ca/upload/custom_menus.zip

Install it as a module and your block code will just "work".

To see this menu in action:
http://brighthost.ca/nsfa_main/

dorian_’s picture

dorian_ commented

I tried to figure that out for hours! Thanks a lot!!! Works perfect! No I can begin to set up my CSS!!

shrenster’s picture

shrenster commented

Ronnqvist

Does this solution work for custom menus (not using primary/secondary menus) in Drupal 6. I need to have the menu image highlighted for the current page. If this soultion provides me with the unique id/class for the page, then I can use it to style the menu image for each page.

regards
Shrenster

Anonymous’s picture

Anonymous (not verified) commented

this doesn't require an additionnal menu-item.tpl.php and it creates nicer classes

In template.php :


/**
 * Implementation of theme_menu_item().
 * Add active class and custom id to current menu item links.
 */
function phptemplate_menu_item($mid, $children = '', $leaf = TRUE) {
  $item = menu_get_item($mid); // get current menu item
  // decide whether to add the active class to this menu item
  if ((drupal_get_normal_path($item['path']) == $_GET['q']) // if menu item path...
  || (drupal_is_front_page() && $item['path'] == '<front>')) { // or front page...
    $active_class = ' active'; // set active class
  } else { // otherwise...
    $active_class = ''; // do nothing
  }
  $attribs = isset($item['description']) ?
array('title' => $item['description']) : array();
  $replace = array(' ', '&');
  $attribs['id'] = 'menu-'. str_replace($replace, '-', strtolower($item['title']));
  return
'
<li class="'. ($leaf ? 'leaf' : ($children ? 'expanded' : 'collapsed')) .
$active_class .'" id="'. $attribs['id'] . '">' .
menu_item_link($mid) . $children ."</li>
\n";
}
Anonymous’s picture

Anonymous (not verified) commented

An alternative of the code posted above, using id-safe of zen to turn every item to lower case, and only use class, because id is not safe markup. If two menu items have the same name, it would give two similar ids :

In template.php (without the php opening and closing) : 


	
function phptemplate_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';
  }
#New line added to get unique classes for each menu item
  $css_class = phptemplate_id_safe(str_replace(' ', '_', strip_tags($link)));
  return '<li class="'. $class . ' ' . $css_class . '">' . $link . $menu ."</li>\n";
}


//	
//	Converts a string to a suitable html ID attribute.
//	
//	 http://www.w3.org/TR/html4/struct/global.html#h-7.5.2 specifies what makes a
//	 valid ID attribute in HTML. This function:
//	
//	- Ensure an ID starts with an alpha character by optionally adding an 'n'.
//	- Replaces any character except A-Z, numbers, and underscores with dashes.
//	- Converts entire string to lowercase.
//	
//	@param $string
//	  The string
//	@return
//	  The converted string
//	


function phptemplate_id_safe($string) {
  // Replace with dashes anything that isn't A-Z, numbers, dashes, or underscores.
  $string = strtolower(preg_replace('/[^a-zA-Z0-9_-]+/', '-', $string));
  // If the first character is not a-z, add 'n' in front.
  if (!ctype_lower($string{0})) { // Don't use ctype_alpha since its locale aware.
    $string = 'id'. $string;
  }
  return $string;
}
LRHoek-1’s picture

LRHoek-1 commented

This is exactly what I'm looking for as well. However, it seems that my template.php file is totally ignored. I'm trying to do this with my primary menu items. Does that require a different function?

Anonymous’s picture

Anonymous (not verified) commented

If you are in drupal 6, you need to refresh the theme cache when you change the template.php. You can do this by just visiting the theme page. and validate without changing anything.
______________________________

www.couzinhub.com

LRHoek-1’s picture

LRHoek-1 commented

You are right!

I was under the impression that I had already done this, but that nothing had changed. Thanks a lot!

Anonymous’s picture

Anonymous (not verified) commented

If you want to avoid having to do that every time you change the template.php, you can either use the devel module, I think there is a function that clears the cache on demand. Also, by using the ZEN theme, you can activate 'clear cache on each page reload'. It's just a bit demanding on memory so make sure you turn it off after development. Basic 2.1 (not released yet) also have that function.

You can also visit the page admin/settings/performance. A button clears the cache.

______________________________

www.couzinhub.com

Screenack’s picture

Screenack commented

This is most excellent -- AND standards compliant. Look away from using id's, all.

torgospizza’s picture

torgospizza
he/him
Primary language English
Location Portland, OR
commented

This is a great addition, thanks! I'm still baffled that it's not included in the Drupal core menu creation process...

Have I helped you? Consider buying me a beer.

Anonymous’s picture

Anonymous (not verified) commented

You can find this code in some base theme, I included an improved version of it in Basic

awasson’s picture

awasson commented

Subscribing... This is exactly what I was looking for. It does just what I wanted in D6.

Thanks,
Andrew

ha5bro’s picture

ha5bro commented

I've combined the code above with another snippet I found so that now the snippet adds an active class to li elements and a elements, custom id to menu items links PLUS - a 'parent' class to menu items further up the food chain. I didn't write any of it, just shuffled it around a bit.

/**
* Implementation of theme_menu_item().
* Add parent class to parent items, active class to li elements and a elements, custom id to current menu item links.
*/
function phptemplate_menu_item($mid, $children = '', $leaf = TRUE) {
  $item = menu_get_item($mid); // get current menu item
  // decide whether to add the active class to this menu item
  if ((drupal_get_normal_path($item['path']) == $_GET['q']) // if menu item path...
  || (drupal_is_front_page() && $item['path'] == '<front>')) { // or front page...
    $active_class = ' active'; // set active class
  } else { // otherwise...
    $active_class = ''; // do nothing
  }
  $attribs = isset($item['description']) ?
array('title' => $item['description']) : array();
  $replace = array(' ', '&');
  $attribs['id'] = 'menu-'. str_replace($replace, '-', strtolower($item['title']));
  return
'<li class="'. ($leaf ? 'leaf' : ($children ? 'expanded' : 'collapsed')) . (menu_in_active_trail($mid) ? ' parent' : '') . $active_class .'" id="'. $attribs['id'] . '">' . menu_item_link($mid) . $children ."</li>\n";
}

[[[ ALL HAIL THE ALMIGHTY GOOGLEBOT ]]]

summit’s picture

summit commented

This doesn;t work for D6 anymore..menu_in_active_trail($mid) is not in API, right? Anyone has other suggestion for D6 please?
Thanks a lot in advance for your reply!
greetings, Martijn

tim_melton’s picture

tim_melton commented

this does add the ID to each of the links but some how the LI's become double space.
I can not figure out why.

There does seem to be some odd character in front of the

  • , but I can not figure out how to get rid of it.
    • Alexander Matveev’s picture

    Alexander Matveev commented

    subscribing

    kloewer’s picture

    kloewer commented

    Have a look at this:

    Menu Attributes
    http://drupal.org/project/menu_attributes

    Menu Class
    http://drupal.org/project/menuclass

    awasson’s picture

    awasson commented

    I've just slightly adjusted couzinhub's code Here to make it a little more compact and I'm using a core D6 function to sanitize the class before attaching it to the link. Add it to template.php in your theme and rename the function to match the name of your theme.

        function MYTHEME_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';
  	}
 	// New line added to get unique classes for each menu item using form_clean_id() to clean it up
  	$css_class = form_clean_id(strip_tags(strtolower($link)));
  	return '<li class="'. $class . ' ' . $css_class . '">' . $link . $menu ."</li>\n";
    }
    taoofbean’s picture

    taoofbean commented

    Like the original commenter said over two years ago, I cannot believe this type of functionality is not part of core. I only wish I had the PHP chops to be able to write this and advocate for it's inclusion. The fact menus don't have as a default, specific class names and or ID's associated, along with active states seems to me like a bug. That aside, I wonder if anyone has tackled this for D7 and would be willing to share a snippet. I see the Basic theme has been updated to D7 so perhaps the requisite code is within.

    Kind regards,
    Andrew

    Edit: I found something that works, at least on my subtheme of Adaptive Theme. Place the following code in your preprocess section of your themename and you manipulate the defined menu. Perhaps this can be extended by someone more knowledgable than me.

    function YOURSUBTHEMENAME_preprocess(&$vars, $hook) {
  if (isset($vars['secondary_menu'])) {
      $vars['secondary_navigation'] = theme('links', array(
        'links' => $vars['secondary_menu'],
        'attributes' => array(
          'class' => array('menu', 'additional_classes', 'and_they_work'),
       ),
       'heading' => array(
       'text' => t('Secondary navigation'),
       'level' => 'h2',
         'class' => array('element-invisible'),
       )
      ));
    }
    if (!empty($vars['secondary_navigation'])) {
      $vars['secondary_navigation'] = _theme_menu_variables($vars['secondary_navigation'], 'secondary');
    }
}
    asho’s picture

    asho commented

    Since we're compacting I thought I'd take it one step further and use the core theme_menu_link function to do most of the work:

    function MYTHEME_menu_item($link, $has_children, $menu = '', $in_active_trail = FALSE, $extra_class = NULL) {
	$extra_class_with_id = $extra_class . ' ' . form_clean_id(strip_tags(strtolower($link)));
	return theme_menu_item($link, $has_children, $menu, $in_active_trail, $extra_class_with_id);
}