Перед нами стоит задача переноса меню из сверстанного шаблона или кастомизация компонента под названием «меню». Нам нужно иметь собственно сам сверстанный шаблон с меню. Вторая задача — это подобрать наиболее подходящий вид меню из предложенных битриксом, будь то горизонтальное меню, вертикальное, закладками и т.д.
Мы уже разбирали как интегрировать сам шаблон в битрикс вот в этой статье. Возьмем все тот же шаблон и адаптируем встроенный компонент меню.
Итак, первая задача — это подобрать подходящий вариант меню. Для этого в тестовом сайте достаточно поиграться с настройками компонента меню, выставляя встроенные шаблоны. Для наших нужд отлично подходит шаблон «horizontal_multilevel».
Приведу php код этого шаблона:
<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?> <?if (!empty($arResult)):?> <ul id="horizontal-multilevel-menu"> <? $previousLevel = 0; foreach($arResult as $arItem):?> <?if ($previousLevel && $arItem["DEPTH_LEVEL"] < $previousLevel):?> <?=str_repeat("</ul></li>", ($previousLevel - $arItem["DEPTH_LEVEL"]));?> <?endif?> <?if ($arItem["IS_PARENT"]):?> <?if ($arItem["DEPTH_LEVEL"] == 1):?> <li><a href="<?=$arItem["LINK"]?>" class="<?if ($arItem["SELECTED"]):?>root-item-selected<?else:?>root-item<?endif?>"><?=$arItem["TEXT"]?></a> <ul> <?else:?> <li<?if ($arItem["SELECTED"]):?> class="item-selected"<?endif?>><a href="<?=$arItem["LINK"]?>" class="parent"><?=$arItem["TEXT"]?></a> <ul> <?endif?> <?else:?> <?if ($arItem["PERMISSION"] > "D"):?> <?if ($arItem["DEPTH_LEVEL"] == 1):?> <li><a href="<?=$arItem["LINK"]?>" class="<?if ($arItem["SELECTED"]):?>root-item-selected<?else:?>root-item<?endif?>"><?=$arItem["TEXT"]?></a></li> <?else:?> <li<?if ($arItem["SELECTED"]):?> class="item-selected"<?endif?>><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li> <?endif?> <?else:?> <?if ($arItem["DEPTH_LEVEL"] == 1):?> <li><a href="" class="<?if ($arItem["SELECTED"]):?>root-item-selected<?else:?>root-item<?endif?>" title="<?=GetMessage("MENU_ITEM_ACCESS_DENIED")?>"><?=$arItem["TEXT"]?></a></li> <?else:?> <li><a href="" class="denied" title="<?=GetMessage("MENU_ITEM_ACCESS_DENIED")?>"><?=$arItem["TEXT"]?></a></li> <?endif?> <?endif?> <?endif?> <?$previousLevel = $arItem["DEPTH_LEVEL"];?> <?endforeach?> <?if ($previousLevel > 1)://close last item tags?> <?=str_repeat("</ul></li>", ($previousLevel-1) );?> <?endif?> </ul> <div class="menu-clear-left"></div> <?endif?>
а вот стили:
/**Top menu**/ #horizontal-multilevel-menu,#horizontal-multilevel-menu ul { margin:0; padding:0; background:#BC262C url(images/header_menu_bg.gif) repeat-x; min-height:27px; width:100%; list-style:none; font-size:11px; float:left; /*font-size:90%*/ } #horizontal-multilevel-menu { } /*Links*/ #horizontal-multilevel-menu a { display:block; padding:5px 10px; /*padding:0.3em 0.8em;*/ text-decoration:none; text-align:center; } #horizontal-multilevel-menu li { float:left; } /*Root items*/ #horizontal-multilevel-menu li a.root-item { color:#fff; font-weight:bold; padding:7px 12px; } /*Root menu selected*/ #horizontal-multilevel-menu li a.root-item-selected { background:#fc8d3d; color:#fff; font-weight:bold; padding:7px 12px; } /*Root items: hover*/ #horizontal-multilevel-menu li:hover a.root-item, #horizontal-multilevel-menu li.jshover a.root-item { background:#e26336; color:#fff; } /*Item-parents*/ #horizontal-multilevel-menu a.parent { background: url(images/arrow.gif) center right no-repeat; } /*Denied items*/ #horizontal-multilevel-menu a.denied { background: url(images/lock.gif) center right no-repeat; } /*Child-items: hover*/ #horizontal-multilevel-menu li:hover, #horizontal-multilevel-menu li.jshover { background:#D6D6D6; color:#fff; } /*Child-items selected*/ #horizontal-multilevel-menu li.item-selected { background:#D6D6D6; color:#fff; } /*Sub-menu box*/ #horizontal-multilevel-menu li ul { position:absolute; /*top:-999em;*/ top:auto; display:none; z-index:500; height:auto; /*width:12em;*/ width:135px; background:#F5F5F5; border:1px solid #C1C1C1; } /*Sub-menu item box*/ #horizontal-multilevel-menu li li { width:100%; border-bottom:1px solid #DEDEDE; } /*Item link*/ #horizontal-multilevel-menu li ul a { text-align:left; } /*Items text color & size */ #horizontal-multilevel-menu li a, #horizontal-multilevel-menu li:hover li a, #horizontal-multilevel-menu li.jshover li a, #horizontal-multilevel-menu li:hover li:hover li a, #horizontal-multilevel-menu li.jshover li.jshover li a, #horizontal-multilevel-menu li:hover li:hover li:hover li a, #horizontal-multilevel-menu li.jshover li.jshover li.jshover li a, #horizontal-multilevel-menu li:hover li:hover li:hover li:hover li a, #horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li a, #horizontal-multilevel-menu li:hover li:hover li:hover li:hover li:hover li a, #horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li.jshover li a { color:#4F4F4F; font-weight:bold; } /*Items text color & size: hover*/ #horizontal-multilevel-menu li:hover li:hover a, #horizontal-multilevel-menu li.jshover li.jshover a, #horizontal-multilevel-menu li:hover li:hover li:hover a, #horizontal-multilevel-menu li.jshover li.jshover li.jshover a, #horizontal-multilevel-menu li:hover li:hover li:hover li:hover a, #horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover a #horizontal-multilevel-menu li:hover li:hover li:hover li:hover li:hover a, #horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li.jshover a #horizontal-multilevel-menu li:hover li:hover li:hover li:hover li:hover li:hover a, #horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li.jshover li.jshover a { color:#4F4F4F; } #horizontal-multilevel-menu li ul ul { margin:-27px 0 0 132px; /*margin:-1.93em 0 0 11.6em;*/ } #horizontal-multilevel-menu li:hover ul ul, #horizontal-multilevel-menu li.jshover ul ul, #horizontal-multilevel-menu li:hover ul ul ul, #horizontal-multilevel-menu li.jshover ul ul ul, #horizontal-multilevel-menu li:hover ul ul ul ul, #horizontal-multilevel-menu li.jshover ul ul ul ul, #horizontal-multilevel-menu li:hover ul ul ul ul ul, #horizontal-multilevel-menu li.jshover ul ul ul ul ul { /*top:-999em;*/ display:none; } #horizontal-multilevel-menu li:hover ul, #horizontal-multilevel-menu li.jshover ul, #horizontal-multilevel-menu li li:hover ul, #horizontal-multilevel-menu li li.jshover ul, #horizontal-multilevel-menu li li li:hover ul, #horizontal-multilevel-menu li li li.jshover ul, #horizontal-multilevel-menu li li li li:hover ul, #horizontal-multilevel-menu li li li li.jshover ul, #horizontal-multilevel-menu li li li li li:hover ul, #horizontal-multilevel-menu li li li li li.jshover ul { /*z-index:1000; top:auto;*/ display:block; } div.menu-clear-left { clear:left; }
Теперь посмотрим, как организован вывод меню в нашем сверстанном шаблоне:
<div id="nav"> <ul> <li><a href="">Home</a></li> <li><a href="">Products</a></li> <li><a href="">Archive</a></li> <li><a href="">Affiliates</a></li> <li id="current"><a href="">About</a></li> <li><a href="">Contact</a></li> </ul> </div>
отвечающие ему стили:
#nav { background: #000 url(menu.jpg) no-repeat center bottom; background-color: #000; width: 886px; height: 28px; margin: 0; padding: 0; } #nav ul { margin:0; list-style:none; padding: 0px 0 0 76px; } #nav a, #nav strong, #nav span { float:left; display:block; color:#fff; padding: 5px 10px 5px 10px; background: #9e9e9e; text-decoration:none; font-weight: bold; } #nav a { float:none; } #nav li { float:left; color: #FFF; background: #9e9e9e; margin:0; padding:0 0 0 0px; } #nav #current { float:left; background: #aeaeae; color: #FFF; } #nav #current a { float:left; background: #aeaeae; padding:5px 10px 5px 10px; color:#FFF; } #nav a:hover { float:left; color:#FFF; background: #aeaeae; } #nav .padding { padding: 5px 0 0 10px; font-weight: bold; }
Тщательно изучив коды, видим, что достаточно заменить названия классов и парочку конструкций тегов. Или поправить css, изменив встроенные классы. Здорово, не правда ли? 🙂
В нашем случае:
1. оборачиваем все меню в тег
<div id="nav"></div>
2. в строке
<a href="<?=$arItem["LINK"]?>" class="<?if ($arItem["SELECTED"]):?>root-item-selected<?else:?>root-item<?endif?>"><?=$arItem["TEXT"]?></a>
заменяем class на id и root-item-selected на current, root-item вообще удаляем:
<a href="<?=$arItem["LINK"]?>" id="<?if ($arItem["SELECTED"]):?>current<?else:?><?endif?>"><?=$arItem["TEXT"]?></a>
3. аналогично проделываем в других местах
4. строку
<div class="menu-clear-left"></div>
удаляем.
Смотрим на результат и ставим себе пятерку 🙂
В итоге, в большинстве случаев можно обойтись правкой только css, что очень радует 🙂
Благодарю!