Создание
красивого выпадающего меню
|
Будем использовать компонент swMenuFree.4.0.RE
Для начала скачаем
и установим его через вкладку: "Установка/Удаление"
Итак компонент
установлен!
Проведем небольшую подготовительную работу, создаем "Новое меню" через
вкладку "Меню", даем ему нужное название, обзываем модуль как нужно и
переходим непосредственно в "Новое меню".
Делаем структуру для нашего выпадающего меню!
Можете использовать мои примеры для наглядности и в будущем изменить
как вам требуется!
примеры:
условные обозначения: *, ** - подкатегории
Легковой транспорт
*Легковые
** Малолитражки
* Внедорожники
* Кабриолеты
* Пикапы
* Ретро
Грузовой транспорт
* Седельные тягачи
* Бортовые
* Самосвалы
* Прицепы
* Полуприцепы
Спец Техника
* Бронированные
* Сельхозтехника
* Строительная
* Коммунальная
* Автоподъемники
** Погрузчики
** Фронтальные
** Электро
Автобусная техника
* Автобусы
** Туристические
** Городские
** Микроавтобусы
* Дома на колесах
* Караваны
Переходим в меню компонента com_swmenufree и начинаем настройку.
# Вкладка: "Настройки
модуля меню"
Заголовок модуля: Даем название модулю, любое нужное вам.
* Настройка
источника меню
Системное меню: Выюерите какой эффект вам требуется
Источник меню: Выберите "Новое меню" - то меню где создавали структуру
меню с подкатегориями.
Родитель: Оставьте как есть, т.е "TOP"
* Настройка стилей
Загрузка таблицы стилей: Оставьте как есть, т.е "Существующая таблица
стилей"
Класс модуля: можете использовать "jos" - но в css файле шаблона, нужно
прописать стиль для данного модуля. Или оставьте поле пустым!
* Авто настройка
пунктов меню
Смешанное меню: Оставьте как есть
Использование таблиц/блогов: Оставьте как есть
* Настройка кэша
Использовать кэш: Оставьте как есть
Время жизни кэша: Оставьте как есть
* Отображать модуль
меню на страницах
All - отображение на всех страницах.
None - не отображать вовсе.
* Основные настройки
модуля
Показывать заголовок: Выберите "Нет"
Опубликовать: Выберите "Да"
Активное меню: Подсветка выбранного пункта меню ссылки на которой
находитесь в данный момент.
Меню выбора: Выберите "Да"
Индикатор подменю: Отображает маленькую стрелочку напротив покатегории.
Показывать тени: если нужен эффект тени для подкатегории, то выберите
"Да".
Максимум уровней: Это уровень вложенности вашего меню swmenufree,
выберите уровень 3-5. Максимальный уровень при значении 0.
* Позиция и Доступ
Позиция модуля: Выберите ту позицию модуля где будет опубликовано
"Красивое выпадающее меню"
Порядок модуля: Позиция модуля и его отображение в списке
доступных-опубликованных модулей
Уровень доступа: "Общий"-для всех посетителей, "Участники"-только для
зарегистрированных, "Специальный"-только для суперадминистратора, т.е.
для ВАС!
# Вкладка: "Размер,
Позиция и Смещение"
* Меню -
Выравнивание и Направление
Меню - выравнивание: размещение модуля в позиции - его выравнивание.
right-выравнивание вправо left-выравнивание влево, center-выравнивание
по центру
Меню / Подменю - направление: horizontal/down-горизонтально/вниз,
vertical/right-вертикально вправо, horizontal/up-горизонтально/вверх,
vertical/left-вертикально влево. Выберите нужное!
* Меню - Установка
размера
Меню - ширина: (установите 0 для авторазмера)
Меню - высота: (установите 0 для авторазмера)
Подменю - ширина: (установите 0 для авторазмера)
Подменю - высота: (установите 0 для авторазмера)
# Вкладка: "Цвет и Фон"
Все цветовая палитра вашего шаблона находится в файле template_css.css
и что бы подогнать палитру в тон вашего шаблона, необходимо выписать
все основные цвета. Или придумать новую цветовую гамму так или иначе
подходящую вам по дизайну!
# Вкладка: "Шрифт
и Положение"
шрифты, его размер, выравнивание текста и настройки шрифтов - можно
настроить на этой вкладке! это дело сугубо индивидуальное, поэтому
поиграйтесь и поэкспериментируйте сами ))
# Вкладка: Бордюры и
Эффекты
* Ширина бордюра
Меню - внешний бордюр - ширина: Установите нужную ширину бордюра
Меню - внутренний бордюр - ширина: Установите нужную ширину бордюра
Подменю - внешний бордюр - ширина: Установите нужную ширину бордюра
Подменю - внутренний бордюр - ширина: Установите нужную ширину бордюра
* Специальные эффекты
Подменю - прозрачность: установите нужный эффект прозрачности
* Стили бордюра
Выберите нужные стили бордюра
* Специальные эффекты
Подменю - задержка открытия/закрытия: Оставьте по умолчанию 300 ms
# Не забудьте
сохранить настройки. Кнопка "Сохранить" находится в верхнем тулбаре
компонента!
Теперь переходим на
"Главную страницу сайта" и любуемся результатом!
|
|
