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

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

Сегодня работал над очередным сайтом на CMS Joomla. Одна из задач была вместо обычного текстового меню поставить картинки соответствующие этим разделам. Я пишу этот пост, потому что я столкнулся с этой проблемой и в Интернете не смог найти на нее ответа. Возможно плохо искал. Но у меня такая натура, я лучше покопаюсь сам, чем буду искать решение в Интернете. Больше знать буду. Немного почитав форумы я пришел к выводу, что через админку этого не решить. Пришлось лезть в код. Сначала поговорим о теоретической стороне вопроса.

Итак. У нас есть уже реализованное меню стандартными модулями joomla. Каждый из пунктов меню отдельный элемент, который имеет свой класс. Обычно этот класс называется itemN, где N – порядковое число нашего меню. Теперь необходимо каждый пункт меню описать в файле стилей и для каждого стиля задать ширину, высоту, позицию и, конечно, картинку, которая будет фоном. Конечно есть очень много расширений joomla, но они здесь не подходят. Нужно Теперь что делать с текстом? Обычно текст заключается в тег span, которому так же присуждается какой-то класс. Обычно для всех пунктов меню этот класс один. Теперь просто в этом классе делаем текст невидимым.

Теперь рассмотрим практически.

У нас есть вот такая структура уже реализованного меню:

1<ul class="art-menu">

2<li id="current" class="active item1">

3<a href="#" class="active"><span class="t">Главная</span></a></li>

4<li class="item53"><a href="/kypit-igry. html"><span class="t">Купить игру</span></a></li>

5<li class="item54"><a href="/kontakti. html"><span class="t">Контакты</span></a></li>

6<li class="item62"><a href="/chavo. html"><span class="t">Чаво</span></a></li>

7<li class="item63"><a href="/akciya. html"><span class="t">Акция</span></a></li>

8</ul>

Стили для каждого пункта меня, которые нам понадобятся следующие:

.item1

.item53

.item54

.item62

.item63

Теперь для каждого стиля пишем отдельный код в файле стилей. Для примера я выберу только первый стиль. item1. Описание стиля будет таким:

1 li. item1{

2 position:relative;

3 width:85px;

4 height:25px;

5 background:url(../images/glavnaya. png) no-repeat 0px 5px;

6 margin:0 7px 0 7px;

7 }

Из структуры меню мы видим, что стиль для каждого пункта меню, текст которого заключен в тег span является. t. Следовательно для этого стиля, только для тех случаем где он используется в теге span делаем текст не видимым:

1 span. t {

2 position:relative;

3 visibility:hidden;

4 }

Вот и все. Теперь можно спокойно обойтись без всяких дополнительных модулей и плагинов Joomla,


Карта сайта


Информационный сайт Webavtocat.ru