Gaining control of menus in Drupal - Part 1
I have been having trouble with styling the default output of a Drupal menu. After much trial and error I finally found the correct combination of steps. The following is the beginning of a three-part tutorial that will allow you access to every tag within a menu's HTML output.
I will begin with the different files and functions that are need to accomplish the task.
- A current install of Drupal 6.x
- The Primary Links menu
- The Primary Links Block, added to the region of your choice, to display the menu
- A copy of block.tpl.php in your theme directory - for theming
- A copy of template.php
You need to start by using the Primary Menu in Drupal. It is also important that you select the 'Expanded' option on all parent items. We will use the information later.
First we will look at the default output using the Garland theme.
<div id="block-menu-primary-links" class="clear-block block block-menu">
<div class="content">
<ul class="menu">
<li class="leaf first"><a href="/find-pennzoil" title="Find Pennzoil" class="active">FIND PENNZOIL</a></li>
<li class="expanded"><a href="/motor-oil" title="Motor Oil">MOTOR OIL</a>
<ul class="menu">
<li class="leaf first"><a href="/motor-oil/pennzoil-platinum" title="Pennzoil Platinum">PLATINUM FULL SYNTHETIC</a></li>
<li class="leaf"><a href="/motor-oil/pennzoil-conventional" title="Pennzoil Conventional">CONVENTIONAL</a></li>
<li class="leaf"><a href="/motor-oil/high-mileage-vehicle" title="High Mileage Vehicle">HIGH MILEAGE VEHICLE</a></li>
<li class="leaf"><a href="/motor-oil/suv-truck-and-minivan" title="Pennzoil SUV Truck and Minivan">SUV TRUCK AND MINIVAN</a></li>
<li class="leaf last"><a href="/motor-oil/racing-motor-oil" title="Racing Motor Oil">RACING MOTOR OIL</a></li>
</ul>
</li>
<li class="leaf"><a href="/advertising" title="Advertising">ADVERTISING</a></li>
<li class="leaf"><a href="/motorsports" title="Motorsports">MOTORSPORTS</a></li>
<li class="leaf last"><a href="http://www.norscotsites.com/pennzoilgear" title="">MERCHANDISE</a></li>
</ul>
</div>
</div>
This is the intended output.
<div id="main-nav">
<ul class="menu">
<li class="leaf first"><a href="/fond-pennzoil" title="Find Pennzoil" class="main-link active">FIND PENNZOIL</a></li>
<li class="expanded"><a href="/motor-oil" title="Motor Oil" class="main-link">MOTOR OIL</a>
<ul class="sub-menu">
<li class="leaf first"><a href="/motor-oil/pennzoil-platinum" title="Pennzoil Platinum">PLATINUM FULL SYNTHETIC</a></li>
<li class="leaf"><a href="/motor-oil/pennzoil-conventional" title="Pennzoil Conventional">CONVENTIONAL</a></li>
<li class="leaf"><a href="/motor-oil/high-mileage-vehicle" title="High Mileage Vehicle">HIGH MILEAGE VEHICLE</a></li>
<li class="leaf"><a href="/motor-oil/suv-truck-and-minivan" title="Pennzoil SUV Truck and Minivan">SUV TRUCK AND MINIVAN</a></li>
<li class="leaf last"><a href="/motor-oil/racing-motor-oil" title="Racing Motor Oil">RACING MOTOR OIL</a></li>
</ul>
</li>
<li class="leaf"><a href="/advertising" title="Advertising" class="main-link">ADVERTISING</a></li>
<li class="leaf"><a href="/motorsports" title="Motorsports">MOTORSPORTS</a></li>
<li class="leaf last"><a href="http://www.norscotsites.com/pennzoilgear" title="" class="main-link">MERCHANDISE</a></li>
</ul>
</div>
The first thing we need to do is clean up the block. So we need a copy of block.tpl.php, I get mine from api.drupal.org.
make a copy of block.tpl.php and name it block-menu-primary-links.tpl.php.
the default code looks like this:
<div id="block-<?php print $block->module .'-'. $block->delta; ?>" class="block block-<?php print $block->module ?>">
<?php if ($block->subject): ?>
<h2><?php print $block->subject ?></h2>
<?php endif;?>
<div class="content">
<?php print $block->content ?>
</div>
</div>
After removing some code we do not need, we are left with this:
<div id="main-nav">
<?php print $block->content; ?>
</div>
We will live with it as it is for now ... at the end of this series, you will see how to add the final touches.
Next we'll look at template.php and how to use it to achieve our desired result.
Post new comment