Jump to content
  • 0

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


LadyS
 Share

Question

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

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

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

Спасибо.

Link to comment
Share on other sites

Recommended Posts

  • 0

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

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

как то так

Edited by LadyS
Link to comment
Share on other sites

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

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


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

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

Link to comment
Share on other sites

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

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


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 by LadyS
Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

  • 0
т.е. 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 но тип у мультилевел свой

Link to comment
Share on other sites

  • 0

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

/*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;
}

Link to comment
Share on other sites

  • 0

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

/*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 и различные вариации . # :

Link to comment
Share on other sites

  • 0

Для конкретного - Вам придется изменять не только сам файл со стилями, но и шаблон меню. А именно (это просто первое, что приходит на ум) пустить счетчик ($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 by Bryant-24
Link to comment
Share on other sites

  • 0

Для конкретного - Вам придется изменять не только сам файл со стилями, но и шаблон меню. А именно (это просто первое, что приходит на ум) пустить счетчик ($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;
}

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

Link to comment
Share on other sites

  • 0

<?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 by Bryant-24
Link to comment
Share on other sites

  • 0


<?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 только-только начинаю ковыряться

Link to comment
Share on other sites

  • 0

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


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

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

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

Edited by Bryant-24
Link to comment
Share on other sites

  • 0

:facepalmxd:

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

  • 0

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


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

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

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

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

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

Edited by LadyS
Link to comment
Share on other sites

  • 0
т.е. 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?>

Link to comment
Share on other sites

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

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

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

Edited by LadyS
Link to comment
Share on other sites

  • 0

если я правильно понял меняем код 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:

Link to comment
Share on other sites

  • 0

если я правильно понял меняем код 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:

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy