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

Откуда в элементи li берется стрелка

15.07.2015, 15:52. Показов 3075. Ответов 15
Метки нет (Все метки)

Здравствуйте! Подскажите пожалуйста с помощью чего к элементам li имеющим выпадающий список добавляется стрелочка. Просто нужно сделать валидный код. А в меню к ul применен id. Соответственно он и у вложенных ul применяется, получается дублирование. Хочу изменить на class, так начинают пропадать стрелочки. вот сайт http://holiday-market.ru/
0

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
15.07.2015, 15:52
Ответы с готовыми решениями:

Откуда берется 2Х
Откуда 2X берётся в самом начале? Объясните пожалуйста,напишите правильное решение.

Объясните откуда берется n
Сейчас самостоятельно изучаю Си и наткнулся на кое-что непонятное.Дана программа: // Fig. 5.19:...

Откуда берется отступ
Добрый день уважаемые. Я видать пропустил где-то кусок в образовании, но не могу понять откуда...

Откуда берётся бредок?
Файлы скачаны из вКонтакта, через плагин мозилы, всего 4 таких фалйа, 3 не может проиграть ниодин...

15
Эксперт HTML/CSS
2953 / 2540 / 1065
Регистрация: 15.12.2012
Сообщений: 9,517
Записей в блоге: 10
15.07.2015, 16:01 2
KyponaTka, можно с помощью
HTML5
1
 background:url(img.png) center bottom no-repeat
, а в Вашем примере скорее всего иконочным шрифтом...
0
0 / 0 / 0
Регистрация: 19.02.2014
Сообщений: 151
15.07.2015, 16:10  [ТС] 3
да там подключен файл font.css где прописано
CSS
1
2
3
.icon-angle-down:before {
  content: "\f107";
}
а в основном файле со стилями
CSS
1
2
3
4
5
6
7
#menu-custom > li > a > i {
    bottom: 4px;
    color: rgb(255, 255, 255);
    left: 50%;
    margin-left: -3px;
    position: absolute;
}
просто почему когда просто меняю id на class, стрелки исчезают?
0
Эксперт HTML/CSS
2953 / 2540 / 1065
Регистрация: 15.12.2012
Сообщений: 9,517
Записей в блоге: 10
15.07.2015, 16:17 4
KyponaTka, id на класс меняете только в font.css? Или в html тоже?
0
0 / 0 / 0
Регистрация: 19.02.2014
Сообщений: 151
15.07.2015, 16:21  [ТС] 5
html я вообще не трогаю, а в файле с css стилями везде где указано #menu-custom меняю на .menu-custom. И после этого у меня элемент i который должен добавляться после тэга а, исчезает.
0
Эксперт HTML/CSS
2953 / 2540 / 1065
Регистрация: 15.12.2012
Сообщений: 9,517
Записей в блоге: 10
15.07.2015, 16:25 6
Цитата Сообщение от KyponaTka Посмотреть сообщение
html я вообще не трогаю
Так в html тоже id на class надо заменить для элемента i... Или я чего-то не понимаю?
0
0 / 0 / 0
Регистрация: 19.02.2014
Сообщений: 151
15.07.2015, 16:28  [ТС] 7
ну да я в шаблоне в админке меняю на class, только все равно стрелок не видно
0
Эксперт HTML/CSS
2953 / 2540 / 1065
Регистрация: 15.12.2012
Сообщений: 9,517
Записей в блоге: 10
15.07.2015, 16:36 8
KyponaTka, ну тогда давайте код в студию будем разбираться или ссылку на хостинг... По идее всё должно работать видимо где-то закралась ошибка...
0
0 / 0 / 0
Регистрация: 19.02.2014
Сообщений: 151
15.07.2015, 16:42  [ТС] 9
вот шаблон меню
HTML5
1
<ul class="menu-custom" [[+wf.classes]]>[[+wf.wrapper]]</ul>
вот код сss. Везде поменяла id на class. и вот если зайти на сайт стрелок нет.
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
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
.menu-custom,.menu-custom ul{
    margin:0;
    padding:0;
    list-style:none
}
 
.menu-custom:before,.menu-custom:after{
    content:"";
    display:table
}
 
.menu-custom:after{
    clear:both
}
 
.menu-custom{
    zoom:1
}
 
.desktop .menu-custom >li{
    float:left;
    position:relative
}
 
.desktop .menu-custom > li:first-child >a{
    border-radius:16px 0 0 16px;
    -moz-border-radius:16px 0 0 16px;
    -webkit-border-radius:16px 0 0 16px
}
 
.desktop .menu-custom > li >a{
    color:#fff;
    text-transform:uppercase;
    display:block;
    border-right:1px solid #070707;
    font-weight:bold;
    font-size:12px;
    line-height:18px;
    text-decoration:none;
    padding:16px 12px 17px;
    font-family:'Roboto',sans-serif;
    position:relative
}
 
.desktop .menu-custom >li> a>i{
    position:absolute;
    bottom:4px;
    color:#fff;
    left:50%;
    margin-left:-3px
}
 
.desktop .menu-custom >li > a:hover,.desktop .menu-custom > li:hover > a,.desktop .menu-custom > li.active > a,.desktop .menu-custom > li.sfHoverForce > a{
    color:#fff;
    background:#343434;
    background:url(data:image/svg+xml;
    base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzM0MzQzNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyYTJhMmEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background:-moz-linear-gradient(top,#343434 0,#2a2a2a 100%);
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#343434),color-stop(100%,#2a2a2a));
    background:-webkit-linear-gradient(top,#343434 0,#2a2a2a 100%);
    background:-o-linear-gradient(top,#343434 0,#2a2a2a 100%);
    background:-ms-linear-gradient(top,#343434 0,#2a2a2a 100%);
    background:linear-gradient(to bottom,#343434 0,#2a2a2a 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#343434',endColorstr='#2a2a2a',GradientType=0 )
}
.desktop .menu-custom ul{
    margin:0;
    filter:alpha(opacity=0);
    opacity:0;
    visibility:hidden;
    position:absolute;
    top:56px;
    left:0;
    z-index:1;
    background:#2d2d2d;
    -webkit-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
    transition:all 0.3s ease;
    width:258px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
 
.desktop .menu-custom ul a{
    display:block;
    white-space:nowrap;
    float:none;
    text-transform:none;
    font-size:13px;
    line-height:18px;
    font-weight:normal;
    color:#868686;
    padding:5px 7px
}
 
.desktop .menu-custom ul li:hover > a{
    color:#fff;
    background:#3b3b3b
}
 
.desktop .menu-custom li:hover > ul{
    filter:alpha(opacity=100);
    opacity:1;
    visibility:visible
}
 
.desktop .menu-custom ul ul{
    top:0;
    left:258px
}
 
.desktop .menu-custom ul li{
    float:none;
    display:block;
    position:relative
}
 
.desktop .menu-custom ul li i{
    position:absolute;
    top:6px;
    right:10px;
    color:#fff
}
 
.desktop .menu-custom ul li:first-child{
    border:none
}
 
#menu-trigger{
    display:none
}
 
.desctop .menu-custom{
    display:block
}
 
@media only screen and (max-width:1229px){
    #menu-wrap.desktop{
        display:none
    }
 
    #menu-wrap{
        position:relative;
        padding:0
    }
 
    #menu-wrap *{
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        box-sizing:border-box
    }
 
    #menu-trigger{
        height:55px;
        line-height:55px;
        cursor:pointer;
        padding:0 20px;
        color:#fff;
        font-weight:bold;
        font-size:23px
    }
 
    #menu-trigger .menu-icon{
        font-size:30px;
        line-height:30px;
        width:auto;
        display:block;
        position:absolute;
        top:12px;
        right:14px
    }
 
    .mobile .menu-custom{
        margin:0;
        padding:0;
        position:absolute;
        top:58px;
        width:100%;
        border-radius:16px;
        -moz-border-radius:16px;
        -webkit-border-radius:16px;
        z-index:100;
        background-color:#f2f2f2;
        display:none
    }
 
    .mobile .menu-custom .icon-angle-down,.mobile .menu-custom .icon-angle-right{
        display:none
    }
 
    .menu-custom ul.menu-mobile-2{
        display:none
    }
 
    .menu-custom li:first-child a{
    }
 
    .menu-custom li{
        position:static;
        display:block;
        position:relative
    }
 
    .menu-custom a{
        display:block;
        float:none;
        padding:10px 20px;
        color:#000;
        font-size:18px
    }
 
    .menu-custom a:hover,.menu-custom .open-mobile-2:hover + a{
        color:#d43232
    }
 
    .menu-custom ul a{
        padding-left:40px;
        width:auto
    }
 
    .menu-custom ul ul a{
        padding-left:60px;
        width:auto
    }
 
    .open-mobile-2{
        font-size:25px;
        line-height:30px;
        display:block;
        position:absolute;
        right:13px;
        top:4px;
        height:30px;
        width:30px;
        text-align:center;
        vertical-align:middle;
        color:#000
    }
 
    .open-mobile-2:hover{
        cursor:pointer
    }
 
}
 
#page {
    margin-bottom: 30px;
}
 
#header_link_contact {
    position: relative;
}
#featured-products_block_center .product_desc, #bestseller_home  .product_desc{
color: #777777;
    font: 13px/19px Arial,Helvetica,sans-serif;
    text-align: left;
}
0
Эксперт HTML/CSS
2953 / 2540 / 1065
Регистрация: 15.12.2012
Сообщений: 9,517
Записей в блоге: 10
15.07.2015, 17:11 10
KyponaTka, даже не знаю, что можно посоветовать вроде всё верно... Но поскольку на странице не появляется тег <i> скорее всего ошибку следует искать в его генерации возможно в файлах шаблона(помимо файлов проекта) где-то фигурирует строка:
HTML5
1
<ul id="menu-custom" [[+wf.classes]]>[[+wf.wrapper]]</ul>
где вместо класса до сих пор указан id...
0
0 / 0 / 0
Регистрация: 19.02.2014
Сообщений: 151
15.07.2015, 17:18  [ТС] 11
вот вызывается меню
HTML5
1
2
3
<div id="menu-wrap" class="clearfix desktop">
  [[Wayfinder? &startId=`0`&level=`2` &outerTpl=`myTopMenu`]]
  </div>
а вот чанк myTopMenu
HTML5
1
<ul class="menu-custom" [[+wf.classes]]>[[+wf.wrapper]]</ul>
больше ничего нет
0
Эксперт HTML/CSS
651 / 554 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
15.07.2015, 20:59 12
Цитата Сообщение от KyponaTka Посмотреть сообщение
.icon-angle-down:before {
* content: "\f107";
}
А где собственно хоть 1 элемент с классом .icon-angle-down?
0
0 / 0 / 0
Регистрация: 19.02.2014
Сообщений: 151
16.07.2015, 10:53  [ТС] 13
когда меню ставлю id="menu-custom" то в тэге а появляется <i class="icon-angle-down"> а когда ставлю class="menu-custom" элемент <i class="icon-angle-down"> исчезает. Каким образом он там появляется не знаю.
0
Эксперт HTML/CSS
651 / 554 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
16.07.2015, 11:10 14
Цитата Сообщение от KyponaTka Посмотреть сообщение
Каким образом он там появляется не знаю.
javascript отрабатывает. У вас на странице, видимо, подключен скрипт, который находит все элементы по селектору
(#menu-custom li a) и для каждого а добавляет элемент i с классом icon-angle-down. Следовательно вам нужно также исправить и js

Добавлено через 4 минуты
П.С. в файле mainscript.js есть такое
Javascript
1
2
3
4
$(window).load(function() {
    $(".compare .comparator, #layered_form .store_list_filter input.checkbox").uniform();
    $('#menu-custom ul li').has('ul').children('a').prepend('<i class="icon-angle-right"></i>');
    $('#menu-custom > li').has('ul').children('a').prepend('<i class="icon-angle-down"></i>');
Вот там и надо менять
1
Fourd
16.07.2015, 22:57
  #15

Не по теме:

извиняюсь за оффтоп, но что значат квадратные скобки и то, что находится в них? [[+wf.classes]]

0
0 / 11 / 4
Регистрация: 12.07.2015
Сообщений: 92
17.07.2015, 14:36 16
Лучший ответ Сообщение было отмечено whiteapps как решение

Решение

Цитата Сообщение от KyponaTka Посмотреть сообщение
с помощью чего к элементам li имеющим выпадающий список добавляется стрелочка.
Есть встроенные средства для маркированного списка:
<ul type="disc | circle | square">...</ul>
Стрелки тут нет. Поэтому, либо с помощью изображения, либо с помощью псевдо-класса и изображения, либо с помощью псевдо-класса и мнемоники.

Изображение:
CSS
1
2
3
4
5
6
7
li {
list-style-type: none; /* Сначала отменяем стиль по-умолчанию */
}
ul.menu-custom > li {
    list-style-image: url('../img/symbol.gif');
    list-style-position: outside;
}
Псевдо-класс:
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
li {
list-style-type: none; /* Сначала отменяем стиль по-умолчанию */
}
.menu-custom {
/* Стилизуем сам список как угодно, но обязательно добавьте padding-left */
}
.menu-custom > li {
    display: block;
    position: relative;
    top: .....;
    margin: .....;
}
ul.menu-custom > li::before { /* Потому что может быть еще и <ol> с таким же классом, если захотите */
    content: url('../img/symbol.png');
    display: block;
    position: absolute;
    width: .....;
    height: .....;
    padding: 0px;
    margin: 0px;
    left: -....px;
    color: ......;
}
И писать надо тогда <ul class="menu-custom"....>

Мнемоника:
CSS
1
2
3
4
5
6
7
8
ul.menu-custom > li::before {
    content: "\25bc";  /* См. статью */
    display: block;
    position: absolute;
    right: ....;
    bottom: .....px;
    font-size: ....;
    vertical-align: text-bottom;
Статья на тему символов: http://www.xiper.net/collect/h... mbols.html
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
17.07.2015, 14:36

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

Откуда берется переполнение ?
Почему этот код дает шибку integer overflow в Delphi7 ? var x,y,z:int64; begin ...

Откуда берётся NaN?
Замучился со скриптом, который должен выводить результат числового подсчёта. В нём 3 составляющих:...

Откуда берется значение?
Переделываю чужой формуляр. В asp.net проекте. Там помойка та еще... Не понимаю откуда берется...

Откуда берется отступ?
при установке float: left; для блока, откудо то появляется отступ сверху, в чем подвох? ...


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

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

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