![](https://site-cloud-files.bitrix.info/resize_cache/876756/7acf4cadf975128573a8b1c2766af5d8/blog/avatar/7b2/7b2830e73e4b61e959f8879a919ef2ab/punk.jpg)
Давайте изменим стандартное левое меню в демо-сайте, например, на
![Меню на сайте A List Apart](https://site-cloud-files.bitrix.info/blog/6ed/a_list_apart.gif)
[spoiler]
Сперва скопируем системный шаблон компонента в шаблон сайта:
![Копируем шаблон компонента](https://site-cloud-files.bitrix.info/blog/1d2/copy_menu_template.gif)
Затем скопируем CSS меню, приведенное в
#button { width: 100%; border-right: 1px solid #000; padding: 0 0 1em 0; margin-bottom: 1em; font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; background-color: #90bade; color: #333; } #button ul { list-style: none; margin: 0; padding: 0; border: none; } #button li { border-bottom: 1px solid #90bade; margin: 0; list-style: none; list-style-image: none; } #button li a { display: block; padding: 5px 5px 5px 0.5em; border-left: 10px solid #1958b7; border-right: 10px solid #508fc4; background-color: #2175bc; color: #fff; text-decoration: none; width: 100%; } html>body #button li a { width: auto; } #button li a:hover, #button li a.selected { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; } |
Для подсветки текущего пункта меню к оригинальным стилям был добавлен стиль #button li a.selected, а также для селектора #button свойство "width" стало равным 100%.
Далее изменим выводимый шаблоном HTML (template.php):
<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?> <?if (!empty($arResult)):?> <div id="button"> <ul> <?foreach($arResult as $arItem):?> <?if($arItem["SELECTED"]):?> <li><a href="<?=$arItem["LINK"]?>" class="selected"><?=$arItem["TEXT"]?></a></li> <?else:?> <li><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li> <?endif?> <?endforeach?> </ul> </div> <?endif?> |
Результат:
![Новое меню на демо-сайте!](https://site-cloud-files.bitrix.info/blog/359/blue_left_menu.gif)
Аналогичным образом можно адаптировать меню с сайта