User login

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

Searched words: 
Aquasoft primary links CSS images php strip punctuation aquasoft css template.php punctuation function remove periods exclamation points

Comments

Post new comment

The content of this field is kept private and will not be shown publicly.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • You can use Markdown syntax to format and style the text. Also see Markdown Extra for tables, footnotes, and more.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img> <blockquote> <small> <h2> <h3> <h4> <h5> <h6> <sub> <sup> <p> <br> <strike> <table> <tr> <td> <thead> <th> <tbody> <tt> <output>
  • Syntax highlight code surrounded by the {syntaxhighlighter SPEC}...{/syntaxhighlighter} tags, where SPEC is a Syntaxhighlighter options string or "class="OPTIONS" title="the title".
  • Lines and paragraphs break automatically.

More information about formatting options

By submitting this form, you accept the Mollom privacy policy.