Mengganti item menu dengan gambar

8

Saya mencari cara untuk menampilkan item menu sebagai gambar (dengan rollover) daripada tautan teks biasa. Saya menemukan Ikon Menu modul , tetapi seperti namanya, itu dirancang untuk menempatkan ikon di sebelah tautan. Adakah yang punya teknik untuk melakukan ini? Mungkin saya harus membuat semacam blok atau panel khusus, tetapi saya pikir mungkin ada cara yang lebih mudah.

pengguna379468
sumber

Jawaban:

7

Anda dapat menggunakan modul Menu Ikon untuk mengimplementasikan fungsi yang Anda cari - Saya telah melakukan ini beberapa kali.

Anda hanya perlu menyesuaikan file menu_icons_css_item.tpl.php sehingga gambar ditampilkan menggunakan teknik penggantian gambar CSS daripada menempatkan gambar sebagai latar belakang seperti ikon. Untuk fungsionalitas roll-over, setiap gambar yang Anda unggah dengan modul ikon gambar harus menyertakan versi statis dan roll-over dari gambar menu.

Berikut adalah contoh konten file menu_icon_css_item.tpl.php yang pernah saya gunakan sebelumnya. Ini untuk Drupal 6, jadi beberapa sintaks mungkin perlu diperbarui jika Anda menggunakan 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;
}

Setelah Anda membuat file menu_icons_css_item.tpl.php pelanggan dalam tema Anda, Anda harus menghapus file CSS yang dihasilkan modul Ikon Menu sebelumnya, sehingga akan menghasilkan file baru menggunakan templat ini. Itu harus di folder situs / default / file Anda.

Tentu saja, jika Anda tidak perlu mengizinkan admin situs untuk memperbarui gambar item menu melalui UI Drupal, Anda bisa menerapkan teknik penggantian gambar CSS dalam tema Anda, tanpa perlu modul pembantu seperti Ikon Menu.

sheena_d
sumber
Terima kasih, berfungsi dengan baik (PS Saya menggunakan Fusion Starter sebagai template dasar saya)
user379468
Saya suka melihat orang menggunakan Fusion! : D
sheena_d