Доработка многоуровнего вертикального меню

@Itachi261092 · Регистрация: 23.01.2012

Студворк — интернет-сервис помощи студентам

Здравствуйте уважаемые форумчане, подскажите пожалуйста или лучше кодом помогите. есть 3 проблемы:
Сделал менюху, подключаю стандартным bitrix:menu, за основу взял шаблон tree и изменил его под свой дизайн. (удалил все стили шаблона и подставил свои) но получилась такая беда - на 2 уровне все ссылки (текст) подсвечиваются тем же цветом что и выделенный блок главного меню. то есть span'ы принимают значение родительского элемента. при этом если во вторичном меню при активной ссылке назначить другой цвет то всё работает. а назначение исходного не работает. пробовал задать через класс. не помогает. пробовал разделять родительские спаны и наследуемые на 2 класса - работает, но структура меню каверкается и исправить у меня не получилось. вот собственно первая беда

Беда вторая - у меня в главном родительском диве задан фон. который должен распространяться по высоте на всё меню +20% (то есть снизу должен слегка вылазить за нижний пункт меню) если использовать только родительские пункты то всё работает. но если нижний пункт содержит вложенные элементы то фон под них не расширяется и остаётся на месте. то есть он ровняется только на главный список а если внутри главного что то выходит за границы - это не принимается.

И тетье это собственно то что связано с вторичным меню. если применить его к последнему пункту то всё более менее выглядит правильно. но если в середине - всё меню каверкается ужасно.

Буду очень благодарен за любую помощь. выкладываю исходники:

HTML5
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
<!DOCTYPE html>
<html>
    <head>
        <?$APPLICATION->ShowHead();?>
        <title><?$APPLICATION->ShowTitle();?></title>
        <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
    </head>
    <?
    CJSCore::Init(array("jquery"));
    $APPLICATION->SetAdditionalCSS('/bitrix/templates/.default/bootstrap/css/bootstrap.css');
    $APPLICATION->SetAdditionalCSS('/bitrix/templates/.default/bootstrap/css/bootstrap-responsive.css');
    ?>
    <body>
        <div id="panel">
            <?$APPLICATION->ShowPanel();?>
        </div>
        <div class="container">
            <div class="row-fluid">
                <div class="span4">
                    <?$APPLICATION->IncludeComponent("bitrix:menu","left_menu",Array(
                        "ROOT_MENU_TYPE" => "left",
                        "MAX_LEVEL" => "2",
                        "CHILD_MENU_TYPE" => "left",
                        "USE_EXT" => "N",
                        "DELAY" => "N",
                        "ALLOW_MULTI_SELECT" => "Y",
                        "MENU_CACHE_TYPE" => "N",
                        "MENU_CACHE_TIME" => "3600",
                        "MENU_CACHE_USE_GROUPS" => "N",
                        "MENU_CACHE_GET_VARS" => "",
                        "STYLES" => "",
                    )
                    );?>
                 </div>
               </div>
         </div>
</body>
</html>

и цсс:

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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
body {
    background: black;
    background-image: url("images/background.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
}
body .container{
    background: url("images/white_lines.png");
}
.left-menu{
    margin: 20px auto;
    background-color: #515151;
    width: 280px;
    height: 120%;
}
.left-menu-head{
    position: relative;
    left: -10px;
    width: 300px;
    height: 50px;
    background: #333333;
    list-style: none;
}
.left-menu-head span{
    font-family: Tahoma, bold;
    font-size: 24px;
    color: #cccccc;
    position: relative;
    top: 15px;
    left: 25%;
}
.parent-li{
    position: relative;
    right: 35px;
    list-style-type: none;
    height: 40px;
    background-color: #444444;
    margin: 15px 0 0 0;
    width: 300px;
    -moz-box-shadow: 0 0 20px rgba(0,0,0,1); /* Для Firefox */
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,1); /* Для Safari и Chrome */
    box-shadow: 0 0 20px rgba(0,0,0,1); /* Параметры тени */
}
.square{
    background-image: url("images/btn_square.png");
    height: 40px;
    position: absolute;
    width: 40px;
}
.line{
    position: absolute;
    left: 43px;
    width: 254px;
    height: 34px;
}
.parent-li span{
    position: relative;
    left: 50px;
    top: 10px;
}
.parent-li span a{
    font-family: Tahoma, bold;
    font-size: 18px;
    color: #cccccc;
    text-decoration:none;
}
.parent-li:hover .square{
    background-image: url("images/btn_square_active.png");
    border-radius: 3px;
    left: -3px;
    top: -3px;
    border: 3px solid  #99cc33;
}
.parent-li:hover .line{
    border: 3px solid  #99cc33;
    border-left: none;
}
.parent-li:hover span a {
    color: #99cc33;
}
.child-ul{
    margin: 25px 20px 0 40px;
}
.child-li{
    margin-bottom: 5px;
    list-style-type: none;
    height: 20px;
    background-color: #444444;
    -moz-box-shadow: 0 0 20px rgba(0,0,0,1); /* Для Firefox */
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,1); /* Для Safari и Chrome */
    box-shadow: 0 0 20px rgba(0,0,0,1); /* Параметры тени */
}
.child-square{
    background: url("images/btn.png");
    background-repeat: no-repeat;
    background-position: center;
    width: 20px;
    height: 20px;
}
.child-li span{
    color: #cccccc;
    top: -20px;
    left: 30px;
}
.child-li span a{
    font-family: Tahoma, bold;
    font-size: 14px;
    color: #cccccc;
    text-decoration:none;
}
.child-li:hover .child-square{
    background-image: url("images/btn_active.png");
}
.child-li:hover span a {
    color: #99cc33;
}

также прилагаю шаблон:

PHP
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
<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
 
<?if (!empty($arResult)):?>
 
<div class="left-menu">
    <div class="left-menu-head"><span>МЕНЮ САЙТА</span></div>
<ul>
<?
$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"]):?>
            <li class="parent-li<?if($arItem["CHILD_SELECTED"] !== true):?> close"<?endif?>">
                <div class="folder" onClick="OpenMenuNode(this)"></div>
                <div class="item-text"><div class="square"></div><div class="line"></div><span><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></span></div>
                <ul class="child-ul">
 
    <?else:?>
 
        <?if ($arItem["PERMISSION"] > "D"):?>
            <?if ($arItem["DEPTH_LEVEL"] == 1)://если главное меню?>
                <li class="parent-li">
                    <div class="item-text"><div class="square"></div><div class="line"></div><span><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></span></div>
                </li>
            <?else://если побочное меню?>
                <li class="child-li">
                    <div class="item-text"><div class="child-square"></div><span><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></span></div>
                </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>
<?endif?>

и папку с изображениями прилагаю в архиве

кто чем может помочь?

@Itachi261092 · 27.05.2013, 16:48 **[ТС]**

Update: 2 проблему вроде бы решил. 3 тем не менее не позволяет решить это полностью. у меня в тестовом варианте во вторичном меню 3 пункта. если применять это к любому из основных то всё работает. но если сделать 2 и более основных пункта с раскрывающимся списком то нижняя часть элементов смещается вниз и становится прозрачной. проблему пока не выявил

Добавлено через 2 часа 17 минут
Update. Всё решил... сам спросил - сам ответил. жаль никто не захотел оперативно помочь =)

@Taatshi · 28.05.2013, 00:42

Itachi261092, Вы довольно быстро справились - спецы не успели подтянуться

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

@Itachi261092 · 28.05.2013, 00:47 **[ТС]**

Сообщение от Taatshi

Вы напишите, пожалуйста

ох как бы я хотел чтобы спецы и особенно люди на официальном форуме битрикса хоть что то так отвечали и писали. некоторые мои темы там неделями без ответов висели. чтоб они так же всю жизнь платёжки от клиентов получали... Завтра приду на работу и скопирую правильную вёрстку. но там меню статичное пока. для движения jscrypt не дам. уж извините. авторская работа будет, и скорее всего не моя

@Itachi261092 · 28.05.2013, 10:42 **[ТС]**

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

PHP
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
<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
 
<?if (!empty($arResult)):?>
 
<div class="left-menu">
    <div class="left-menu-head"><span><?$APPLICATION->ShowTitle();?></span></div>
<ul>
<?
$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"]):?>
            <li>
                <div class="grey-background">
                    <div class="square"></div>
                    <div class="line"></div><!--для рамки вокруг ссылок-->
                    <span>
                        <a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a>
                    </span>
                </div>
                <ul>
 
    <?else:?>
 
        <?if ($arItem["PERMISSION"] > "D"):?>
            <?if ($arItem["DEPTH_LEVEL"] == 1)://если главное меню?>
                <li>
                    <div class="grey-background">
                        <div class="square"></div>
                        <div class="line"></div>
                        <span>
                            <a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a>
                        </span>
                    </div>
                </li>
            <?else://если побочное меню?>
                <li>
                    <span>
                            <a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a>
                    </span>
                </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>
<?endif?>

*прим: было вырезано всё лишнее, все стандартные классы шаблона и дивы, всё что не относилось к моему меню первоначально и было в дефолтном. осталось только нужное
Хтмл:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?$APPLICATION->IncludeComponent("bitrix:menu","nav_bar",Array(
                                "ROOT_MENU_TYPE" => "top",
                                "MAX_LEVEL" => "1",
                                "CHILD_MENU_TYPE" => "left",
                                "USE_EXT" => "N",
                                "DELAY" => "N",
                                "ALLOW_MULTI_SELECT" => "N",
                                "MENU_CACHE_TYPE" => "N",
                                "MENU_CACHE_TIME" => "3600",
                                "MENU_CACHE_USE_GROUPS" => "N",
                                "MENU_CACHE_GET_VARS" => "",
                                "STYLES" => "nav pull-right",
                            )
                        );?>

*прим: ничего не поменялось за исключением 1 параметра вызова компонента ("ALLOW_MULTI_SELECT" => "N")
CSS изменился сильно:

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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
.left-menu{
    margin: 20px 0 0 30px;
    background-color: #515151;
    width: 280px;
    height: 120%;
}
.left-menu-head{
    position: relative;
    left: -10px;
    width: 300px;
    height: 50px;
    background: #333333;
    list-style: none;
}
.left-menu-head span{
    font-family: Tahoma, bold;
    font-size: 24px;
    color: #cccccc;
    position: relative;
    top: 15px;
    padding-left: 20px;
    text-align: center;
}
.left-menu > ul > li{
    list-style-type: none;
    min-height: 40px;
}
.grey-background{
    position: relative;
    right: 35px;
    list-style-type: none;
    height: 40px;
    margin: 15px 0 0 0;
    width: 300px;
    background-color: #444444;
    -moz-box-shadow: 0 0 20px rgba(0,0,0,1); /* Для Firefox */
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,1); /* Для Safari и Chrome */
    box-shadow: 0 0 20px rgba(0,0,0,1); /* Параметры тени */
}
.square{
    background-image: url("images/btn_square.png");
    height: 40px;
    position: absolute;
    width: 40px;
}
.line{
    position: absolute;
    left: 43px;
    width: 254px;
    height: 34px;
}
.left-menu > ul li div span{
    position: relative;
    left: 50px;
    top: 10px;
}
.left-menu > ul li div span a{
    font-family: Tahoma, bold;
    font-size: 18px;
    color: #cccccc;
    text-decoration:none;
}
.left-menu > ul li:hover .square{
    background-image: url("images/btn_square_active.png");
    border-radius: 3px;
    left: -3px;
    top: -3px;
    border: 3px solid  #99cc33;
}
.left-menu > ul li:hover .line{
    border: 3px solid  #99cc33;
    border-left: none;
}
.left-menu > ul li:hover div > span a{
    color: #99cc33;
}
.left-menu > ul ul{
    margin: 10px 0 0 5px;
}
.left-menu > ul ul li{
    margin-bottom: 5px;
    list-style-type: none;
    height: 26px;
    width: 220px;
    background-color: #444444;
    -moz-box-shadow: 0 0 20px rgba(0,0,0,0.7); /* Для Firefox */
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.7); /* Для Safari и Chrome */
    box-shadow: 0 0 20px rgba(0,0,0,0.7); /* Параметры тени */
}
.left-menu > ul ul li span{
    position: relative;
    width: 245px;
    color: #cccccc;
    left: 20px;
}
.left-menu > ul ul li span a{
    font-family: Tahoma, bold;
    font-size: 14px;
    color: #cccccc;
    text-decoration:none;
}
.left-menu > ul ul li:hover span a {
    color: #99cc33;
}

*прим: код цсс не очень оптимизирован и может быть доработан практически без применения классов. что в принципе было бы удобнее. но так как я начинающий разработчик и штат сотрудников у нас не большой - у нас допустимо оставить так, потому что кроме меня это мало кто будет править, а я свои классы помню

Большая просьба не воровать менюху, а использовать только в качестве примера. Если кому то поможет данный код, так же большая просьба отписаться и по возможности показать сайт где была использована эта структура =) в дополнение прилагаю скриншот как это выглядеть должно. при желании и умении можно сделать скриптик чтобы менюха выдвигалась (раздвигалась и сдвигалась скрывая или открывая побочное меню) - если кто то возьмётся, дайте знать о результатах - интересно посмотреть чужую реализацию =) Всем удачи!

@Itachi261092 · 28.05.2013, 17:55 **[ТС]**

Всем внимание! добавил вот ЭТУ штуку. а точнее стырил из неё jscript, прописал в шаблон вызов 2 jscript-файлов, изменил всего одну строку в файле sript.js

PHP
1
$('li.button a').click(function(e){

на

PHP
1
$('.square').click(function(e){

также если изменять значения slow в строке

PHP
1
2
$('.dropdown').not(dropDown).slideUp('slow');
        dropDown.slideToggle('slow');

можно настроить скорость раскрытия и закрытия меню!

Ура товарищи, выдвигающаяся менюха ГОТОВА!
Но есть и неудачка - оригинальная менюха прыгает при открытии, моя же просто стабильно выдвигается и сдвигается. Кто нибудь может помочь настроить данный скрипт так чтобы моя менюха прыгала как оригинальная? А то там ничегошеньки не понятно - сплошные идентификаторы однобуквенные. Сложно ориентироваться. Буду очень благодарен всем кто окажет помощь!

@Taatshi · 28.05.2013, 22:44

Itachi261092, ну это Вам либо в раздел яваскрипт, либо во фриланс - на выбор.

Новые блоги и статьи Все статьи Все блоги /
Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .	Фото: Daniel Greenwood kumehtar 13.11.2025

@Itachi261092 Веб-Разработчик 82 / 82 / 9 Регистрация: 23.01.2012 Сообщений: 702
	27.05.2013, 16:48 [ТС]
	Update: 2 проблему вроде бы решил. 3 тем не менее не позволяет решить это полностью. у меня в тестовом варианте во вторичном меню 3 пункта. если применять это к любому из основных то всё работает. но если сделать 2 и более основных пункта с раскрывающимся списком то нижняя часть элементов смещается вниз и становится прозрачной. проблему пока не выявил Добавлено через 2 часа 17 минут Update. Всё решил... сам спросил - сам ответил. жаль никто не захотел оперативно помочь =) 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	28.05.2013, 00:42
	Itachi261092, Вы довольно быстро справились - спецы не успели подтянуться Вы напишите, пожалуйста, как решили - Ваш ответ может кому-то в будущем помочь. 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	28.05.2013, 22:44
	Itachi261092, ну это Вам либо в раздел яваскрипт, либо во фриланс - на выбор. 1