Многоуровневое адаптивное горизонтальное меню в битрикс

В битрикс уже есть свое горизонтальное меню horizontal_multilevel, но иногда оно не подходит для решения задачи, мне больше импонирует свое.

Прилагаю свое решение:

Во первых подключаем jquery

Далее в секцию head вставляем скрипт:

<script> 

$(function(){ 
	$('<select />').appendTo('nav'); 
	$('<option />', {
		'selected': 'selected',
		'value' : '',
		'text': 'Меню'
	}).appendTo('nav select');

	$('nav ul li a').each(function(){
		var target = $(this); 
		$('<option />', {
			'value' : target.attr('href'),
			'text': target.text()
		}).appendTo('nav select'); 
	}); 
	$('nav select').on('change',function(){
		window.location = $(this).find('option:selected').val();
	});
}); 
$(function(){
	$('nav ul li').hover(
		function () { 
			$('ul', this).slideDown(150);
		}, 
		function () { 
			$('ul', this).slideUp(150);			
		}
	);
}); </script>

$(function(){

$('<select />').appendTo('nav');

$('<option />', {

'selected': 'selected',

'value' : '',

'text': 'Меню'

}).appendTo('nav select');

$('nav ul li a').each(function(){

var target = $(this);

$('<option />', {

'value' : target.attr('href'),

'text': target.text()

}).appendTo('nav select');

});

$('nav select').on('change',function(){

window.location = $(this).find('option:selected').val();

});

$(function(){

$('nav ul li').hover(

function () {

$('ul', this).slideDown(150);

function () {

$('ul', this).slideUp(150);

}

);

}); </script>

Но правильнее было бы скопировать имеющийся компонент меню битрикс в свое пространство имен и загрузить в папку с шаблоном компонента файл script.js с этим содержимым.

Ну и далее

создаем шаблон вывода меню:

<div id="menutop">
          <nav><ul class="nav">
          <li class="current"><a href="punkt1">Пункт 1</a></li>
            <li class="current"><a href="punkt2">Пункт 2</a>
			<ul style="display: none;" class="sub_menu">
			<li><a href="podpunkt1">Подпункт 1</a></li>
			<li><a href="podpunkt2">Подпункт 2</a></li>
			<li><a href="podpunkt3">Подпункт 3</a></li>
			<li><a href="podpunkt4">Подпункт 4</a></li>
			<li><a href="podpunkt5">Подпункт 5</a></li> 
		</ul></li>
 <li class="current"><a href="/punkt3/">Пункт 3</a></li>
            <li class="current"><a href="/punkt4/">Пункт 4</a></li>
</ul></nav>
        </div>

<li class="current"><a href="punkt1">Пункт 1</a></li>

<li class="current"><a href="punkt2">Пункт 2</a>

<li><a href="podpunkt1">Подпункт 1</a></li>

<li><a href="podpunkt2">Подпункт 2</a></li>

<li><a href="podpunkt3">Подпункт 3</a></li>

<li><a href="podpunkt4">Подпункт 4</a></li>

<li><a href="podpunkt5">Подпункт 5</a></li>

</ul></li>

<li class="current"><a href="/punkt3/">Пункт 3</a></li>

<li class="current"><a href="/punkt4/">Пункт 4</a></li>

</ul></nav>

</div>

и добавляем файл style.css вида:

Читать cron_events bitrix и почта - Р.Н.О

#menutop nav select {
	display:none; 
}
#menutop nav ul {
	display:block;
	z-index:999999; color:#fff;
}
#menutop nav ul li {
	display:inline-block;
	 
	position:relative;
}
#menutop nav ul li a:link, #menutop nav ul li a:visited { 
	display:inline-block;
	position:relative;
}
#menutop nav ul li a:hover, #menutop nav ul li a:active {
	 
	text-decoration:none;
}
#menutop nav ul li span {
	position:absolute;
	right:-12px;
	bottom:6px;
	width:7px;
	height:8px;
	margin:0 0 0 3px;
	float:right;
	display:block;
	 
	font:0/0 a;
}
 
#menutop nav ul li ul.sub_menu {
	position:absolute; background-color:#434343; color:#999999;
	top:40px;
	left:0;
	margin:0;
	padding:0; 
	display:none;
	z-index:999999;
    
}
 
#menutop nav ul li ul.sub_menu li {
	float:none;
	margin:0;
	padding:0;
	 
}
#menutop nav ul li ul.sub_menu li a {
	      white-space: nowrap;
    background-color: #434343;
    width: 300px;
    padding: 15px;
    text-transform: uppercase;
    color: #999;
}
   


@media only screen and (min-width: 768px) and (max-width: 959px) {
		/* nav */
		#menutop nav ul li{
			margin-left:12px;
		}
} 
@media only screen and (max-width: 767px) {

		 
		#menutop nav ul {
			display:none;
		}
		#menutop nav select {
			width:100%;
			display:block;
			margin-bottom:30px;
			cursor:pointer;
			padding:6px;
		 
		}
}

#menutop nav select {

display:none;

}

#menutop nav ul {

display:block;

z-index:999999; color:#fff;

}

#menutop nav ul li {

display:inline-block;

position:relative;

}

#menutop nav ul li a:link, #menutop nav ul li a:visited {

display:inline-block;

position:relative;

}

#menutop nav ul li a:hover, #menutop nav ul li a:active {

text-decoration:none;

}

#menutop nav ul li span {

position:absolute;

right:-12px;

bottom:6px;

width:7px;

height:8px;

margin: 3px;

float:right;

display:block;

font:/ a;

}

#menutop nav ul li ul.sub_menu {

position:absolute; background-color:#434343; color:#999999;

top:40px;

left:;

margin:;

padding:;

display:none;

z-index:999999;

}

#menutop nav ul li ul.sub_menu li {

float:none;

margin:;

padding:;

}

#menutop nav ul li ul.sub_menu li a {

white-space: nowrap;

background-color: #434343;

width: 300px;

padding: 15px;

text-transform: uppercase;

color: #999;

}

@media only screen and (min-width: 768px) and (max-width: 959px) {

/* nav */

#menutop nav ul li{

margin-left:12px;

}

@media only screen and (max-width: 767px) {

#menutop nav ul {

display:none;

}

#menutop nav select {

width:100%;

display:block;

margin-bottom:30px;

cursor:pointer;

padding:6px;

}

Таким образом у вас получится адаптивное горизонтальное меню, ну уж в шаблон компонента внедрить структура не проблема я думаю, в противном случае пишите в коментариях, если что не будет получаться

Читать Сменить тип описания элемента инфоблока

Многоуровневое адаптивное горизонтальное меню в битрикс

Многоуровневое адаптивное горизонтальное меню в битрикс: 1 комментарий

Добавить комментарий Отменить ответ