Делаем правильное многоуровневое меню неограниченной вложенности в Default шаблоне Datalife Engine (DLE)

В стандартных шаблонах 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

Скачать архив - многоуровневое меню 10.5 UTF-8.zip [8,48 Kb] (cкачиваний: 34)