В стандартных шаблонах DataLife Engine идущих в комплекте с движком почему-то нет поддержки многоуровневого меню. На мой взгляд такое меню обязательно должно быть и давайте попробуем исправить это и сделать так, как показано на главном скриншоте выше. Последующие изменения и код будут работать на версиях DataLife 10.2, 10.3, 10.4, 10.5, а номера строк для его вставки я приведу для версии 10.5. Приступим:
Редактируем файл «\templates\Default\js\libs.js». Нам нужна функция отвечающая за поведение меню при наведении курсором мыши - строки с 35-ой по 47-ую. Заменяем .find() на .children(), который осуществляет поиск подходящих дочерних элементов. Если его не заменить то при наведении на меню у нас будет выскакивать все уровни меню, а нам этого не нужно. Также необходимо убрать из выборки элементов класс .sublnk иначе не будут работать подуровни меню. В итоге получим следующий код:
$(document).ready(function(){
$('#topmenu li').hover(
function() {
$(this).addClass("selected");
$(this).children('ul').stop(true, true);
$(this).children('ul').show('fast');
},
function() {
$(this).children('ul').hide('fast');
$(this).removeClass("selected");
}
);
});
Затем добавляем несколько строк в наш файл стилей Default шаблона «\templates\Default\style\styles.css» после 500-ой строки (стили для подменю начинаются с /*---SubMenu---*/) такого содержания:
/*меню подкатегорий*/
.menubar ul li ul li ul{
left: 200px; /*сдвигаем подменю вправо на ширину меню*/
top: 0; /*делаем, чтобы подменю было на одном уровне с меню*/
}
.menubar ul li ul li {
position:relative;
}
Осталось только добавить сами подкатегории и под-подкатегории для нашего многоуровневого меню в файле шаблона «\templates\Default\topmenu.tpl». Пример кода:
<li class="sublnk"><a href="#"><b>В мире</b></a>
<ul>
<li><a href="#"><b>Новости</b></a></li>
<li><a href="#"><b>Категория 1</b></a>
<ul>
<li><a href="#"><b>Подкатегория 1</b></a></li>
<li><a href="#"><b>Подкатегория 2</b></a>
<ul>
<li><a href="#"><b>Под-подкатегория 1</b></a></li>
<li><a href="#"><b>Под-подкатегория 2</b></a></li>
<li><a href="#"><b>Под-подкатегория 3</b></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><b>Климат</b></a></li>
<li><a href="#"><b>Погода</b></a></li>
</ul>
</li>
Для тех у кого нет времени делать это все самому скачиваем архив с измененными файлами для версии Datalife 10.5 с кодировкой сайта UTF-8