Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.71/7: Рейтинг темы: голосов - 7, средняя оценка - 4.71
0 / 0 / 1
Регистрация: 14.04.2015
Сообщений: 49
1

Разместить пункты верхнего меню по центру | bitrix:horizontal:multilevel

28.07.2016, 10:55. Просмотров 1350. Ответов 11

Здравствуйте! В битриксе есть шаблон выпадающего меню. Но не получается разместить все пункты по центру, они оказываются слева. Помогите пожалуйста! Прилагаю код CSS и код PHP файла, где используются стили. Или можно скачать в архиве. menu.rar
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
/**Top menu**/
#horizontal-multilevel-menu,#horizontal-multilevel-menu ul
{   
    margin:0; padding:0;
    position: relative;
    /*left:20%;*/
    background:#1974C2 repeat-x;
    min-height:27px;
    width:100%;
    list-style:none;
    font-size:11px;
    /*text-align:center;*/
    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;
}
PHP/HTML
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
<?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?>
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
28.07.2016, 10:55
Ответы с готовыми решениями:

Выровнять пункты меню вертикально по центру
Подскажите в вертикальным выравниванием. есть менюшка нужно чтобы пункты меню были выровнены...

Разместить логотип по центру
Всем привет! Я только учусь создавать сайт по книге Русакова. Возникла такая проблема: логотип не...

Разместить форму по центру
Всем добрый день. Пытаюсь вникнуть в Bootstrap. Сейчас решил разработать форму, получилось как-то...

Разместить текст по центру
Как сделать, чтобы текст был ровно по центру и по горизонтали, и по вертикали? &lt;a href=&quot;http://a&quot;...

11
Эксперт HTML/CSS
2943 / 2507 / 1063
Регистрация: 15.12.2012
Сообщений: 9,389
Записей в блоге: 9
28.07.2016, 11:41 2
Petrouch, есть ссылочка на хостинг? Есть подозрение, что данный баг из-за повсеместного использования float:left...
0
0 / 0 / 1
Регистрация: 14.04.2015
Сообщений: 49
28.07.2016, 12:22  [ТС] 3
http://mrc.bukettrav.ru/ тестовый хостинг
0
Эксперт HTML/CSS
2943 / 2507 / 1063
Регистрация: 15.12.2012
Сообщений: 9,389
Записей в блоге: 9
28.07.2016, 12:37 4
Petrouch, добавьте:
CSS
1
#horizontal-multilevel-menu{text-align:center}
0
0 / 0 / 1
Регистрация: 14.04.2015
Сообщений: 49
28.07.2016, 12:45  [ТС] 5
Добавил
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
/**Top menu**/
#horizontal-multilevel-menu,#horizontal-multilevel-menu ul
{   
    margin:0; padding:0;
    /*left:20%;*/
    background:#1974C2 repeat-x;
    min-height:27px;
    width:100%;
    list-style:none;
    font-size:11px;
    /*text-align:center;*/
    float:left;
    /*font-size:90%*/
}
 
#horizontal-multilevel-menu{text-align:center}
 
/*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;
}
К сожалению не передвинулось.
Нужно сделать примерно так:

Разместить пункты верхнего меню по центру | bitrix:horizontal:multilevel
0
12 / 12 / 7
Регистрация: 14.01.2016
Сообщений: 264
28.07.2016, 12:46 6
Тут наверное нужно убирать float и потом выставлять ul li в один ряд.
0
0 / 0 / 1
Регистрация: 14.04.2015
Сообщений: 49
28.07.2016, 12:48  [ТС] 7
А как это реализовать? Вставить в один ряд имею ввиду
0
Эксперт HTML/CSS
2943 / 2507 / 1063
Регистрация: 15.12.2012
Сообщений: 9,389
Записей в блоге: 9
28.07.2016, 12:49 8
Petrouch, забыл же, ещё добавить:
CSS
1
#horizontal-multilevel-menu li{display:inline-block}
вместо float:left...
Чтобы меню выглядело,как на картинке потребуется дополнительно добавить либо фиксированную ширину для пунктов - либо отступы(внутренние или внешние)...
1
0 / 0 / 1
Регистрация: 14.04.2015
Сообщений: 49
28.07.2016, 12:53  [ТС] 9
А как по Вашему опыту лучше сделать, чтобы меньше переписывать кода в css?
0
Эксперт HTML/CSS
2943 / 2507 / 1063
Регистрация: 15.12.2012
Сообщений: 9,389
Записей в блоге: 9
28.07.2016, 12:57 10
Лучший ответ Сообщение было отмечено Petrouch как решение

Решение

Petrouch, я бы ширину(150px к примеру) использовал, как я понимаю шаблон у вас будет неадаптивный... Если адаптивный, то лучше резиновые внутренние отступы для элементов списка... И уберите:
CSS
1
#horizontal-multilevel-menu li{float:left}
у элементов списка!
1
0 / 0 / 1
Регистрация: 14.04.2015
Сообщений: 49
28.07.2016, 13:22  [ТС] 11
Спасибо Вам огромное! Если не трудно, скажите пожалуйста как сделать резиновые внутренние отступы?
0
Эксперт HTML/CSS
2943 / 2507 / 1063
Регистрация: 15.12.2012
Сообщений: 9,389
Записей в блоге: 9
28.07.2016, 13:29 12
Цитата Сообщение от Petrouch Посмотреть сообщение
Если не трудно, скажите пожалуйста как сделать резиновые внутренние отступы?
Всё как обычно только вместо пикселей используйте проценты... К примеру: padding:0 2.5%... Проценты высчитываются с учётом ширины родителя...
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
28.07.2016, 13:29

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Разместить блок по центру
не получается установить блок по центру, помогите, пожалуйста &lt;div class=&quot;wy&quot;&gt; &lt;div...

Разместить ссылки по центру
Вот я столкнулся с такой проблемой. Обратите внимание на объект &quot;Понравилась ли вам...

Как в меню (шаблон horizontal multilevel) скрыть вывод товаров, оставив только разделы?
Добрый день! Инфоблок каталог - некоторые товары находятся в двух категориях одновременно, из-за...

Кастомизация horizontal-multilevel
Добрый день, помогите понять, где ошибка с трёхуровневым horizontal-multilevel меню в битрикс,...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
12
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.