Inserting a <span> element inside the anchor element of a primary link - 4.7
redraven - March 9, 2006 - 18:59
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.
DOM script
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.
checkout my theme
I contributed fancy theme in which i integrated sliding door technique and works with all the browsers.
Sunny
www.gleez.com | www.sandeepone.com
needed for rollovers
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)."
Solution
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...
Same issue - Drupal 5
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?
I've adapted the code above
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!