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

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

Краткий урок по созданию выпадающего меню в joomla 1.5 средствами css. Урок предполагает уже предустановленную cms на сервере и создание пунктов меню.

Инструкция

Уровень сложности: Несложно

1 шаг

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

Для начала выберите в настройках модуля меню параметр отображения – список.

2 шаг

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

Не закрывая параметры модуля назначьте префикс модуля -menu. Если вы хотите использовать другой префикс – не вопрос, но вам необходимо будет изменить этот префикс в коде css шаблона

3 шаг

Далее открываем css вашего шаблона любым редактором. По умолчанию он находится в /templates/папка_с_вашим_шаблоном/css/template.css и вставляем в него следующий код :

.moduletable-menu1{

position:absolute;
z-index:100;
width:500px;
height: 30px;
left:280px;
bottom:2px;
}
ul,li{
padding:0;
margin:0;
}
ul.menu{
clear:both;
position:absolute;
}
ul.menu li a{
padding-top:7px;
height:20px;
display: block;
color: white;
font-size: 18px;
line-height: 0.9em;
vertical-align:middle;
text-align:center;padding-left:5px; padding-right:5px;

}
ul.menu li a:hover{
padding-top:7px;
display: block;
color: #8dc73f;
font-size: 18px;
line-height: 0.9em;
}
ul.menu li{
float:left;
list-style:none;
text-align: center;
line-height: 0.9em;
background-color: #00aeef;
width: auto;border: 2px solid #00aeef; border-radius:6px;
}
/* 1 level /
li.parent{

}
li.parent ul{
float:center;
display:none;
width: auto;

}
li.parent:hover ul{
display: block;
}
/
2 level /
li.parent ul li ul{
position: absolute;
float:left;
margin-left:100px;
margin-top: -20px;
/
ie7 */
*margin-left:0;
*margin-top:0;
}
li.parent:hover ul li ul{
display: none;
}

li.parent:hover ul li:hover ul{ display: block; } ul.menu li ul li{

display:block;
float:none;
clear:both;

} ul.menu li ul li a{ display: block; }

4 шаг

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

Сохраняем css и обновляем страницу. Если вы сделали все правильно – должно получится как на картинке. Редактируйте css и подстраивайте код под ваш шаблон. Надеюсь у вас все получиться. Пример работы можете посмотреть на сайте www.phogame.ru
Дерзайте!
P.S: после изменения css под раздачу попадут все модули меню. Для исправления этого бага назнечьте остальным модулям меню другой суффикс

Обсуждение

Ваш комментарий

Запросить инструкцию

Не нашли нужную пошаговую инструкцию?
Возможно, что кто-то из посетителей сайта сможет помочь. Оставьте запрос прямо сейчас, если Вы уверены, что эта тема ещё не освещена на нашем проекте!

Рейтинг
  1. +
  2. 0
0
15