用图像替换菜单项


8

我正在寻找一种将菜单项显示为图像(带有翻转)而不是通常的文本链接的方法。我找到了模块菜单图标,但是顾名思义,它旨在将图标放置在链接旁边。有人有这样做的技术吗?也许我必须创建某种自定义块或面板,但是我认为也许有一种更简单的方法。

Answers:


7

您可以使用“ 菜单图标”模块来实现所需的功能-我已经做过多次了。

您只需要自定义menu_icons_css_item.tpl.php文件,以便使用CSS图像替换技术显示图像,而不是将图像定位为类似图标的背景。对于翻转功能,您使用图像图标模块上传的每个图像都需要包括菜单图像的静态和翻转版本。

这是我以前使用过的menu_icon_css_item.tpl.php文件的示例内容。这是针对Drupal 6的,因此如果您使用Drupal 7,则可能需要更新某些语法。

<?php
$base_url = $_SERVER['DOCUMENT_ROOT'];
$image_info = getimagesize($base_url.$path);
$width = $image_info[0];
$height = $image_info[1]/2;
?>

ul.links li.menu-<?php print $mlid ?> a {
  background-image: url(<?php print $path ?>);
  background-repeat: no-repeat;
  background-position: 0 0;
  height:<?php print $height?>px;
  text-align: left;
  text-indent: -9999px;
  width: <?php print $width?>px;
}

ul.links li.menu-<?php print $mlid ?> a:hover {
  background-position: 0 <?php print $height?>px;
}

在主题中创建客户menu_icons_css_item.tpl.php文件之后,您将需要删除以前由Menu Icons模块生成的CSS文件,以便它将使用此模板生成新文件。它应该在您的sites / default / files文件夹中。

当然,如果不需要站点管理员通过Drupal UI更新菜单项图像,则可以在主题内实现CSS图像替换技术,而无需菜单图标之类的帮助程序模块。


谢谢,效果很好(PS我使用Fusion Starter作为我的基本模板)
user379468 2012年

我喜欢看到人们使用Fusion!:D
sheena_d 2012年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.