Joomla: Меню из изображений(v1.5)

UPD: Новая статья в тему — Работа с меню в Joomla

Очень часто в меню кроме текста приходится использовать еще и изображения, например, пояснительные (о том, как добавить картинки к меню). Также очень часто нужно просто сделать меню из картинок, чтобы были только картинки без текста. Решение этой проблемы для Joomla 1.0 (решение здесь) я придумал, но вот для Joomla 1.5 оно подходило не охотно. Сейчас я нашел еще более просто решение даже без написания лишнего кода и установки сторонних компонентов.

Итак, добавляем картинку к меню так, как мы это обычно делаем:

Теперь настраиваем отображение меню в свойствах модуля, чтобы картинки показывались, а текст — нет:

Тем не менее, после выполнения всех этих манипуляций отображение меню может вести себя самым странным образом, особенно в браузере Internet Explorer. Решаем эту проблемы исправлением CSS стиле отображения меню. Добавляем в файл шаблона следующие строки:

.menu {
border:                       0px solid red;
list-style-type:            none;
padding-left:               0px;
margin-left:               0px;
margin-top:                   2px;
width:                       200px;
}

.menu img {
border:                    0px;
padding-top:               0px;
float:                       left;
}

После таких нехитрых манипуляций Joomla 1.5 тоже умеет отображать красивое графическое меню

Пока думаем, куда бы прикрутить данный мод, можно посмотреть ролик, в котором прикрутили мод к танчикам!

http://www.youtube.com/watch?v=kORqtCPjEEk

Если Вам понравилась статья - добавьте ее в свою социальную сеть. Спасибо!

Похожие материалы:

Demyan

Что-то при таком раскладе текст пунктов остаётся на месте. Вы что-то скрыли?

http://barmin-aleksandr.ru/ Александр Бармин

Нет, ничего не скрыл, все требуемые шаги подробно описаны =)

Алексей

У меня тоже не получается. Рисунок без ссылки, наименование пунктов остается
http://barmin-aleksandr.ru/ Александр Бармин

«Ссылка на значок меню» стоит в положении Да?
Алексей

в версии 1.5.14 не работало, в 1.5.15 — заработало
Серж

У меня на 1.5.15 не работает (Рисунок без ссылки, наименование пунктов остается),
- но я это делал в topmenu, — это вообще имеет значение?

http://barmin-aleksandr.ru/ Александр Бармин

В целом, без разницы, в каком именно меню Вы это делаете.

Серж

- в Меню пользователя

Серж

проверил, — в модуле главное меню — все работает !!!, но почему в пользовательском не работало?, ведь это один тип модуля(mod_mainmenu)?
Извините за неграмотность, — только учусь,
- не подскажете какую-то статью или как сделать в шаблоне для joomla “rollover” меню, — точнее не понимаю как привязывать к нему ссылки из joomla

http://barmin-aleksandr.ru/ Александр Бармин

Насколько я понимаю, в Вашем случае это связано со стилями у главного меню и меню пользователя.
Серж

Подскажите, а как вообще прописываются в шаблон динамические ссылки меню Joomla?

http://barmin-aleksandr.ru/ Александр Бармин

Что Вы имеете в виду под динамическими ссылками? Как прописать позицию в шаблоне?

Серж

Например для своего меню из картинок созданного в шаблоне, чтобы для картинки в шаблоне прописать вывод ссылки, которую потом можно добавлять в joomla.

http://barmin-aleksandr.ru/ Александр Бармин

Нет, меню целиком выводится одним модулем Joomla, поэтому в Вашем случае совместить шаблон и модуль в таком виде не получится.

Paul T

И все же как сделать картинку ссылкой? Не работает в главном меню (1.5.21), картинка появляется но ссылкой не становится, возможно нужно править шаблон вывода пунктов меню? Также не исчезает текст ссылки. Возможно ли разобраться с этой ситуацией? Ответте пожалуйста, буду рад помощи, ведь проблема всеобщая! Если найдем решение, запишу видеоурок, думаю будет полезный материал.
Paul T

РЕШЕНИЕ НАЙДЕНО! У кого изображения ссылкой не становится и не исчезает текст пункта меню — то нужно выставить стиль меню — СПИСОК, в параметрах модуля и переоформить CSS если нужно, на остальных стилях меню работать не будет! =)
Taras

Спасибо большое. Я тока учусь и уменя всё получилось. Тока есть несколько вопросов. Как сделать отступ между картинками? И как убрать стандартные стрелочки с подчёркнутой линией? Заранее очень благодарен

http://barmin-aleksandr.ru/ Александр Бармин

Это можно сделать в таблице каскадных стилей. Мы уже добавили туда

.menu img {
border: 0px;
padding-top: 0px;
float: left;
}

Между {} стоит еще добавить padding-bottom: 3px; для отступа между картинками в 3 пикселя.

А какие стрелочки Вы имеете в виду?

Сергей

Александр, подскажите как сделать галерею как на вашем сайте Арский камень? Именно что бы на странице галерея(проекты) изображения выводились в альбомах,
а не все в одну кучу) Дилетанский вопрос возможно, но с 3-х дневным стажем
не нашёл пока ответа))

http://barmin-aleksandr.ru/ Александр Бармин

Сергей, вывод галерей на сайте Арского осуществляется с помощью компонента DatsoGallery. Для каждого альбома создана отдельная категория, в нее загружены изображения.

Варианты загрузки изображений в галерею

Сергей

Спасибо большое, Александр за столь скорый ответ! Сейчас попробую найти его и разобраться.
Сергей

Александр, я скачал версию datsogallery1.3.6.2. Не получается установить как компанент, выдаёт ошибку: «Не найден XML-файл установки Joomla!» Прежнию галерею удалил. Версия Joomla 1.0 Если не трудно подскажите как установить?

http://barmin-aleksandr.ru/ Александр Бармин

Попробуйте использовать версию DatsoGallery 1.6.2 с официального сайта галереи.

Скачать можно здесь:
http://www.datso.fr/ru/free.html

Сергей

установилась, но со шрифтами в настройках админа проблема-одни квадраты)) может шрифты подгрузить нужно. только какие и куда и как…

http://barmin-aleksandr.ru/ Александр Бармин

Скорее всего, дело в кодировке символов. Стоит попробовать в корне сайта создать файл .htaccess (он там уже может быть) со следующим текстом

AddDefaultCharset UTF-8

Сергей

А где этот корень? На форумах пишут в менеджере файлов, но я его не могу найти, Он в админе joomla? Боюсь что найдя его, не будет этого файла, тогда встанет вопрос»как его создать»…
Сергей

во чайник!) нашёл)
Сергей

файл нашёл, открыл в блокноте, через поиск в правке, не нашёл этого текста среди всего, что там есть. Куда именно его вписать нужно?

http://barmin-aleksandr.ru/ Александр Бармин

В самое начало файла впишите.

Сергей

Вставил в конце файла этот текст, но не помогло

http://barmin-aleksandr.ru/ Александр Бармин

Попробуйте установить версию 1.7 или 1.6 отсюда:

http://joomlaforum.ru/index.php/topic,71112.0.html

Сергей

Установил DatsoGallery-v1.7.1. Заработало…..
Сергей

Александр, а возможно категории(альбомы) переместить в меню left, как подкатигорию, но чтобы в главном горезонтальном меню не отображалjсь нозвание?Вообщем что бы всегда были видны альбомы слева/ Допустим нажал я на какой ниб. альбом, но как меню видел слева другие альбомы и мог к ним перейти?

http://barmin-aleksandr.ru/ Александр Бармин

Думаю, да.

Нужно только создать в левом меню соответствующие ссылки на альбомы. Их можно скопировать из адресной строки и создать в меню пункты типа Ссылка-Url.

Сергей

Хорошо разбирёмся… А вот что то слово «категории» над эскизами убрать не могу, да и ответ так и не нашёл в инете. В настройках Configuration вроде всё перетыкал уже, но что то так и висит эта надпись. И Пространство пустое между категориями(эскизами) до «шапки» сайта какое-то. Это особенности шаблона, который я выбрал или в чём то другом причина? Я тут уже весь курс создания сайта наверное пройду…))

http://barmin-aleksandr.ru/ Александр Бармин

Я тоже не нашел решения этой проблемы и попросту переделал шаблон вывода, который находится в /components/com_datsogallery/datsogallery.php

Заодно, в него же добавил и скрипт GrayBox.

Сергей

Здраствуй, Алексндр! На своём сйте установил галерею MorfeoShow.В позиции left сделал ссылки из картинок(через модуль extended) на статьи с галереями. Проблема в том, что при переходе по ссылки(картинке в поз-ии left) открывается статья со вставленной галереей, но при этом пропадают ссылки слева и главное горезонтальное меню. Как сделать что бы оба меню не пропадали?

http://barmin-aleksandr.ru/ Александр Бармин

А у Вас модуль на всех страницах отображается или только на некоторых? Если модуль отображается не на всех страницах, проследите, чтобы на нужных он был включен.

Сергей

Четсно говоря сам не понял как это у меня получилось, но подменю с картинками в позиции left ночью нстроил. Теперь оно кажет при переходе на другие материалы, но кнопки главного(горез.) меню не отображаются при этом. Например В остовном меню жму на «Мои проекты» появляется слева подменю с сылками «Проект 1″, «Проект 2″, «Проект 3″ и т.д. При нажатие на кнопку «Проект 1″ всё в поряде, а при нажатии на остальные, кнопки главного не отображаются. И ещё одна проблема: В 4-х галиреях изображения присутствуют, а с 5-ой уже не отображаются( в админке тоже) Все галиреи перебрал уже. Просто MorfeoShow и ignitegallery более подходят мне, но при исползовании обоих таже самая беда. Может из за размеров изображений или места на локальном диске не хватает?
Сергей

Извиняюсь, Александр! С меню разобрался, всё оказалось очень просто! Сразу Вас не понял, потому что мне казалось что это я уже пробовал делать. Большое спасибо за помощь! Осталось разобраться лишь с проблемой отображения изображений и всё…….

http://barmin-aleksandr.ru/ Александр Бармин

Поздравляю!

shawn

здравствуйте, перезалейте пожалуйста 1ю картинку в теме.. там где «добавляем картинку к меню так, как мы это обычно делаем»… заранее спасибо
Grin

Доброго дня! Подскажите, как сделать чтобы картинка менялась при наведении мыши?

Аноним

Добрый день.

Самый просто вариант — сделать это средствами CSS, а именно воспользоваться свойством :hover.
Более сложный вариант — модифицировать стандартный модуль меню, чтобы он поддерживал смену картинок при наведении.

http://thetwisters.ru Ved Mochka

Здравствуйте. Во-первых ОГРОМНЕЙШЕЕ спасибо за статью. Помогла, прям ух!!!!
Проблема осталась в Internet Explorer. Добавила строки отображения меню — не помогло. картинки обрезаются по краю центральной части (объяснять сложно лучше вот: thetwisters.ru) Плюс высвечивается фон PNG-шных картинок меню, которого там, естественно нет как с этим бороться — просто не представляю ((((
В опере и мозиле все нормально.
Помогите пожалуйста. Это сайт в подарок папе, и дарить уже нужно срочно, а это предпоследний косяк ((((

Аноним

Да, IE не дружит с прозрачностью, думаю, стоит начать поиск здесь. По поводу обрезки картинок — не заметил ничего необычного, стоит посмотреть на CSS свойство overflow.