By quicksand on

Hello everbody,

In order to use images instead of texts in my menus, i'm trying to add span tags to links, like this : 

<li class="first active-trail"><a href="blabla"><span>MyLink</span></a>

Then with CSS, i do this :

li.active-trail a span {
display:none
}

and i give a background to a

i've tried this with no succes in my template.php

<?php
function mytheme_menu_item($link, $has_children, $menu = '', $in_active_trail = FALSE, $extra_class = NULL) {
  $class = ($menu ? 'expanded' : ($has_children ? 'collapsed' : 'leaf'));
  if (!empty($extra_class)) {
    $class .= ' '. $extra_class;
  }
  if ($in_active_trail) {
    $class .= ' active-trail';
  }
  return '<li class="'. $class .'">'. '<span>'.$link.'</span>' . $menu ."</li>\n";
}
?>

in this code, span tags are around a tags.

How can i do ?

Thanks

⋅ Categories: Drupal 6.x

Comments

dnewkerk’s picture

dnewkerk commented

You don't need a span for this. Simply set the anchor text to text-indent: -999em; (or px if you prefer) which is the preferred method for CSS image replacement. If you set overflow: hidden; as well you can avoid some cases where the browser does its dotted clicked-link thing that expands far to the left when using this method.

Here's a code snippet I wrote in another post which might help illustrate (as well as a rollover effect for the image):

ul.forum-links li.comment_edit a {
  background: url(icon_post_edit.gif) no-repeat top left;
  display: block;
  width: 42px;
  height: 20px;
  text-indent: -999em;
  overflow: hidden;
}

ul.forum-links li.comment_edit a:hover {
  background-position: 0 -20px;
}

On a separate note though, you likely need to clear the menu cache if you are adding the code you show above. But in this case I'd advise against it, as it's quite possible to avoid delving into the PHP in this case.

quicksand’s picture

quicksand commented

Thanks for this solution.

But little difficult, because i'm using Nice Menus module, i want to replace only parents items by images, but children must stay in text.

The problem : When i apply text-ident:-999em and overflow:hidden, the text disapear in the parent item and also in children items.

I think, there's no solution in CSS to reset the text-ident to normal ?

Thanks

dnewkerk’s picture

dnewkerk commented

I had a look at Nice Menus... try this, which should reset the child level of the menu. It's possible you might have to do it again if you have a third/etc level. Just follow the same pattern if that's the case.

ul.nice-menu li a {
  text-indent: -999em;
  overflow: hidden;
}

and...

/* Reset text-indent for the child menu */
ul.nice-menu li ul li a {
  text-indent: 0;
}

**Edit, saw you solved it as well :)

quicksand’s picture

quicksand commented

Okay, Solved !

Juste for the children items, i do this text-ident:0px;

Thanks

chrisjlee’s picture

chrisjlee commented

Unfortunately, text-indent doesn't work very well. it doesn't work in some browsers for cross browser compatibility.

Anyone know of a way to add a span with drupal?

EDIT: Just ended having to modify the menu-block.tpl.php file.

dnewkerk’s picture

dnewkerk commented

Text-indent works in all browsers... not sure what you're referring to. Which browser do you feel has an issue?

See: http://reference.sitepoint.com/css/text-indent