.on web development, Drupal, PHP, photography, and the like.

Dropping Horizontal Menu's in Drupal 5.x

Posted by root
08.10th.2008

Filed under:

This horizontal drop down menu is lightweight and uses minimal javascript. What this doesn't do, is interpret the primary links as links in PHP. What this menu does use, instead, is use the built in Drupal link generation. By creating blocks and assigning the Primary Links to this block, the menu generated by Drupal takes shape.

First, create a region in page.tpl.php. In the example below, the region is named $primary_nav. This region name will also appear in the template.php file. The division tag 'primarynav' is the CSS construct that is used to style the menu's. The CSS will only be applied to the block name, this will prevent all menu's being formatted the same.

<?php
  if ($primary_nav):  ?>
    <div id="primarynav"><?php print $primary_nav; ?></div>
  <?php endif; ?>

In template.php, add the region 'primary_nav' and give it a name (below its name is 'Primary Links'). The name will be displayed in yellow on the Build Blocks page in Drupal.

function myTheme_regions() {
  return array(
    'primary_nav'	=> t('Primary Links'),
    'content'		=> t('Content'),
    'rightsidebar'	=> t('Right Sidebar'),
    'footer'		=> t('footer')
  );
}

In addition to this, for Drupal 5.x, include the primarynav.css and primarynav.js to template.php. I usually append the file with the following:

drupal_add_css(path_to_theme().'/primarynav.css');
drupal_add_js(path_to_theme().'/primarynav.js');

Alternatively, you can just copy/paste the contents from the primarynav.css file to your style.css. Adding CSS and JS files via drupal_add_xx() will add the files to every page-xx.tpl.php. Upload to your theme's directory: primarynav.css and primarynav.js.

Next, go to Build Blocks admin page and enable the menu you created by assigning it to a region named 'Primary Links' in the drop down selection. The default, if you haven't added a new menu, is named 'Primary Links' in the admin/build/menu page.

**Make sure the menu items have the 'Expanded' checkbox checked in all the Menus located in admin/build/menu.**

In summary,

  • Add a block, preferably spanning across the page (horizonal menu)
  • Add the block region to template.php
  • Assign the menu to that block region, make sure 'Expanded' is checked off in the menu settings.

References: A List Apart: Suckerfish Dropdowns

AttachmentSize
primarynav.css4.64 KB
primarynav.js.txt474 bytes