Есть компонент MegaMenu для Joomla, скачивал несколько лет назад и пришлось его допиливать, т.к. он еще стоит на паре моих сайтов, то оставлю для истории несколько доработок этого компонента.
Для того, чтобы добавить картинки в MegaMenu, нужно:
1. в mega.css (строка 48) добавить
.ja-megamenu ul.level0 li.mega .has-image {
background-position: left top;
background-repeat: no-repeat;
display: block;
padding-left: 1px; //изменено
padding-top: 50px; //добавлено
}
2. изменить картинку градиента заднего фона меню grad1-mask.png - с (1 на 50 точек) на (1 на 100 точек) и в template.css (строка 1231) добавить:
#ja-mainnav {
background: url("../images/grad1-mask.png") repeat-x scroll center top #444444;
border-top: 1px solid #666666;
height: 100px; //добавлено
line-height: 1;
position: relative;
z-index: 11;
}
3. добавить ширину пункта в mega.css (строка 28)
.ja-megamenu ul.level0 li.mega {
background: none repeat scroll 0 0 transparent;
display: block;
float: left;
margin: 0;
padding: 0;
width: 130px; //добавлено
}
4. Центрируем меню по способу - http://ruseller.com/lessons.php?rub=2&id=834
- уводим влево ul в mega.css (строка 13)
ul.megamenu {
margin: 10px;
position: relative; //добавлено
left: 50%; //добавлено
}
- уводим li вправо на 50% в mega.css (строка 28)
.ja-megamenu ul.level0 li.mega {
background: none repeat scroll 0 0 transparent;
display: block;
float: left;
margin: 0;
padding: 0;
position: relative; //добавлено
right: 50%; //добавлено
width: 130px;
}
- убираем правую черту у ul и делаем у последнего пункта меню в li mega.css
.ja-megamenu ul.level0 {
border-right: 1px solid #666666; //убираем
float: left;
margin: 0;
padding: 0;
}
.ja-megamenu ul.level0 li.last //создаем стиль для последнего пункта меню в mega.css
{ border-right: 1px solid #666666; }
- обрезаем выступающий за правый край ul
body#bd { background: #fff; color: #333; overflow:hidden; //добавлено}
5. корректируем отступы для более правильного размещения картинки в пункте меню в mega.css
.ja-megamenu ul.level0 li.mega a.mega {
border-left: 1px solid #666666;
border-right: 1px solid #333333;
color: #cccccc; display: block;
font-weight: bold;
line-height: normal;
margin: 0;
padding: 4px 15px; //изменено
text-decoration: none; }
