br 8eb34


search

Компонент создания меню

swКрасивое выпадающее меню можно создать с помощью скрипта, стилей CSS, а можно воспользоваться компонентом создания меню Swmenu. С его помощью можно расположить меню вертикально или горизонтально, поэкспериментировать со всеми гаммами цветов, а также многое другое.

Компонент Swmenu имеет платную с полным набором возможностей и бесплатную версии. Устанавливается, как обычно, из вкладки Расширения -> Установить/Удалить. Затем следует перейти в Компоненты -> SwMenufree, в появившемся окне компонента находятся 5 вкладок. Подробнее о них:

Menu Module SettingsswmenuВ первой вкладке указываются общие параметры для выпадающего меню. В Module Name указывается заголовок, который затем появится в менеджере модулей.

  • Menu Source Settings - здесь выбирается Menu System - эффекты показа выпадающего меню, Menu Source - выбор созданного Меню, Parent - выбор родителя
  • Style Sheet Settings - выбор способа загрузки стилей
  • Auto Menu Item Settings - настройка автоматического добавления пунктов меню
  • Cache Settings - настройки кэша пунктов меню
  • Special Effects - настройки эффектов подпунктов, где Sub Menu Open/Close Delay - скорости открытия подпунктов и Sub Menu Transparency - прозрачность подпунктов.
  • General Module Settings - основные настройки:
    • Show Module Name - показ имени модуля
    • Published - публикация (включение) swmenu
    • Active Menu - активация меню
    • Force Overlay - перекрытие других элементов
    • Sub Menu Indicator - выбор стрелок показа подпунктов
    • Auto Position Sub Menus - авто позиционирование подменю
    • Show Shadow - установка показа тени
    • Maximum Levels - максимум уровней меню (0 - все)
  • Position & Access - здесь устанавливается в какой модульной позиции установлено swmenu и доступ к нему
  • Show Menu Module on Pages - выбор страниц, компонентов и шаблонов, где будет показываться выпадающее меню

 

swmenu1Size, Position & Offsets. Эта вкладка служит для определения размеров и позиции пунктов меню и выпадающего подменю. Подробнее о настройке:

  • Menu Position and Orientation - определение alignment - положение меню и ориентация со способом открытия подпунктов.
  • Menu Item Sizes - размер пунктов (Top menu) и подпунктов (Sub menu)
  • Top Menu Offsets - смешение меню вверх и влево
  • Sub Menu Offsets - смещения подменю 1-го и 2-го уровней

 

swmenu2Colors & Backgrounds. Здесь можно поэкспериментировать с цветами и фоном пунктов меню и подменю, а также цвет шрифта и границ.

  • Background Images - выбор фонового изображения для пунктов и подпунктов меню при нажатом и начальном положении
  • Background Colors - аналогично выбор цвета фона
  • Font Colors - аналогично изменение цвета шрифта
  • Border Colors - изменение цвета рамки пунктов и подпунктов

 

swmenu3Fonts & Padding. Изменение вида шрифта и отступов внутри пунктов меню и подменю.

  • Font Family - выбор шрифта для меню и подменю
  • Top Menu Padding - отступы от краев в основном меню
  • Sub Menu Padding - отступы в подпунктах
  • Font Size - размеры шрифта в меню и подменю
  • Text Alignment - выравнивание текста в пунктах
  • Font Weight - изменение жирности шрифта в пунктах меню

 

swmenu4Borders & Effects. Здесь устанавливаются параметры для границ.

  • Border Widths - жирность границ пунктов
  • Border Styles - стиль границы для пунктов и подпунктов

Ниже в таблице представлены возможности платной версии компонента создания меню и разница между бесплатной версией.

demo

Добавить комментарий

Защитный код
Обновить

Комментарии