Кастомизация меню битрикс

LadyS · October 21, 2012

Здравствуйте.

Столкнулся с такой проблемой: надо сделать так, чтобы пункты меню находились не на одной прямой, а на дуге, к примеру (отступ для каждого пункта меню получается свой). правил style.css менюшки, изменений никаких не наблюдается.

Подскажите, пожалуйста, как и где это реализовать.

Спасибо.

Bryant-24 · October 22, 2012

Приведите код, который Вы хотите исправить, или ссылку на сайт. А также то, как должно это выглядеть. А то так ничего не понятно.

LadyS · October 22, 2012

ссылки нет, локально стоит.

хочу исправить style.css менюшки так чтобы у каждого пункта меню при наведении был свой фон и каждый пункт находился не на одной прямой (как обычно) а по дуге... т.е. 1ый пункт padding-left:200px 2ой padding-left:275px 3ий padding-left:300px 4ый padding-left:250px 5ый padding-left:200px

как то так

Edited October 22, 2012 by LadyS

Bryant-24 · October 22, 2012

так чтобы у каждого пункта меню при наведении был свой фон

При наведении срабатывает правило (если конечно у Вас список, в котором содержаться ссылки):


ul li a:hover {
      /*тут Ваши стили для выделения*/
}

А править нужно скорей всего именно тот файл style.css, который лежит в папке вместе с шаблоном

LadyS · October 22, 2012

так чтобы у каждого пункта меню при наведении был свой фон
При наведении срабатывает правило (если конечно у Вас список, в котором содержаться ссылки):
ul li a:hover {
      /*тут Ваши стили для выделения*/
}
в битриксе меню через массив организовано arItem
А править нужно скорей всего именно тот файл style.css, который лежит в папке вместе с шаблоном

т.е. style.css не меню а шаблона? для фона напрямую в css прописывать адрес меню?

исходник style.css menu

ul#vertical-multilevel-menu, #vertical-multilevel-menu ul
{
	margin: 0; 
	padding: 0; 
	list-style: none; 
	width: 214px;
	font-size:12px;
}

a#vertical-multilevel-menu li
{
padding-left:150px !important;
}

/*Submenu box*/
#vertical-multilevel-menu li ul
{
	position:absolute;
	/*top:-999em;*/
	top:auto;
	display:none;
	z-index:500;
	height:auto;
	border:1px solid #C1C1C1;
	border-bottom:none;
	width:200px;
}

/* Submenu Items */ 
#vertical-multilevel-menu li a
{ 
	display: block; 
	text-decoration: none; 
	color: #4F4F4F; 
	font-weight:bold;
	padding: 5px; 
	background:#F5F5F5;
	border-bottom:1px solid #C1C1C1;
}

/*Items selected*/
#vertical-multilevel-menu li a.item-selected
{ 
	background-color: #D6D6D6;
}

/*Items Hover */
#vertical-multilevel-menu li a:hover
{
	background-color: #D6D6D6;
} 

/*Rootmenu Items*/
#vertical-multilevel-menu a.root-item
{
	color:#fff;
	font-weight:bold;
	font-size:12px;
	padding:5px 0 7px 35px;
	background:#61656A url(images/item_bg.gif) 0 0 no-repeat;
	border:none;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	/*height:26px;
	overflow:hidden;*/
}

/*Rootmenu Items hover*/
#vertical-multilevel-menu a.root-item:hover, #vertical-multilevel-menu a.root-item-selected:hover
{
	background:#61656A url(images/item_bg.gif) 0 -26px no-repeat;
}

/*Rootmenu Items Selected*/
#vertical-multilevel-menu a.root-item-selected
{
	color:#fff;
	font-weight:bold;
	font-size:12px;
	padding:5px 0 7px 35px;
	background:#61656A url(images/item_bg.gif) 0 -26px no-repeat;
	border:none;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	/*height:26px;
	overflow:hidden;*/
}

/*Parent item*/
#vertical-multilevel-menu a.parent
{
	background: #F5F5F5 url(images/arrow.gif) center right no-repeat;
	padding-right:10px;
}

/*Denied items*/
#vertical-multilevel-menu a.denied
{
	background: #F5F5F5 url(images/lock.gif) center right no-repeat;
	color:#DDDDDD;
	padding-right:10px;
}

/* Holly Hack. IE Requirement \*/ 
* html ul#vertical-multilevel-menu li { float: left; height: 1%; } 
* html ul#vertical-multilevel-menu li a { height: 1%; } 
/* End */ 


/*Submenu margin*/
#vertical-multilevel-menu li ul.root-item
{
	margin:-27px 0 0 210px;
}

#vertical-multilevel-menu li ul
{
	margin:-27px 0 0 133px;
}

/*Submenu hide*/
#vertical-multilevel-menu li:hover ul ul,
#vertical-multilevel-menu li.jsvhover ul ul,
#vertical-multilevel-menu li:hover ul ul ul,
#vertical-multilevel-menu li.jsvhover ul ul ul 
{
	/*top:-999em;*/
	display:none;
}

/*Submenu show*/
#vertical-multilevel-menu li:hover ul,
#vertical-multilevel-menu li.jsvhover ul,
#vertical-multilevel-menu li li:hover ul,
#vertical-multilevel-menu li li.jsvhover ul,
#vertical-multilevel-menu li li li:hover ul,
#vertical-multilevel-menu li li li.jsvhover ul
{
	/*z-index:1000;
	top:auto;*/
	display:block;
}

Edited October 22, 2012 by LadyS

Bryant-24 · October 22, 2012

т.е. style.css не меню а шаблона?

Вы меня не совсем правильно поняли. В Битриксе есть несколько файлов со стилями. Один из них (основной) располагается в корне шаблона всего сайта (т.е. примерно так /bitrix/templates/*здесь название Вашего шаблона сайта*/style.css). Для меню, как правило, тоже есть свой файл со стилями, а лежит он прямо в папке шаблона меню (т.е. /bitrix/templates/*здесь название Вашего шаблона сайта*/components/menu/.default/style.css). Вот и получается, что Вам нужно править именно тот файл со стилями, который предназначен для меню (лежит вместе с шаблоном в папке menu/.default). Это конечно, если Вы не изменяли структуру файлов и не создавали новых шаблонов для меню.

LadyS · October 22, 2012

т.е. style.css не меню а шаблона?
Вы меня не совсем правильно поняли. В Битриксе есть несколько файлов со стилями. Один из них (основной) располагается в корне шаблона всего сайта (т.е. примерно так /bitrix/templates/*здесь название Вашего шаблона сайта*/style.css). Для меню, как правило, тоже есть свой файл со стилями, а лежит он прямо в папке шаблона меню (т.е. /bitrix/templates/*здесь название Вашего шаблона сайта*/components/menu/.default/style.css). Вот и получается, что Вам нужно править именно тот файл со стилями, который предназначен для меню (лежит вместе с шаблоном в папке menu/.default). Это конечно, если Вы не изменяли структуру файлов и не создавали новых шаблонов для меню.

у меня файл лежит не в default а в C:\Bitrix\www\bitrix\templates\*имя шаблона*\components\bitrix\menu\vertical_multilevel но тип у мультилевел свой

Bryant-24 · October 22, 2012

А шаблон меню (C:\Bitrix\www\bitrix\templates\*имя шаблона*\components\bitrix\menu\vertical_multilevel\template.php) не изменяли? Он стандартный?

LadyS · October 22, 2012

А шаблон меню (C:\Bitrix\www\bitrix\templates\*имя шаблона*\components\bitrix\menu\vertical_multilevel\template.php) не изменяли? Он стандартный?

стандартный. руками сам там ничего не правил

Bryant-24 · October 22, 2012

А Вы пробовали поиграть со стилями при наведении?

/*Items Hover */
#vertical-multilevel-menu li a:hover
{
	background-color: #D6D6D6;
} 
/*Rootmenu Items hover*/
#vertical-multilevel-menu a.root-item:hover, #vertical-multilevel-menu a.root-item-selected:hover
{
	background:#61656A url(images/item_bg.gif) 0 -26px no-repeat;
}

LadyS · October 22, 2012

А Вы пробовали поиграть со стилями при наведении?

/*Items Hover */
#vertical-multilevel-menu li a:hover
{
	background-color: #D6D6D6;
} 
/*Rootmenu Items hover*/
#vertical-multilevel-menu a.root-item:hover, #vertical-multilevel-menu a.root-item-selected:hover
{
	background:#61656A url(images/item_bg.gif) 0 -26px no-repeat;
}

что это даст? тут прописаны стили для всего меню а не для конкретного пункта... мне надо для конкретного...

пробовал разные варианты с item_index: #vertical-multilevel-menu a.item_index:0 и различные вариации . # :

Bryant-24 · October 22, 2012

Для конкретного - Вам придется изменять не только сам файл со стилями, но и шаблон меню. А именно (это просто первое, что приходит на ум) пустить счетчик ($i++) и добавлять его, скажем, к классам, присваиваем для тега li

<li class="num<?=$i?>">

для того, чтобы как то их различать и в соответствии с принятыми данными - редактировать их через стили, например:


.root-item li.num0 {
     padding-left: 200px;
}
.root-item li.num1 {
     padding-left: 275px;
}
.root-item li.num2 {
     padding-left: 300px;
}
.root-item li.num3 {
     padding-left: 250px;
}
.root-item li.num4 {
     padding-left: 200px;
}

Edited October 22, 2012 by Bryant-24

LadyS · October 22, 2012

Для конкретного - Вам придется изменять не только сам файл со стилями, но и шаблон меню. А именно (это просто первое, что приходит на ум) пустить счетчик ($i++) и добавлять его, скажем, к классам, присваиваем для тега li
<li class="num<?=$i?>">
для того, чтобы как то их различать и в соответствии с принятыми данными - редактировать их через стили, например:
.root-item li.num0 {
     padding-left: 200px;
}
.root-item li.num1 {
     padding-left: 275px;
}
.root-item li.num2 {
     padding-left: 300px;
}
.root-item li.num3 {
     padding-left: 250px;
}
.root-item li.num4 {
     padding-left: 200px;
}

каким образом это можно сделать?

Bryant-24 · October 22, 2012


<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>

<?if (!empty($arResult)):?>
<ul id="vertical-multilevel-menu">

<?
$i=0; //Добавляем счетчик
$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 class="root-item">
		<?else:?>
			<li><a href="<?=$arItem["LINK"]?>" class="parent<?if ($arItem["SELECTED"]):?> item-selected<?endif?>"><?=$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 class="num<?=$i?>"><a href="<?=$arItem["LINK"]?>" <?if ($arItem["SELECTED"]):?> class="item-selected"<?endif?>><?=$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 class="num<?=$i?>"><a href="" class="denied" title="<?=GetMessage("MENU_ITEM_ACCESS_DENIED")?>"><?=$arItem["TEXT"]?></a></li>
			<?endif?>

		<?endif?>

	<?endif?>

	<?$previousLevel = $arItem["DEPTH_LEVEL"];?>
    <?$i++ //Увеличиваем его на 1?>
<?endforeach?>

<?if ($previousLevel > 1)://close last item tags?>
	<?=str_repeat("</ul></li>", ($previousLevel-1) );?>
<?endif?>

</ul>
<?endif?>

Edited October 22, 2012 by Bryant-24

LadyS · October 22, 2012


<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>

<?if (!empty($arResult)):?>
<ul id="vertical-multilevel-menu">

<?
$i=0; //Добавляем счетчик
$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 class="root-item">
		<?else:?>
			<li><a href="<?=$arItem["LINK"]?>" class="parent<?if ($arItem["SELECTED"]):?> item-selected<?endif?>"><?=$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 class="num<?=$i?>"><a href="<?=$arItem["LINK"]?>" <?if ($arItem["SELECTED"]):?> class="item-selected"<?endif?>><?=$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 class="num<?=$i?>"><a href="" class="denied" title="<?=GetMessage("MENU_ITEM_ACCESS_DENIED")?>"><?=$arItem["TEXT"]?></a></li>
			<?endif?>

		<?endif?>

	<?endif?>

	<?$previousLevel = $arItem["DEPTH_LEVEL"];?>
    <?$i++ //Увеличиваем его на 1?>
<?endforeach?>

<?if ($previousLevel > 1)://close last item tags?>
	<?=str_repeat("</ul></li>", ($previousLevel-1) );?>
<?endif?>

</ul>
<?endif?>

что-то не пойму... а обращение в css какое будет? это где увидеть? сорри за такие вопросы, в php только-только начинаю ковыряться

Bryant-24 · October 23, 2012

В мозилле или хроме смотри через Firebug. Классы примерно будут следующие:


#vertical-multilevel-menu ul.root-item li.num0:hover{
     /*описание при наведении первого подпункта*/
}
#vertical-multilevel-menu ul.root-item li.num1:hover{
     /*описание при наведении второго подпункта*/
}

И так далее...

Сразу оговорюсь - могут быть ошибки, так как это все в теории - проверять надо.

Edited October 23, 2012 by Bryant-24

Быколай · October 23, 2012

:facepalmxd:

конечно простите за оффтоп, но почему-то мне кажется, что вы тут наплодили много адово сложного кода... и дело не в том что вы плохо кодите, а, имхо, в том, что битрикт вынуждает это делать. создавать много кода, который сложен в понимании, сложен в поддержке.

Bryant-24 · October 23, 2012

вы тут наплодили много адово сложного кода

Почему же - вовсе нет Я всего лишь добавил 2 строчки кода в стандартный шаблон компонента "меню"

Быколай · October 23, 2012

вы тут наплодили много адово сложного кода
Почему же - вовсе нет Я всего лишь добавил 2 строчки кода в стандартный шаблон компонента "меню"

вот в том-то и дело, что битрикс изначально вынуждает этим сложный код делать. Проще всё должно быть, проще

LadyS · October 23, 2012

В мозилле или хроме смотри через Firebug. Классы примерно будут следующие:
#vertical-multilevel-menu ul.root-item li.num0:hover{
     /*описание при наведении первого подпункта*/
}
#vertical-multilevel-menu ul.root-item li.num1:hover{
     /*описание при наведении второго подпункта*/
}
И так далее...
Сразу оговорюсь - могут быть ошибки, так как это все в теории - проверять надо.

т.е. num0...n будет? где это в php коде увидеть?

инет вчера отвалился, не было возможности проверить

Edited October 23, 2012 by LadyS

Bryant-24 · October 23, 2012

т.е. num0...n будет?

Да, именно так

где это в php коде увидеть?


<?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 class="num<?=$i?>"><a href="<?=$arItem["LINK"]?>" <?if ($arItem["SELECTED"]):?> class="item-selected"<?endif?>><?=$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 class="num<?=$i?>"><a href="" class="denied" title="<?=GetMessage("MENU_ITEM_ACCESS_DENIED")?>"><?=$arItem["TEXT"]?></a></li> <!--И здесь также происходит задание стиля (в зависимости от прав)-->
     <?endif?>
<?endif?>

LadyS · October 25, 2012

вы тут наплодили много адово сложного кода
Почему же - вовсе нет Я всего лишь добавил 2 строчки кода в стандартный шаблон компонента "меню"

если я правильно понял меняем код php полностью и меняем css... изменений не вижу через firebug вообще те строки какие прописал в css не фигурируют да и другие пропали... только первая строка

Edited October 25, 2012 by LadyS

LadyS · October 26, 2012

вопрос актуален... нужна помощь

LadyS · October 28, 2012

кто знает как это сделать?

Быколай · October 29, 2012

если я правильно понял меняем код php полностью и меняем css... изменений не вижу через firebug вообще те строки какие прописал в css не фигурируют да и другие пропали... только первая строка

Вариант 1: кэширование системы, оно часто подлянки такие делает.

Вариант 2: не те файлы правите, в битриксе пути к шаблонам-кусочкам вроде

/public_html/bitrix/templates/site_ru/components/bitrix/catalog/catalog_noprice/site_one/catalog.section/.default/template.php

норма, и таких включений n*10 на странице. Чёрт ногу сломит. А какие шаблоны задействованы в вашем случае, телепатически сложно установить. Для меня даже не телепатически это не просто, я в специальном файлике храню эти пути с комментами какой за что и где отвечает :lol:

LadyS · October 29, 2012

если я правильно понял меняем код php полностью и меняем css... изменений не вижу через firebug вообще те строки какие прописал в css не фигурируют да и другие пропали... только первая строка
Вариант 1: кэширование системы, оно часто подлянки такие делает.
Вариант 2: не те файлы правите, в битриксе пути к шаблонам-кусочкам вроде
/public_html/bitrix/templates/site_ru/components/bitrix/catalog/catalog_noprice/site_one/catalog.section/.default/template.php
норма, и таких включений n*10 на странице. Чёрт ногу сломит. А какие шаблоны задействованы в вашем случае, телепатически сложно установить. Для меня даже не телепатически это не просто, я в специальном файлике храню эти пути с комментами какой за что и где отвечает

вариант 1: кэширование отключено

вариант два: надо посмотреть

Sign In

Кастомизация меню битрикс

Question

Link to comment

Share on other sites

33 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information