web-dev-qa-db-ja.com

メニュー項目を画像に置き換える

通常のテキストリンクではなく、メニュー項目を画像（ロールオーバー付き）として表示する方法を探しています。私はモジュール Menu Icons を見つけましたが、その名前が示すように、リンクの横にアイコンを配置するように設計されています。誰かがこれを行うためのテクニックを持っていますか？たぶん、私はある種のカスタムブロックまたはパネルを作成する必要がありますが、もっと簡単な方法があるのではないかと思いました。

routesmediathemingnavigation
8
user379468

Menu Icons モジュールを使用して、探している機能を実装できます。これは複数回行っています。

画像をアイコンのような背景として配置するのではなく、 CSS画像置換 テクニックを使用して画像が表示されるように、menu_icons_css_item.tpl.phpファイルをカスタマイズするだけです。ロールオーバー機能の場合、画像アイコンモジュールを使用してアップロードする各画像には、メニュー画像の静的バージョンとロールオーバーバージョンを含める必要があります。

これは、以前使用した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ファイルを作成した後、以前にメニューアイコンモジュールが生成したCSSファイルを削除して、このテンプレートを使用して新しいファイルを生成する必要があります。これは、sites/default/filesフォルダーにあります。

もちろん、サイト管理者がDrupal UIを介してメニュー項目の画像を更新することを許可する必要がない場合は、次のようなヘルパーモジュールを必要とせずに、テーマ内にCSS画像の置換手法を実装できます。メニューアイコン。

7
sheena_d