By redraven on

Hi

I have been playing round with tab menus, specifically the slidingdoors technique.

http://www.alistapart.com/articles/slidingdoors2/

Everything is working fine, except when dealing with cross-browser compatiblility, IE of course!

I need to figure out how to embed a span element within the anchor element of a primary link.

Does anyone have any ideas on how to accomplish this.

I am using the menu module in 4.7 to manage the primary links.

Thanks for any advice.

⋅ Categories: Drupal 4.7.x

Comments

bjornarneson’s picture

bjornarneson commented

One option would be to use javascript to manipulate the primary links structure after it has been delivered to the client browser. I can't figure out how to post javascript snippets in these fora. See this issue for the file attachment. I'm using this code on my own site.

sangamreddi’s picture

sangamreddi commented

I contributed fancy theme in which i integrated sliding door technique and works with all the browsers.

Sunny                      
www.gleez.com | www.sandeepone.com

redraven’s picture

redraven commented

Thanks for repies,

I would prefer to avoid javascript, but if need be will resort to it.

I should have mentioned that I am implementing sliding doors technique with single image roll overs.

Here is a snip from the sliding door listapart.com article that applies to my problem.

"IE only applies the :hover pseudo class to anchor elements, nothing else. In order to change both images of the Sliding Doors technique, we would need to insert an additional element (such as a span) inside the anchor, and shift all our style rules one element inward (list item rules shift to the anchor, anchor rules shift to the span)."

Sebastiaan Brozius@drupal.org’s picture

Sebastiaan Brozius@drupal.org commented

Add the following code to your template.php-file:

function l_enh($text, $path, $attributes = array(), $query = NULL, $fragment = NULL, $absolute = FALSE, $html = FALSE) {
  if ($path == $_GET['q']) {
    if (isset($attributes['class'])) {
      $attributes['class'] .= ' active';
    }
    else {
      $attributes['class'] = 'active';
    }
  }
  return '<a href="'. check_url(url($path, $query, $fragment, $absolute)) .'"'. drupal_attributes($attributes) .'><span>'. ($html ? $text : check_plain($text)) .'</span></a>';
}

function phptemplate_menu_item_link($item, $link_item) {
  return l_enh($item['title'], $link_item['path'], isset($item['description']) ? array('title' => $item['description']) : array());
}

Works in my case...

thepaul’s picture

thepaul commented

Same exact problem in Drupal 5. The posted functions to add to template.php don't seem to work with Drupal 5. Can someone give a similar solution, but for the latest release?

salvatoreco’s picture

salvatoreco commented

I've adapted the code above for Drupal 5.1, and it works fine to me.
First of all, create a template.php file in the theme directory.
Then put the following code:

/*
* Change l() function to include "<span>"
*/

function l_span($text, $path, $attributes = array(), $query = NULL, $fragment = NULL, $absolute = FALSE, $html = FALSE) {
  if ($path == $_GET['q']) {
    if (isset($attributes['class'])) {
      $attributes['class'] .= ' active';
    }
    else {
      $attributes['class'] = 'active';
    }
  }
  return '<a href="'. check_url(url($path, $query, $fragment, $absolute)) .'"'. drupal_attributes($attributes) .'><span>'. ($html ? $text : check_plain($text)) .'</span></a>';
} 


/*
* Make theme for primary links with l_span() function
*/

function phptemplate_prilinks($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;
      }

      // 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_span($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;
}


You can see I've changed the l() function in l_span() function in order to provide a span class within the a anchor.
Then I've changed the primary links rendering in order to use l_span() function instead of the classic l() function.
As soon as possible I'll publish the site link where you can find the results.
Hope being useful (and sorry for my bad English), bye!

martinduys’s picture

martinduys commented

How would I do exactly this in Drupal7?