Обновив один из своих сайтов с Joomla 1.5 до Joomla 2.5, появились проблемы с обновлением ранее установленных модулей и компонентов на новую версию движка. Если от некоторых было довольно легко отказаться или найти им замену, то для любимого и удобного меню аккордеона отказываться совсем не хотелось, а ставить громоздкие нафаршированные многими ненужными вещами готовые модули не хотелось. Наоборот, хочется, чтобы на сайте не было ничего лишнего, что может увеличить скорость загрузки странички. Поэтому решено было искать что-то лёгкое, простое и удобное. И нашла очень быстро.
На сайте «Веб строительство начинающим!» нашла именно то, что хотела — статья «Вертикальное выпадающее меню CSS+JS OnClick» помогла мне реализовать задуманное. Скрипт в этом варианте аккордеон меню очень маленький и совершенно не грузит сайт. Нет ничего лишнего. Просто раскрывающееся вертикальное меню без особых наворотов и заморочек, которые могут существенно увеличить скорость загрузки сайта, что может привести к потерям трафика. Поэтому этот вариант менюшки мне очень приглянулся.
Вертикальное выпадающее меню CSS+JS OnClick
Я лишь немного изменила CSS (внешний вид менюшки) под свои нужды и облачила все эти файлы в модуль, чтобы можно было из админки указать месторасположения модуля — его позицию на страницах сайта. В итоге, чтобы на сайте было эффективное и довольно удобное вертикально раскрывающееся меню аккордеон, нужно всего 3 файла: HTML, CSS, JS. Посмотреть как работает такое меню можно по ссылке выше на сайте автора.
HTML
Нужно заменить заголовки меню на свои и добавить ссылки на разделы меню. По желанию можно добавить нужное количество меню и подменю.
CSS
@charset "utf-8";
/* CSS Document */
#menu_body li ul {
display: none;
}
#menu_body li:hover ul, #menu_body li.over ul {
display: block;
}
#menu_body {
width: 200px;
}
#menu_body a {
display: block;
}
#menu_body ul li {
list-style-type: none;
}
#menu_body ul li a {
padding: 5px 10px;
cursor: pointer;
position: relative;
margin: 1px;
font-size: 12px;
font-weight: bold;
background: #242638;
color: #568CEE;
font-family: Georgia, Verdana;
text-decoration:none!important;
}
#menu_body ul li a:hover {
}
#menu_body ul li ul li a{
width: 175px;
display: block;
color: white;
background-color: #568CEE;
margin-left: -48px;
margin-bottom: 1px;
padding-left: 10px;
font-weight: bold;
text-decoration: none;
border-bottom: 1px solid #242638;
border-right: 1px solid #242638;
border-left: 1px solid #242638;
font-family: Georgia, Verdana;
font-size: 12px;
}
#menu_body ul li ul li a:hover{
color: #242638;
text-decoration: underline!important;
}
#menu_body ul li ul{
border-top: 0px solid #fff;
margin-left: 0px;
padding-left: 50px;
} Правила CSS можно также заменить под свои нужды и дизайн вашего сайта. Это довольно просто.
JS
var id_menu = new Array('sub_menu_1','sub_menu_2','sub_menu_3','sub_menu_4','sub_menu_5','sub_menu_6','sub_menu_7','sub_menu_8','sub_menu_9','sub_menu_10','sub_menu_11','sub_menu_12','sub_menu_13','sub_menu_14','sub_menu_15','sub_menu_16','sub_menu_17','sub_menu_18','sub_menu_19','sub_menu_20','sub_menu_21','sub_menu_22','sub_menu_23','sub_menu_24');
startList = function allclose() {
for (i=0; i < id_menu.length; i++){
document.getElementById(id_menu[i]).style.display = "none";
}
}
function openMenu(id){
for (i=0; i < id_menu.length; i++){
if (id != id_menu[i]){
document.getElementById(id_menu[i]).style.display = "none";
}
}
if (document.getElementById(id).style.display == "block"){
document.getElementById(id).style.display = "none";
}else{
document.getElementById(id).style.display = "block";
}
}
window.onload=startList;
var id_menu = new Array('sub_menu_1','sub_menu_2','sub_menu_3');
В этой строке в скрипте следует указать такое количество sub_menu, сколько у вас будет главных меню (раскрывающихся вследствие на подменю). То бишь, если у вас пять пунктов меню, указать нужно все пять, по аналогии примера выше.
Модуль меню аккордеон
Ниже вы можете скачать готовый модуль меню аккордеон для Джумлы версии 2,5.
Скачать модуль меню аккордеон.
Вот и всё. Простой и удобный модуль меню в стиле аккордеон готов к использованию на сайте. Правда, для добавления пунктов и подпунктов меню придётся всегда лезть в php файл в корне модуля, но это не беда для опытного администратора сайта.
Хорошего вам настроения и красивого и удобного меню на сайте! :)