В битрикс уже есть свое горизонтальное меню horizontal_multilevel, но иногда оно не подходит для решения задачи, мне больше импонирует свое.
Прилагаю свое решение:
Во первых подключаем jquery
<s cript type=»text/javascript» src=»https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js»></script>
Далее в секцию head вставляем скрипт:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<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 с этим содержимым.
Ну и далее
создаем шаблон вывода меню:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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> |
и добавляем файл style.css вида:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
#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; } } |
Таким образом у вас получится адаптивное горизонтальное меню, ну уж в шаблон компонента внедрить структура не проблема я думаю, в противном случае пишите в коментариях, если что не будет получаться
Прикольно. Жаль только, что в мобильном варианте все Подпункты в кучу