Как сделать выпадающее меню?

Горизонтальное выпадающее меню

Горизонтальное выпадающее меню используется для упорядочения структуры навигации по сайту. Оптимальное количество уровней вложения — один-два. Чем меньше уровней вложений, тем легче посетителю сайта найти нужную информацию. Как создать обычное горизонтальное меню, подробно изложено в этом уроке.

Как сделать горизонтальное выпадающее меню

  • 1. HTML-разметка и базовые стили для выпадающего меню с одним уровнем вложения
  • 2. 3D выпадающее меню
  • 3. Разворачивающееся выпадающее меню с логотипом
  • 4. Увеличивающееся выпадающее меню
  • 5. Подъезжающее выпадающее меню

1. HTML-разметка и базовые стили для выпадающего меню с одним уровнем вложения

HTML-разметка горизонтального выпадающего меню отличается от обычного меню тем, что к нужному элементу списка <li> добавляется вложенный список <ul> или <оl>.

Для позиционирования вложенного меню относительно основного меню объявляются следующие стили:
— для элемента списка, в который вложен выпадающий список: li {position: relative;};
— для выпадающего меню ul {position: absolute;}, а также значения left и top.

Для наглядности и удобства форматирования добавим основному меню класс topmenu, выпадающему — submenu.

See the Pen MaObbz by Elena Nazarova (@nazarelen) on CodePen.

Способ 1. {display: none;}

Способ 2. {visibility: hidden;}

Меню скрывается с помощью .submenu {visibility: hidden;}, показывается — .topmenu li:hover .submenu {visibility: visible;}.

Способ 3. {opacity: 0;}

Способ 4. {transform: scaleY(0);}

Способ 5. С помощью jQuery

$(«.five li ul»).hide(); // скрываем выпадающее меню $(«.five li:has(‘.submenu’)»).hover( function(){ $(«.five li ul»).stop().fadeToggle(300);} /* отбираем элемент списка, который содержит элемент с классом .submenu и добавляем ему функцию при наведении, которая показывает и скрывает выпадающее меню */ );

2. 3D выпадающее меню

Интересные эффекты можно создавать с помощью CSS3-трансформаций, например, заставить меню появляться из глубины экрана.

See the Pen OyjVJZ by Elena Nazarova (@nazarelen) on CodePen.

<nav> <ul class=»topmenu»> <li><a href=»»>Home</a></li> <li><a href=»»>Shop</a></li> <li><a href=»» class=»down»>Blog</a> <ul class=»submenu»> <li><a href=»»>Category</a></li> <li><a href=»»>Author</a></li> <li><a href=»»>Archive</a></li> <li><a href=»»>Tags</a></li> </ul> </li> <li><a href=»» class=»down»>Portfolio</a> <ul class=»submenu»> <li><a href=»»>Category</a></li> <li><a href=»»>Author</a></li> <li><a href=»»>Archive</a></li> <li><a href=»»>Tags</a></li> </ul> </li> <li><a href=»»>Contact</a></li> </ul> </nav> * { box-sizing: border-box; } body { margin: 0; background: radial-gradient(#BFD6E2 1px, rgba(255,255,255,0) 2px); background-size: 10px 10px; } nav ul { list-style: none; margin: 0; padding: 0; } nav a { display: block; text-decoration: none; outline: none; transition: .4s ease-in-out; } .topmenu { backface-visibility: hidden; background: rgba(255,255,255,.8); } .topmenu > li { display: inline-block; position: relative; } .topmenu > li > a { font-family: ‘Exo 2’, sans-serif; height: 70px; line-height: 70px; padding: 0 30px; font-weight: bold; color: #003559; text-transform: uppercase; } .down:after { content: «\f107»; margin-left: 8px; font-family: FontAwesome; } .topmenu li a:hover { color: #E6855F; } .submenu { background: white; border: 2px solid #003559; position: absolute; left: 0; visibility: hidden; opacity: 0; z-index: 5; width: 150px; transform: perspective(600px) rotateX(-90deg); transform-origin: 0% 0%; transition: .6s ease-in-out; } .topmenu > li:hover .submenu{ visibility: visible; opacity: 1; transform: perspective(600px) rotateX(0deg); } .submenu li a { color: #7f7f7f; font-size: 13px; line-height: 36px; padding: 0 25px; font-family: ‘Kurale’, serif; }

3. Разворачивающееся выпадающее меню с логотипом

В этом примере в верхнем разделе страницы расположены логотип и навигация по сайту. В качестве логотипа может быть картинка или текст. Выпадающее меню постепенно разворачивается из-под элемента верхнего списка с помощью функции CSS3-трансформации.

See the Pen vXBBaa by Elena (@html5book) on CodePen.

<header> <a href=»» class=»logo»>Лого</a> <nav> <ul class=»topmenu»> <li><a href=»»>Главная</a></li> <li><a href=»» class=»submenu-link»>О нас</a> <ul class=»submenu»> <li><a href=»»>Производство</a></li> <li><a href=»»>Магазин</a></li> <li><a href=»»>Сервис</a></li> </ul> </li> <li><a href=»»>Проекты</a></li> <li><a href=»»>Контакты</a></li> </ul> </nav> </header> * { box-sizing: border-box; } body { margin: 0; background: #f2f2f2; } header { background: white; text-align: center; } header a { text-decoration: none; outline: none; display: block; transition: .3s ease-in-out; } .logo { color: #D5B45B; font-family: ‘Playfair Display’, serif; font-size: 2.5em; padding: 20px 0; } nav { display: table; margin: 0 auto; } nav ul { list-style: none; margin: 0; padding: 0; } .topmenu:after { content: «»; display: table; clear: both; } .topmenu > li { width: 25%; float: left; position: relative; font-family: ‘Open Sans’, sans-serif; } .topmenu > li > a { text-transform: uppercase; font-size: 14px; font-weight: bold; color: #404040; padding: 15px 30px; } .topmenu li a:hover { color: #D5B45B; } .submenu-link:after { content: «\f107»; font-family: «FontAwesome»; color: inherit; margin-left: 10px; } .submenu { background: #273037; position: absolute; left: 0; top: 100%; z-index: 5; width: 180px; opacity: 0; transform: scaleY(0); transform-origin: 0 0; transition: .5s ease-in-out; } .submenu a { color: white; text-align: left; padding: 12px 15px; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.1); } .submenu li:last-child a { border-bottom: none; } .topmenu > li:hover .submenu { opacity: 1; transform: scaleY(1); }

4. Увеличивающееся выпадающее меню

See the Pen aNbGKv by Elena Nazarova (@nazarelen) on CodePen.

<nav> <ul class=»topmenu»> <li><a href=»»>Home</a></li> <li><a href=»»>Shop</a></li> <li><a href=»»>Blog</a> <ul class=»submenu»> <li><a href=»»>Category</a></li> <li><a href=»»>Author</a></li> <li><a href=»»>Archive</a></li> <li><a href=»»>Tags</a></li> </ul> </li> <li><a href=»»>Portfolio</a> <ul class=»submenu»> <li><a href=»»>Category</a></li> <li><a href=»»>Author</a></li> <li><a href=»»>Archive</a></li> <li><a href=»»>Tags</a></li> </ul> </li> <li><a href=»»>Contact</a></li> </ul> </nav> * { box-sizing: border-box; } body { margin: 0; background: url(https://html5book.ru/wp-content/uploads/2015/10/background54.png) } nav { background: white; } nav ul { list-style: none; margin: 0; padding: 0; } nav a { text-decoration: none; outline: none; display: block; transition: .4s ease-in-out; } .topmenu { text-align: center; padding: 10px 0; } .topmenu > li { display: inline-block; position: relative; } .topmenu > li:after { content: «»; position: absolute; right: 0; width: 1px; height: 12px; background: #d2d2d2; top: 16px; box-shadow: 4px -2px 0 #d2d2d2; transform: rotate(30deg); } .topmenu > li:last-child:after { background: none; box-shadow: none; } .topmenu > li > a { padding: 12px 26px; color: #767676; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; font-family: ‘Exo 2’, sans-serif; } .topmenu li a:hover { color: #c0a97a; } .submenu { position: absolute; left: 50%; top: 100%; width: 210px; margin-left: -105px; background: #fafafa; border: 1px solid #ededed; z-index: 5; visibility: hidden; opacity: 0; transform: scale(.8); transition: .4s ease-in-out; } .submenu li a { padding: 10px 0; margin: 0 10px; border-bottom: 1px solid #efefef; font-size: 12px; color: #484848; font-family: ‘Kurale’, serif; } .topmenu > li:hover .submenu { visibility: visible; opacity: 1; transform: scale(1); }

5. Подъезжающее выпадающее меню

Горизонтальное меню с мини-анимацией: при наведении на ссылки верхнего меню появляется маленький кружок, который также сопровождает появление выпадающего меню.

See the Pen MpqypG by Elena Nazarova (@nazarelen) on CodePen.

<nav> <ul class=»topmenu»> <li><a href=»»>Home</a></li> <li><a href=»»>Shop</a></li> <li><a href=»» class=»down»>Blog</a> <ul class=»submenu»> <li><a href=»»>Category</a></li> <li><a href=»»>Author</a></li> <li><a href=»»>Archive</a></li> <li><a href=»»>Tags</a></li> </ul> </li> <li><a href=»» class=»down»>Portfolio</a> <ul class=»submenu»> <li><a href=»»>Category</a></li> <li><a href=»»>Author</a></li> <li><a href=»»>Archive</a></li> <li><a href=»»>Tags</a></li> </ul> </li> <li><a href=»»>Contact</a></li> </ul> </nav> @import url(‘https://fonts.googleapis.com/css?family=Kaushan+Script|Libre+Baskerville’); body { margin: 0; background-image: url(https://html5book.ru/wp-content/uploads/2017/03/dulcineia-dias-195000.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; height: 100vh; position: relative; } body:before { content: «»; position: absolute; left: 0; bottom: 0; height: 100%; width: 100%; background: linear-gradient(45deg, rgba(0,0,0,0), rgba(255,255,255,.8)); } nav { text-align: center; padding: 40px 0 0; } nav ul { list-style: none; margin: 0; padding: 0; } nav a { text-decoration: none; display: block; color: #222; } .topmenu > li { display: inline-block; position: relative; } .topmenu > li > a { position: relative; padding: 10px 15px; font-family: ‘Kaushan Script’, cursive; font-size: 1.5em; line-height: 1; letter-spacing: 3px; } .topmenu > li > a:before { content: «»; position: absolute; z-index: 5; left: 50%; top: 100%; width: 10px; height: 10px; background: white; border-radius: 50%; transform: translate(-50%, 20px); opacity: 0; transition: .3s; } .topmenu li:hover a:before { transform: translate(-50%, 0); opacity: 1; } .submenu { position: absolute; z-index: 4; left: 50%; top: 100%; width: 150px; padding: 15px 0 15px; margin-top: 5px; background: white; border-radius: 5px; box-shadow: 0 0 30px rgba(0,0,0,.2); box-sizing: border-box; visibility: hidden; opacity: 0; transform: translate(-50%, 20px); transition: .3s; } .topmenu > li:hover .submenu { visibility: visible; opacity: 1; transform: translate(-50%, 0); } .submenu a { font-family: ‘Libre Baskerville’, serif; font-size: 11px; letter-spacing: 1px; padding: 5px 10px; transition: .3s linear; } .submenu a:hover {background: #e8e8e8;}

Как сделать — всплывающее меню при наведении

×

КАК Сделать

Главная

Меню

Панель значков Значок меню Аккордеон Вкладки Вертикальные вкладки Заголовки вкладок Вкладки полной страницы Вверх Навигация Отзывчивый Topnav Панель поиска Исправлена ​​боковая панель Боковая навигация Полноэкранная навигация Меню Off-Canvas Наведение с помощью кнопок Меню горизонтальной прокрутки Вертикальное меню Нижняя навигация Отзывчивый снимок Nav Исправлено меню Слайд-шоу в прокрутке Скрыть Navbar в прокрутке Прикрепленное Navbar Выпадающие окна Hover Нажмите «Раскрывающиеся окна» Раскрытие в Топнаве Распространение в Сидене Откроется панель Navbar Dropup Mega Menu пагинация Панировочные сухари Группа кнопок Группа вертикальных кнопок Важная социальная панель Отзывчивый заголовок

Изображения

Слайд-шоу Галерея слайд-шоу Модальные изображения Лайтбокс Адаптивная Сетка изображения Сетка изображения Галерея вкладок Оверлей изображения Слайд с наложенным изображением Масштабирование наложения изображения Название наложения изображения Значок наложения изображения Эффекты изображения Черно-белое изображение Текст изображения Текстовые блоки изображений Прозрачный текст изображения Полное изображение страницы Форма на картинке Герой изображение Параллельные изображения Округленные изображения Аватар изображения Адаптивные образы Центрировать изображения Миниатюры Познакомьтесь с командой Липкое изображение Отражение изображения Встряхните изображение Портфолио галерея Портфолио с фильтрацией Масштабирование изображения Изображение увеличительное стекло Ползунок сравнения изображений

Кнопки

Кнопки оповещения Кнопки структуры Кнопки разделения Анимированные кнопки Кнопки затухания Кнопка на картинке Кнопки социальных сетей Кнопки загрузки Кнопки загрузки Значки Кнопки «Далее»/»предыдущий» Кнопки блокировки Текстовые кнопки Круглые пуговицы Прокрутка к верхней кнопке

Формы

Форма входа Форма регистрации Бланк заказа Контактная форма Форма для входа в социальную систему Форма регистрации Форма с иконками Бюллетень Адаптивная форма Очистить поле ввода Копировать текст в буфер обмена Анимированный Поиск Кнопка поиска Полноэкранный Поиск Настраиваемый флажок/Радио Выборочный выбор Тумблер Установите флажок Проверка пароля Переключение видимости паролей Форма с несколькими шагами Автозаполнения

Фильтры

Список фильтров Таблица фильтров Фильтрующие элементы Фильтр раскрывающегося списка Сортировать список Сортировка таблицы

Таблицы

Зебра полосатые таблицы Адаптивные таблицы Сравнительная таблица

Больше

Fullscreen Video Модальные коробки Шкала Индикатор прокрутки Строки хода выполнения Панель умений Ползунки диапазона Подсказки Popups Складной Календарь HTML вставка Список Погрузчики Звездв Рейтинг пользователей Эффект наложения Контактные фишки Карты Карточка профиля Оповещения Заметки Метки Круги Купон Отзывчивый текст Фиксированный нижний колонтитул Липкий элемент Одинаковая высота Clearfix Снэк-бар Прокрутка рисунка Липкий заголовок Таблица цен Параллакс Пропорции Переключение типа/не нравится Включить скрытие/отображение Переключение текста Переключение класса Добавить класс Удалить класс Активный класс Увеличить Hover Переход при наведении Стрелки Формы Окно браузера Настраиваемая полоса прокрутки Цвет заполнителя Вертикальная линия Анимация значков Таймер обратного отсчета Машинку Скоро страница Сообщения чата Разделить экран Отзывы Цитаты слайд-шоу Закрываемые элементы списка Типичные точки останова устройства Перетаскивание HTML-элемента Кнопка спуска на входе JS медиа запросы JS анимации Получить элементы IFRAME

Сайт

Создать веб-сайт Создать веб-сайт (BS3) Создать веб-сайт (BS4) Веб-сайт центра Контактная Секция

Сетка

2 расположение колонок 3 Расположение колонок 4 расположение колонок Разворачивание сетки Представление сетки списка Компоновка смешанных столбцов Макет блога

От автора: приветствую Вас уважаемые читатели. Меню – это элемент, без которого не может обойтись ни один сайт в интернете, так как данный блок значительно упрощает навигацию и предоставляет доступ к основным страницам пользовательской части сайта. При этом если сайт достаточно сложен и содержит огромное количество страниц, количество ссылок меню, так же будет велико, а значит, для экономии свободного пространства, меню создают многоуровневым. Поэтому в данной статье мы поговорим о том, как создать выпадающее меню joomla 3.

По сути, функционал многоуровневого меню заложен в базовой версии Joomla, точно так же как и многоуровневые категории, менеджера материалов. Но, что касается вывода на экран выпадающего меню, здесь есть небольшая проблема, которая заключается в том, что в разных шаблонах одно и тоже многоуровневое меню будет отображаться по разному. К примеру, в стандартном шаблоне CMS Joomla – Photostar, многоуровневое выпадающее меню будет отображаться просто отлично, причем используя, абсолютно стандартный функционал.

В тоже время другой стандартный шаблон Beez3, вообще, на мой взгляд, не корректно отображает данное меню.

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

Причем дочерние пункты появляются только тогда, когда пользователь кликнет по родительскому элементу. Помимо этого в джумла выпадающее меню, можно реализовать при помощи специальных расширений, которые опираясь на данные менеджера меню, правильным образом отображают ссылки многоуровневого меню.

Поэтому для начала давайте определим структуру ссылок будущего меню, а затем поговорим о его отображении на экран. Итак, переходим в менеджер меню и создаем новое меню.

На следующей странице указываем заголовок меню, его системное имя, краткое описание и нажимаем кнопку “Сохранить”.

Далее переходим в новое меню и создадим несколько пунктов – для начала родительских.

При этом для создания родительских ссылок меню, в поле “Родительский элемент” необходимо выбрать значение “Корневой пункт меню”. Как только все родительские элементы созданы, приступаем к созданию дочерних элементов.

Обратите внимание, что создавая дочернюю ссылку в поле “Родительский элемент” необходимо выбрать ранее созданный родительский пункт меню. Таким образом, дочерние элементы, будут формировать выпадающую часть меню, если конечно данная возможность поддерживается шаблоном. После добавления всех необходимых ссылок, в менеджере меню мы получим следующую структуру.

Итак, для CMS Joomla выпадающее меню, практически готово, осталось только создать модуль, который отобразит его в требуемой позиции шаблона. А значит, переходим в “Менеджер меню” и создаем новый модуль меню.

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

При настройке модуля, указываем его заголовок, выбираем позицию отображения в шаблоне и страницы, на которых он будет доступен, и не забываем выбрать отображаемое меню в поле “Выбор меню”.

После сохранения модуля переходим в пользовательскую часть для проверки.

Как Вы видите, для шаблона Photostar меню отлично отображается, но как сделать выпадающее меню в joomla 3, для другого шаблона спросите Вы. Ответ достаточно прост – использовать стороннее расширение. И в данной статье мы рассмотрим модуль под названием ARI Ext Menu.

Кликая по кнопке “Download” нас перенаправляют на сайт разработчика, где приведена ссылка для скачивания модуля.

После скачивания, устанавливаем расширение стандартным способом и переходим в менеджер меню для его активации.

Модуль достаточно функционален и содержит огромное количество различных настроек, на обзоре которых я сейчас не буду останавливаться, тем более что практически все они отвечают за внешний вид и требуют простого тестирования. Главное, необходимо указать заголовок, выбрать позицию отображения в шаблоне, изменить состояние на “Опубликовано” и в поле “Menu name” выбрать меню которое будет отображаться в модуле.

Собственно после сохранения мы увидим следующий результат.

То есть модуль успешно выполняет свою задачу.

Теперь Вы знаете, как в джумле сделать выпадающее меню. Если Вы желаете более подробно изучить структуру модулей на уровне кода, Вам будет полезен наш новый курс Joomla-Профессионал: создание расширений для joomla.

На этом данная статья завершена! Всего Вам доброго и удачного кодирования!!!

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

Выпадающее меню Joomla

Выпадающее меню сайта позволит вам иметь дружественный интерфейс и избавит от излишнего загромождения.

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

Как сделать выпадающее меню joomla?

Прежде всего, необходимо понимать, что меню выводится в позиции для вывода модулей. Следовательно, необходим модуль меню с выпадающим списком. Немного покопавшись в поисковиках на эту тему и опробовав некие варианты, я наткнулся на модуль слайд меню для joomla — «ARI YUI Menu». Этот модуль позволяет создать вертикальное и горизонтальное выпадающее меню, имеет минимум настроек, совместим с joomla 1.5, 2.5. В его основу положена свободно распространяемая библиотека «YUI Library» от команды разработчиков Yahoo.

Создание выпадающего меню на сайте

Прежде всего, необходимо создать саму структуру будущего меню с необходимой иерархией. Это делается так же, как и для стандартного меню. Рассмотрим небольшой пример с живого сайта.

На рисунке видно, что основными пунктами меню являются: Трубы, Фитинги, НСПС и Сварочное оборудование — это элементы первого уровня. Пункты Трубы и Фитинги имеют дочерние элементы – элементы второго уровня: Газопроводные трубы, Водопроводные трубы… Пункт меню Канализационные фитинги так же имеет дочерние элементы – элементы третьего уровня.

Как сделать пункт меню дочерним? Да очень просто, при создании пункта меню или в режиме его редактирования указать для него «Родительский элемент». В ниже следующем примере сказано, что пункт меню «Газопроводные трубы» является дочерним по отношению к пункту меню «Трубы». Аналогичным образом строится иерархия для всех остальных пунктов.

Для Joomla 2.5 иерархия строится аналогичным образом, как это делается описано в статье

Установка модуля «ARI YUI Menu»

Скачать модуль «ARI YUI Menu» для joomla можно на сайте автора, там же есть и демонстрационная страница www.demo2.ari-soft.com/ari-yui-menu.html

Процесс установки стандартный, в административной панели «расширения-установка и удаление», выбираем скаченный файл модуля и нажимаем кнопку «Установить».

После сообщения об успешной инсталляции модуля, необходимо перейти к настройке модуля «Расширения-Модули». Находим в списке модуль «ARI YUI Menu» и нажав на ссылку оказываемся в странице настроек.

Настройка модуля «ARI YUI Menu»

Вкладка «Подробности»

  • смените заголовок
  • проверьте что модуль включен
  • выберите позицию вывода модуля.

Вкладка «Настройки»

·

· Ответы на часто задаваемые вопросы

· Как добавить атрибуты title в ссылки и иконки пунктов меню?

Далее найдите строку:

Замените ее на:

1.<a<?php echo AriHtmlHelper::getAttrStr($aAttr); ?>>

2.<?php

3.if ($menuItem->menu_image) echo ‘<img src=»‘.$menuItem->menu_image.'»‘ . ($menuItem->title ? ‘ alt=»‘.$menuItem->title.'»‘ : ») . ‘ />’;

4.?>

5.<?php echo stripslashes(htmlspecialchars(J1_6 ? $menuItem->title : $menuItem->name)); ?></a>

Загрузить файл с изменениями можно в конце статьи.

Как поменять курсор меню?

// Горизонтальное меню
#{$id}.yui-skin-sam UL LI A.yuimenubaritemlabel:hover { cursor: pointer; }

// Вертикальное меню
#{$id}.yui-skin-sam UL LI A.yuimenuitemlabel:hover { cursor: pointer; }

Как поменять цвет пункта меню над которым курсор мыши?
Как поменять название и цвет шрифта?

// Вертикальное меню
#{$id}.yui-skin-sam .yuimenu ul li a { color: blue; font-family: Times New Roman; }

Как вывести текст пункта меню в несколько строк?
«Стрелочка-треугольничек» наезжает на текст, как отодвинуть?
Как поменять цвет бордюра?
Как поменять цвет фона?

._menu { background-color: grey; }
#{$id}.yui-skin-sam .yuimenu .bd { background-color: grey; }

Как направить выпадение пунктов меню влево, а не вправо?

В настройках модуля есть опция «Выравнивание подменю » Если кликнуть по значку-ссылке знаку вопроса — вы попадете на страничку с описанием выравнивания разработчика YUI.

Эта опция представляет собою массив определения того, как подменю должно быть согласовано с родительским пунктом меню.

  • Формат:
  • Значения: ,

По умолчанию левый верхний угол подменю выравнивается в правом верхнем углу родительского пункта меню.

Комментарий от меня: Считайте что там по умолчанию написано tl,tr (сокращения top, bottom, left, right). Напишите туда то, что нужно вам.

Скачать русифицированный модуль выпадающего меню для joomla

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

Скачать для пользования
Модуль меню ARI Ext Menu – русифицированная версия

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *