web-dev-qa-db-fra.com

Remplacement des éléments de menu par des images

Je cherche un moyen d'afficher les éléments d'un menu sous forme d'images (avec survol) plutôt que les liens de texte habituels. J'ai trouvé le module Icônes de men , mais comme son nom l'indique, il est conçu pour placer l'icône à côté du lien. Quelqu'un a-t-il une technique pour le faire? Je dois peut-être créer une sorte de bloc ou de panneau personnalisé, mais je pensais qu'il y avait peut-être un moyen plus simple.

routesmediathemingnavigation
8
user379468

Vous pouvez utiliser le module Icônes de menu pour implémenter la fonctionnalité que vous recherchez - je l'ai fait plusieurs fois.

Il vous suffit de personnaliser le fichier menu_icons_css_item.tpl.php pour que l'image s'affiche en utilisant la technique CSS image replacement plutôt que de positionner l'image comme arrière-plan de type icône. Pour la fonctionnalité de survol, chaque image que vous téléchargez avec le module d'icône d'image devrait inclure les versions statiques et de survol de l'image du menu.

Voici un exemple de contenu d'un fichier menu_icon_css_item.tpl.php que j'ai utilisé auparavant. C'est pour Drupal 6, donc une partie de la syntaxe devra peut-être être mise à jour si vous utilisez 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;
}

Après avoir créé un fichier menu_icons_css_item.tpl.php client dans votre thème, vous devrez supprimer le fichier CSS que le module Menu Icons a généré précédemment, afin qu'il génère un nouveau fichier à l'aide de ce modèle. Il doit se trouver dans votre dossier sites/default/files.

Bien sûr, si vous n'avez pas besoin d'autoriser les administrateurs du site à mettre à jour les images des éléments de menu via l'interface utilisateur Drupal, vous pouvez simplement implémenter la technique de remplacement d'image CSS dans votre thème, sans avoir besoin d'un module d'aide comme Icônes de menu.

7
sheena_d