Aquasoft / MGP-Forum style CSS background graphical menu for Drupal primary links

We first used this technique from the aquasoft theme on a 4.7 site, MGP-Forum, and just used it again, updated for Drupal 5 and with one enhancement by us.

Here's the D5 version from Aquasoft:

<?php
function aquasoft_primary_links() {
  $links = menu_primary_links();
  if ($links) {
    foreach ($links as $link) {
$cssid = str_replace(' ', '_', strip_tags($link));
      $output .= '<li id="'.$cssid.'">' . $link . '</li>';
    };
    $output .= '</ul>';
  }
  return $output;
}
?>

  <div class="shadleft">
    <div class="shadright">
      <div id="wrapper">
        <table class="tableborder" width="100%" cellpadding="3" border="0" cellspacing="1">
      <tr>
    <td class="toolbar" colspan="3">
              <div id="toolbar"><ul class="toolbarmenu" id="toolbar">
                <li style="float:right;" id="tbaero"><a href="http://www.aero-soft.com/"></a></li>
                <?php if ($logo) { ?><li id="tbhome"><a href="<?php print $base_path ?>" title="<?php print t('Home') ?>"><img src="<?php print $logo ?>" alt="<?php print t('Home') ?>" /></a></li><?php } ?>
                <?php if (isset($primary_links)) { ?><li><img src="<?php print  base_path() . drupal_get_path('theme', 'aquasoft') .'/images/navsep2.gif' ?>" alt="" /></li><?php print aquasoft_primary_links(); ?><?php } ?>
              </div>
  <div id="headerreg">
                <?php print $header ?>
              </div>
</td>
          </tr>

http://drupal.org/project/aquasoft

Our latest adaptation of this, for saveournet.ca:

The extra region has nothing to do with the cool image-based menus, but we include it for local color.

Note: If you wanted to hide the text and display only images, wrapping the actual text output of the links, inside the <a> tags, in <span> tags would enable you to add a css rule such as

#toolbar li a span {
  display: none;
}

to hide it.

Anyhow, on with the show, the powerhouse behind it all, template.php:

In template.php:

<?php
/**
 * Declare the available regions implemented by this theme.
 *
 * @return
 *   An array of regions.
 */
function zen_classic_regions() {
  return array(
    'top_right' => t('top right'),
    'left' => t('left sidebar'),
    'right' => t('right sidebar'),
    'content_top' => t('content top'),
    'content_bottom' => t('content bottom'),
    'header' => t('header'),
    'footer' => t('footer'),
    'closure_region' => t('closure'),
  );
}

/* old 4.7 style
function zen_classic_primary_links() {
  $links = menu_primary_links();
  if ($links) {
    foreach ($links as $link) {
$cssid = str_replace(' ', '_', strip_tags($link));
      $output .= '<li id="'.$cssid.'">' . $link . '</li>';
    };
    $output .= '</ul>';
  }
  return $output;
}
// theme links changed a lot in Drupal 5
// http://api.drupal.org/api/function/theme_links/5
// http://api.drupal.org/api/function/theme_links/4.7
*/

function zen_classic_primary_links() {
  $links = menu_primary_links();
  if ($links) {
    foreach ($links as $link) {
      $link = l($link['title'], $link['href'], $link['attributes'], $link['query'], $link['fragment']);
      $cssid = str_replace(' ', '_', strip_tags($link));
      // css doesn't work with exclamation points or punctuation, so strip them out
      $cssid = trim(preg_replace('#[^\p{L}\p{N}]+#u', '', $cssid));
      // @TODO: check if that also strips out underscore (_) characters
      $output .= '<li id="'.$cssid.'">' . $link . '</li>';
    };
    $output .= '</ul>';
  }
  return $output;
}
?>

this piece of page.tpl.php:

      <?php if (!empty($top_right)): ?>
        <div id="top-right-region">
          <?php print $top_right; ?>
        </div> <!-- /top-right-region -->
      <?php endif; ?>

              <div id="toolbar"><ul class="toolbarmenu">
            <?php
              if (function_exists('zen_classic_primary_links')) {
                print zen_classic_primary_links();
              }
              else {
                print theme('links', $primary_links);
              }
            ?>
              </div>
  <div id="headerreg">
                <?php print $header ?>
        </div>

in the CSS (because it was the Zen theme, and this was the adaptation of zen-fixed.css):

  #page
  {
    width: 990px; /* page width  */
    margin: 0 auto; /* Center the page */
  }

/* Specify Icons for each primary menu's menu item. */
ul.toolbarmenu {
margin-left:0;
padding:0;
}

li#ACT a{
display: block;
background: url(images/saveournet_primary_links_act.png) no-repeat top center;
width: 150px;
padding-right: 6px; /* make up for poor Gimp cropping */
}

li#Contribute a{
display: block;
background: url(images/saveournet_primary_links_contribute.png) no-repeat top center;
width: 181px;
padding-right: 2px; /* make up for poor Gimp cropping */
padding-left: 3px; /* make up for poor Gimp cropping */
}

li#Members a{
display: block;
background: url(images/saveournet_primary_links_join.png) no-repeat top center;
width: 139px;
}

li#Share a{
display: block;
background: url(images/saveournet_primary_links_share.png) no-repeat top center;
width: 138px;
}

li#Newsroom a{
display: block;
background: url(images/saveournet_primary_links_newsroom.png) no-repeat top center;
width: 181px;
padding-right: 0px; /* make up for poor Gimp cropping */
}

li#FAQ a{
display: block;
background: url(images/saveournet_primary_links_faq.png) no-repeat top center;
width: 164px;
padding-left: 0px; /* make up for poor Gimp cropping */
}

#toolbar a {
  color: #eee;
  font-size: 12px;
}

#toolbar a:hover {
  color: #f00;
  font-weight: bold;
}

/* does not exist
li#Resources. a{
display: block; background: url(images/saveournet_primary_links_resources.png) no-repeat top center;
}
*/

/* maybe needed?  yes.... */

.toolbar {
  margin: 0px;
  padding: 0px 0px 0px 0px;
/*
  background: url(images/toolbar_bg.gif) #fff;
  color: #000000;
*/ 
}

#toolbar {
  float: left;
  margin: 0px;
  padding: 0px;
  width: 100%;
/* 
  background: url(images/toolbar_bg.gif) #fff; color: #000000;
*/
}

#toolbar ul, #footer ul, #top-right-region ul { margin: 0; padding: 0px; list-style: none; }
#toolbar li, #footer li, #top-right-region li { float: left; margin: 0 0 0 1px; padding: 0; display: inline; text-align: center; vertical-align: middle; }

#footer li, #top-right-region li {
  margin-left: 2px;
  margin-right: 2px;
  padding-left: 3px;
  padding-right: 3px;
}

#toolbar a {
  margin-left: 0px;
  margin-right: 0px;
  padding: 70px 1px 3px 1px;
  display: block;
  color: #000000;
  text-decoration: none;
}

#toolbar a:active {
  color: #f00;
  font-weight: bold;
  font-style: italic;
}

#toolbar a.active {
  color: #000;
  font-weight: bold;
}

h1.title, h2.title, h3.title {
  color: #E5060A;
}

#header {
  position: relative;
}

#top-right-region {
/*  float: right; */
  position: absolute;
  top: 15px;
  right: 30px;
}

.align-right {
  padding-left: 5px;
}
.align-left {
  padding-right: 5px;
}

Credits: Punctuation removing preg_replace code from member "xml" at designerstalk:
http://www.designerstalk.com/forums/programming/17819-php-remove-punctuation.html