By Fiasst on

I've wondered ever since I found Drupal why the primary menu prints out in such a over engineered way.

If like me you use the sliding doors technique on your sites primary nav. It can be a bit of a pain when styling it because of the Class Names available:

<ul class="ca" id="nav">
	<li class="first menu-1-1-2"><a href="link1" title="link1" class="menu-1-1-2">link1</a></li>
	<li class="menu-1-2-2-active"><a href="link2" title="link2" class="menu-1-2-2 active">link2</a></li>
	<li class="menu-1-3-2"><a href="link3" title="link3" class="menu-1-3-2">link3</a></li>
	<li class="menu-1-4-2"><a href="link4" title="link4" class="menu-1-4-2">link4</a></li>
	<li class="menu-1-5-2"><a href="link5" title="link5" class="menu-1-5-2">link5</a></li>
	<li class="last menu-1-6-2"><a href="link6" title="link6" class="menu-1-6-2">link6</a></li>
</ul>

I could achieve the same style results with less and more flexible code if the nav was printed as:

<ul class="ca" id="nav">
	<li class="first menu-1-1-2"><a href="link1" title="link1">link1</a></li>
	<li class="menu-1-2-2 active"><a href="link2" title="link2">link2</a></li>
	<li class="menu-1-3-2"><a href="link3" title="link3">link3</a></li>
	<li class="menu-1-4-2"><a href="link4" title="link4">link4</a></li>
	<li class="menu-1-5-2"><a href="link5" title="link5">link5</a></li>
	<li class="last menu-1-6-2"><a href="link6" title="link6">link6</a></li>
</ul>

Am I overlooking something?

Cheers,
Marc

⋅ Categories: Drupal 5.x

Comments

marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

I think I understand what you say, but I don't see the problem. OK, the a-tags have classes you don't need... So don't use them, right? Are there things you can do with the second block of code, but cannot do with the first block? Usually, more classnames means more flexibility, not less.

matkeane’s picture

matkeane commented

The Drupal theme system can help you here, as you can override the standard output for the Primary links and tweak it to your taste.

There are some snippets about theming primary links on these handbook pages:
http://drupal.org/node/44711
http://drupal.org/node/87902

The quick explanation is that in your page.tpl.php template, you should see something like this:

<?php print theme('links', $primary_links, array('class' => 'links', 'id' => 'primary')) ?>

which means that if you create a function in your template.php file called:

function mytheme_links($links, $attributes = array('class' => 'links')) {
  // format menu links here
}

You can do what you want with the markup.

Fiasst’s picture

Fiasst commented

I didnt think I could style the links past changing the id and class of the ul element.

marcvangend, I would usually agree with more classes = more flexibility. But, the problem with having the active class attached as mentioned before is; to create a 'active' style link, my style sheet looks like this:

<style type="text/css">
#home-pg #nav li.menu-1-1-2,//front never seems to recognize being active so use body id attribute.
#nav li.menu-1-2-2-active,
#nav li.menu-1-3-2-active,
#nav li.menu-1-4-2-active,
#nav li.menu-1-4-2-active,
#nav li.menu-1-5-2-active,
#nav li.menu-1-6-2-active,
#nav li.menu-1-7-2-active,
#nav li.menu-1-8-2-active,
#nav li.menu-1-9-2-active {//if you add more than 9 pages the links wont have 'active' appearance.
	background: url(images/tab.gif) no-repeat;
	margin: 8px 0 0;
	display: block;
	}
	#home-pg #nav .menu-1-1-2 a,//this is where .active isolated would come in handy.
	#nav .menu-1-2-2-active a,//I could just use #nav li.active a { instead of all these lines
	#nav .menu-1-3-2-active a,
	#nav .menu-1-4-2-active a,
	#nav .menu-1-4-2-active a,
	#nav .menu-1-5-2-active a,
	#nav .menu-1-6-2-active a,
	#nav .menu-1-7-2-active a,
	#nav .menu-1-8-2-active a,
	#nav .menu-1-9-2-active a,
	#nav li a.active {
		background: url(images/tab.gif) no-repeat 100% 100%;
		font-size: 12px;
		font-weight: bold;
		color: #fff;
		padding: 7px 20px;
		display: block;
		text-decoration: none;
		}
</style>

So, I'll look into matkeane's solution some more. Thanks :]

marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

You're so right, I overlooked the difference (a single dash) between class="menu-1-2-2-active" and class="menu-1-2-2 active". This means your issue is not less classes on the <a>, but different classes in the <li>.

In fact, I also 'fixed' this issue once. IMHO it's not a very elegant fix, but it works. I only added the if-statement where it says 'quick and dirty way'. My theme function now looks like this (without the php tags):

<?php
function phptemplate_links($links, $attributes = array('class' => 'links')) {
  $output = '';

  if (count($links) > 0) {
    $output = '<ul'. drupal_attributes($attributes) .'>';

    $num_links = count($links);
    $i = 1;

    foreach ($links as $key => $link) {
      $class = '';

      // Automatically add a class to each link and also to each LI
      if (isset($link['attributes']) && isset($link['attributes']['class'])) {
        $link['attributes']['class'] .= ' ' . $key;
        $class = $key;
      } else {
        $link['attributes']['class'] = $key;
        $class = $key;
      }
	  
      // Also add class='active' to the parent <li> of the active <a> (quick and dirty way)
      if (substr($class,-6) == 'active') {
        $class = "$class active";
      }
	
     // Add first and last classes to the list of links to help out themers.
      $extra_class = '';
      if ($i == 1) {
        $extra_class .= 'first ';
      }
      if ($i == $num_links) {
        $extra_class .= 'last ';
      }
      $output .= '<li class="'. $extra_class . $class .'">';

      // Is the title HTML?
      $html = isset($link['html']) && $link['html'];

      // Initialize fragment and query variables.
      $link['query'] = isset($link['query']) ? $link['query'] : NULL;
      $link['fragment'] = isset($link['fragment']) ? $link['fragment'] : NULL;

      if (isset($link['href'])) {
        $output .= l($link['title'], $link['href'], $link['attributes'], $link['query'], $link['fragment'], FALSE, $html);
      }
      else if ($link['title']) {
        //Some links are actually not links, but we wrap these in <span> for adding title and class attributes
        if (!$html) {
          $link['title'] = check_plain($link['title']);
        }
        $output .= '<span'. drupal_attributes($link['attributes']) .'>'. $link['title'] .'</span>';
      }

      $i++;
      $output .= "</li>\n";
    }

    $output .= '</ul>';
  }

  return $output;
}
?>

Maybe this helps, but if you choose another solution, I'm interested to see it.

matkeane’s picture

matkeane commented

Hi,

I use something very similar, but was too lazy to go find it and paste it into my previous reply! I do a couple of things differently: I start by checking the 'id' of the $attributes array that is passed in so that I can treat the primary menu differently from any others. The main difference is that I move the 'menu-1-2-2' part into the 'id' attribute of the 'li' and only keep what I think of as classes - active, first, last - in the 'class' attribute (It seems weird to me having a unique class name by default, but I guess it's possible that menus might be used more than once in some themes, and so classes are safest). In the end, I removed the 'id' and 'class' attributes from the links themselves to simplify the markup.

By checking the 'id' of the menu array, I was able to completely change the markup and styling of the primary menus without messing with any of the styles that my colleague had already defined for the other menus in the site. Anyway, that's the great thing about themeable functions - you just override them and do what you want.