Thay thế các mục menu bằng hình ảnh


8

Tôi đang tìm cách để hiển thị một mục menu dưới dạng hình ảnh (với cuộn qua) thay vì các liên kết văn bản thông thường. Tôi đã tìm thấy các biểu tượng Menu mô-đun , nhưng như tên của nó, nó được thiết kế để đặt biểu tượng bên cạnh liên kết. Có ai có một kỹ thuật để làm điều này? Có lẽ tôi phải tạo ra một số loại khối hoặc bảng tùy chỉnh, nhưng tôi nghĩ có lẽ có một cách dễ dàng hơn.

Câu trả lời:


7

Bạn có thể sử dụng mô-đun Biểu tượng Menu để thực hiện chức năng bạn đang tìm kiếm - Tôi đã thực hiện việc này nhiều lần.

Bạn chỉ cần tùy chỉnh tệp menu_icons_css_item.tpl.php để hình ảnh được hiển thị bằng kỹ thuật thay thế hình ảnh CSS thay vì định vị hình ảnh dưới dạng nền giống như biểu tượng. Đối với chức năng cuộn qua, mỗi hình ảnh bạn tải lên với mô-đun biểu tượng hình ảnh sẽ cần bao gồm các phiên bản tĩnh và cuộn của hình ảnh menu.

Đây là nội dung mẫu của tệp menu_icon_css_item.tpl.php tôi đã sử dụng trước đây. Đây là dành cho Drupal 6, vì vậy một số cú pháp có thể cần được cập nhật nếu bạn đang sử dụng 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;
}

Sau khi bạn đã tạo một tệp menu_icons_css_item.tpl.php của khách hàng trong chủ đề của mình, bạn sẽ cần xóa tệp CSS mà mô-đun Biểu tượng Menu đã tạo trước đó để nó sẽ tạo một tệp mới bằng mẫu này. Nó nên ở trong thư mục trang web / mặc định / tập tin của bạn.

Tất nhiên, nếu bạn không cần cho phép quản trị viên trang web cập nhật hình ảnh mục menu thông qua UI Drupal, bạn có thể thực hiện kỹ thuật thay thế hình ảnh CSS trong chủ đề của mình mà không cần mô-đun trợ giúp như Biểu tượng Menu.


Cảm ơn, hoạt động rất tốt (PS Tôi đang sử dụng Fusion Starter làm mẫu cơ sở của mình)
user379468

Tôi thích nhìn thấy mọi người sử dụng Fusion! : D
sheena_d
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.