Красивое выпадающее меню можно создать с помощью скрипта, стилей CSS, а можно воспользоваться компонентом создания меню Swmenu. С его помощью можно расположить меню вертикально или горизонтально, поэкспериментировать со всеми гаммами цветов, а также многое другое.
Компонент Swmenu имеет платную с полным набором возможностей и бесплатную версии. Устанавливается, как обычно, из вкладки Расширения -> Установить/Удалить. Затем следует перейти в Компоненты -> SwMenufree, в появившемся окне компонента находятся 5 вкладок. Подробнее о них:
Menu Module Settings. 
В первой вкладке указываются общие параметры для выпадающего меню. В 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 - выбор страниц, компонентов и шаблонов, где будет показываться выпадающее меню
Size, Position & Offsets. Эта вкладка служит для определения размеров и позиции пунктов меню и выпадающего подменю. Подробнее о настройке:
- Menu Position and Orientation - определение alignment - положение меню и ориентация со способом открытия подпунктов.
- Menu Item Sizes - размер пунктов (Top menu) и подпунктов (Sub menu)
- Top Menu Offsets - смешение меню вверх и влево
- Sub Menu Offsets - смещения подменю 1-го и 2-го уровней
Colors & Backgrounds. Здесь можно поэкспериментировать с цветами и фоном пунктов меню и подменю, а также цвет шрифта и границ.
- Background Images - выбор фонового изображения для пунктов и подпунктов меню при нажатом и начальном положении
- Background Colors - аналогично выбор цвета фона
- Font Colors - аналогично изменение цвета шрифта
- Border Colors - изменение цвета рамки пунктов и подпунктов
Fonts & Padding. Изменение вида шрифта и отступов внутри пунктов меню и подменю.
- Font Family - выбор шрифта для меню и подменю
- Top Menu Padding - отступы от краев в основном меню
- Sub Menu Padding - отступы в подпунктах
- Font Size - размеры шрифта в меню и подменю
- Text Alignment - выравнивание текста в пунктах
- Font Weight - изменение жирности шрифта в пунктах меню
Borders & Effects. Здесь устанавливаются параметры для границ.
- Border Widths - жирность границ пунктов
- Border Styles - стиль границы для пунктов и подпунктов
Ниже в таблице представлены возможности платной версии компонента создания меню и разница между бесплатной версией.
