Рейтинг:  4 / 5

Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда не активна
 

В этой статье разберём как поставить картинку в пункт меню Joomla, и как совсем заменить ссылку на картинку.

Покажу на одном из реальных сайтов, копия которого находится на локальном сервере.
Место расположения сайта не имеет значения.

В Joomla 2.5 это сделать достаточно просто, по крайней мере по сравнению с предыдущей версией (J1.5).

Для примера поставим картинку  изображение для пункта меню  для пункта "Главная".

как поставить картинку для пункта меню

Перейдём в Меню -> Главное меню.
Откроем пункт "Главная".

Нам нужны "Параметры отображения ссылки". 

Как поставить картинку в пункт меню

Немного объясню, что к чему.

Описание ссылки - это тег title для ссылки.
Да, в Joomla 2.5 есть возможность указывать title для пунктов меню, говорят это неплохо сказывается на SEO.

CSS класс ссылки - здесь можете подставить собственный CSS класс, который вы придумаете для пункта. Главное, чтобы он не совпадал ни с одним классом, который уже есть в шаблоне, т.е. он должен быть уникальным.
Например "home-button-menu" - уверен на 99,9% такой класс не используется в шаблонах.

Изображение ссылки - здесь собственно и выбирается изображение для пункта меню (из папки images).

Создать заголовок - эта настройка выводит надпись для пункта меню, в нашем случае - это слово "Главная".

Выбираем изображение для пункта.
Создать заголовок оставляем как есть - т.е. "Да".
Сохраняем!

У нас получается так:

как вставить картинку в пункт меню

Картинка немного прижата к тексту, но это можно легко поправить.

Для этого переходим обратно в настройки пункта меню и придумываем CSS класс для этого пункта.
Я его уже придумал - это будет - home-button-menu
Дописываем его для пункта и сохраняем.

Теперь ссылка в пункте меню "Главная" имеет свой класс
<a class="home-button-menu">

Далее открываем CSS-файл вашего шаблона, обычно это template.css или style.css
И добавляем наш новый класс куда-нибудь в начало (или в конец), чтобы вам при необходимости, было легче его корректировать.

Примерно это будет выглядеть так:

.home-button-menu img {
padding :0 5px 0 0;
}

Мы задали стиль для изображения, на которое также действует класс home-button-menu и сделали отступ справа 5 пикселей.

В итоге у нас получилось:

как вставить картинку в пункт меню joomla 2.5

У картинки появился отступ справа.

Теперь давайте сделаем просто одну картинку, без текста.

Возьмём картинку по-больше, например такую .

Идём в настройки пункта, и выбираем её из папки images.
CSS-класс оставляем как есть.
Создать заголовок - ставим "Нет".

Сохраняем.

Получается вот так:

как вставить изображение в пункт меню

Картинка немного съезжает вниз и у пункта остаются большие отступы по бокам.

Это можно исправить двумя способами:

1. Сделать размер картинки немного меньше (подгоним по высоте, но отступы по бокам останутся)

2. Изменить CSS-стили для ссылки, находяйщейся в пункте меню.

Мы сделаем это 2-ым способом, т.е. через CSS.
Ведь для этого пункта меню и его элементов у нас есть уникальный класс home-button-menu!

Переходим в CSS-файл и немного корректируем стили.

Но сначала нужно найти стили, которые действуют на пункты меню по умолчанию.
Это можно сделать при помощи FireBug'a:

как вставить изображение в пункт меню Joomla 2.5

Впринципе, нам нужно узнать только отступы (padding).
По умолчанию на все пункты меню (на их ссылки) действует отступ: сверху 12px, снизу 8px, по бокам 42px
В вашем шаблоне может быть по другому.

Теперь мы добавляем свои стили для пункта меню "Главная", т.е. для класса home-button-menu

1. Убираем img, так как задаём стили уже непосредственно для самой ссылки.
2. Уменьшаем отступы сверху и с боков (методом подбора).

В CSS это будет выглядеть так:

.home-button-menu {
padding :7px 15px 13px 15px!important;
}

Обратите внимание, что мы добавили !important
Это сделано для того, чтобы наши новые стили имели больший приоритет перед стилями, которые уже действуют на этот пункт по-умолчанию.

На сайте это выглядит так:

как вставить в пункт меню изображение

И при наведении:

как вставить в пункт меню изображение

Теперь вместо слова "Главная" у нас выводиться только картинка.

Это во-первых, смотрится интереснее, а во-вторых, остаётся больше места для других пунктов :)

Здесь самое главное, подобрать нужные отступы, чтобы всё выглядело ровно.

Желаю успехов!

С уважением, Олег Касьянов.

X

Инструкция по планированию сайта
С чего начать создание сайта?

Инструкция по созданию сайта

  • Инструкция по созданию сайта
  • Шаблон для составления плана сайта
  • Чек-лист по этапам создания сайта

* Никакого спама. Гарантирую!