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

В папку с вашим шаблоном: /templates/ваш-шаблон/html/mod_menu загрузить следующие файлы:
В менеджере модулей, создайте модуль "Меню", а в его настройках в разделе "Дополнительные параметры", выберете альтернативный макет "megamenu".
Теперь необходимо подключить стили, для того, что бы наше меню приняло нормальный внешний вид.
/***MEGAMENU***/
.vertical-menu {
position: relative;
z-index: 3;
}
.menu_items .menu_item{
}
.menu_items{
position: relative;
}
.menu_items .menu_link {
display: block;
color: #333;
}
.menu_items > .menu_item > .menu_link {
background: #f3f3f3;
padding: 5px 10px;
border-bottom: 1px solid #cecece;
font-size: 15px;
color: #333;
}
.menu_items > .menu_item > .menu_link:hover{
background: #258dc8;
color: #fff;
text-decoration:none;
}
.menu_items > .menu_item_has-children > .menu_link:after{
font-family: "FontAwesome";
content: " \f105";
float: right;
}
.menu_items > .menu_item > .menu_sub{
position: absolute;
left: 100%;
top: 0;
z-index: 100;
min-height: 100%;
max-height: 600px;
overflow-y: auto;
display: none;
background: #dedede;
}
.menu_items > .menu_item > .menu_sub > .menu_sub-inner{
min-height: 100%;
height: auto;
padding: 30px;
column-count: 3;
padding-left: 0;
}
.menu_items > .menu_item > .column-1 ~ .menu_sub > .menu_sub-inner {
column-count: 4;
}
.menu_items > .menu_item > .column-2 ~ .menu_sub > .menu_sub-inner {
column-count: 2;
}
.menu_items > .menu_item > .column-1 ~ .menu_sub > .menu_sub-inner {
column-count: 1;
}
.menu_items > .menu_item:hover > .menu_sub{
display: block;
}
.menu_items > .menu_item > .menu_sub > .menu_sub-inner > .menu_item{
width: 200px;
padding-left: 30px;
padding-bottom: 30px;
}
.menu_items > .menu_item > .menu_sub > .menu_sub-inner > .menu_item > .menu_link{
text-transform: uppercase;
}
.menu_items > .menu_item > .menu_sub > .menu_sub-inner> .menu_item .menu_link{
margin-bottom: 5px;
font-size: 14px;
}
.menu_items > .menu_item > .menu_sub > .menu_sub-inner> .menu_item .menu_link:hover{
text-decoration: underline;
}
.menu_items > .menu_item > .menu_sub > .menu_sub-inner> .menu_item > .menu_sub .menu_link{
color: #505254;
font-size: 13px;
}
@media (max-width: 1200px) {
.menu_items > .menu_item > .menu_sub > .menu_sub-inner> .menu_item {
width: 220px;
}
}
@media (max-width: 1024px) {
.menu_items > .menu_item > .menu_sub > .menu_sub-inner{
column-count: 2;
}
}
@media (max-width: 767px) {
.menu_items {
display: none;
}
}
.menu_items_sub > .menu_item > .menu_link{
background: #eeeeee;
padding: 5px 10px;
border-bottom: none;
font-size: 16px;
color: #222;
}
.menu_items_sub > .menu_item:nth-child(odd) > .menu_link{
background: #f4f4f4;
}
.menu_items_sub > .menu_item > .menu_link:hover{
background: #48669e;
color: #222;
}
Что бы корректно отображались иконки, необходимо подключить FontAwesome.
Вы можете регулировать количество колонок, задавая для родительских пунктов меню css классы: column-2, column-1 - при желании можете дописать свои стили (column-3, column-5 и т.д.).
Спасибо, но где можно посмотреть пример ?