Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
22 / 10 / 0
Регистрация: 21.04.2017
Сообщений: 62
1

Меню при адаптивной верстке

24.12.2017, 17:33. Показов 478. Ответов 1
Метки нет (Все метки)

Изучаю css не получается нормально адаптировать меню что бы в адаптивной верстке полностью открывалось
пробую двигать с помощью margin двигается но сфокусировать на наведенном не получается .То есть навожу на вкладку появляется список хочу навести на список он исчезает.Как это решить не могу понять.
пк
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
<div id="cssmenu" >
        <ul>
            <li class="active"><a href="Main.html"><span>Главная</span></a></li>
            <li class="has-sub"><a href="#"><span>Категории</span></a>
                <ul  class="adaptac">
                    <li class="has-sub"><a href="#"><span>Лето</span></a>
                        <ul>
                            <li><a href="#"><span>Удилища</span></a></li>
                            <li class="last"><a href="#"><span>Насадки</span></a></li>
                            <li class="last"><a href="#"><span>Палатки</span></a></li>
                            <li class="last"><a href="#"><span>Блесна</span></a></li>
                            <li class="last"><a href="#"><span>Одежда</span></a></li>
                        </ul>
                    </li>
                    <li class="has-sub"><a href="#"><span >Зима</span></a>
                        <ul>
                            <li><a href="#"><span>Палатки</span></a></li>
                            <li class="last"><a href="#"><span>Удочки</span></a></li>
                            <li class="last"><a href="tovar.html"><span>Буры</span></a></li>
                            <li class="last"><a href="#"><span>Леска</span></a></li>
                            <li class="last"><a href="#"><span>Одежда</span></a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="archive.html"><span>Архив</span></a></li>
            <li><a href="single.html"><span>Новости</span></a></li>
            <li class="last"><a href="contact.html"><span>Контакты</span></a></li>
        </ul>
    </div>
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
#cssmenu {
    background: #222;
    margin: 0;
    width: auto;
    padding: 0;
    line-height: 1;
    display: block;
    position: relative;
    z-index: 9999;
}
#cssmenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
}
#cssmenu ul:after,
#cssmenu:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
}
#cssmenu ul li {
    margin: 0;
    padding: 0;
    display: block;
    position: relative;
}
#cssmenu ul li a {
    text-decoration: none;
    display: block;
    margin: 0;
    -webkit-transition: color .2s ease;
    -moz-transition: color .2s ease;
    -ms-transition: color .2s ease;
    -o-transition: color .2s ease;
    transition: color .2s ease;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#cssmenu ul li ul {
    position: absolute;
    left: -9999px;
    top: auto;
}
#cssmenu ul li ul li {
    max-height: 0;
    position: absolute;
    -webkit-transition: max-height 0.4s ease-out;
    -moz-transition: max-height 0.4s ease-out;
    -ms-transition: max-height 0.4s ease-out;
    -o-transition: max-height 0.4s ease-out;
    transition: max-height 0.4s ease-out;
    background: #313131;
}
#cssmenu ul li ul li.has-sub:after {
    display: block;
    position: absolute;
    content: "";
    height: 10px;
    width: 10px;
    border-radius: 5px;
    background: #000000;
    z-index: 1;
    top: 13px;
    right: 15px;
}
#cssmenu.align-right ul li ul li.has-sub:after {
    right: auto;
    left: 15px;
}
#cssmenu ul li ul li.has-sub:before {
    display: block;
    position: absolute;
    content: "";
    height: 0;
    width: 0;
    border: 3px solid transparent;
    border-left-color: #ffffff;
    z-index: 2;
    top: 15px;
    right: 15px;
}
#cssmenu.align-right ul li ul li.has-sub:before {
    right: auto;
    left: 15px;
    border-left-color: transparent;
    border-right-color: #ffffff;
}
#cssmenu ul li ul li a {
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    color: #d1d1d1;
    letter-spacing: 0;
    display: block;
    width: 170px;
    padding: 11px 10px 11px 20px;
}
#cssmenu ul li ul li:hover {
    background: #4A4C4E;
 
}
 
#cssmenu ul li ul li:hover > a,
#cssmenu ul li ul li.active > a {
    color: #fff;
}
#cssmenu ul li ul li:hover:after,
#cssmenu ul li ul li.active:after {
    background: #1A1C1E;
}
#cssmenu ul li ul li:hover > ul {
    left: 100%;
    top: 0;
}
#cssmenu ul li ul li:hover > ul > li {
    max-height: 72px;
    position: relative;
}
#cssmenu > ul > li {
    float: left;
}
#cssmenu.align-center > ul > li {
    float: none;
    display: inline-block;
}
#cssmenu.align-center > ul {
    text-align: center;
}
#cssmenu.align-center ul ul {
    text-align: left;
}
#cssmenu.align-right > ul {
    float: right;
}
#cssmenu.align-right > ul > li:hover > ul {
    left: auto;
    right: 0;
}
#cssmenu.align-right ul ul li:hover > ul {
    right: 100%;
    left: auto;
}
#cssmenu.align-right ul ul li a {
    text-align: right;
}
#cssmenu > ul > li:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 0;
    top: 0;
    z-index: 0;
    background: #C4A648;
    -webkit-transition: height .2s;
    -moz-transition: height .2s;
    -ms-transition: height .2s;
    -o-transition: height .2s;
    transition: height .2s;
}
#cssmenu > ul > li.has-sub > a {
    padding-right: 40px;
}
#cssmenu > ul > li.has-sub > a:after {
    display: block;
    content: "";
    background: #ffffff;
    height: 12px;
    width: 12px;
    position: absolute;
    border-radius: 13px;
    right: 14px;
    top: 16px;
}
#cssmenu > ul > li.has-sub > a:before {
    display: block;
    content: "";
    border: 4px solid transparent;
    border-top-color: #4A4C4E;
    z-index: 2;
    height: 0;
    width: 0;
    position: absolute;
    right: 16px;
    top: 21px;
}
#cssmenu > ul > li > a {
    color: #fff;
    padding: 15px 20px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 14px;
    z-index: 2;
    position: relative;
}
#cssmenu > ul > li:hover:after,
#cssmenu > ul > li.active:after {
    height: 100%;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
    color: #fff;
}
#cssmenu > ul > li:hover > a:after,
#cssmenu > ul > li.active > a:after {
    background: #000000;
}
#cssmenu > ul > li:hover > a:before,
#cssmenu > ul > li.active > a:before {
    border-top-color: #ffffff;
}
#cssmenu > ul > li:hover > ul {
    left:0;
}
#cssmenu > ul > li:hover > ul > li {
    max-height: 72px;
    position: relative;
}
#cssmenu #menu-button {
    display: none;
}
#cssmenu > ul > li > a {
    display: block;
}
#cssmenu > ul > li {
    width: auto;
}
#cssmenu > ul > li > ul {
    width: 170px;
    display: block;
}
#cssmenu > ul > li > ul > li {
    width: 170px;
    display: block;
}
адаптация320x480
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
   @media (max-width: 480px){
 #cssmenu > ul > li:hover > ul{
        position: absolute;
 
        margin-top: -10px;
    }
    #cssmenu ul{
        display:flex;
        flex-direction: column;
        margin-top: 35%;
    }
    .last:hover{
        position: absolute;
 
        margin-top: -10px;
 
    }
}
Полностью сайт если не понятно будет или не полностью отражаться
Архив WinRAR.rar
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
24.12.2017, 17:33
Ответы с готовыми решениями:

Выпадающее меню в адаптивной верстке
Доброго времени суток! Смотрел данное видео https://www.youtube.com/watch?v=uAcnIvKhfQQ (верстка...

Изменение кнопки меню в адаптивной вёрстке
Добрый день. Помогите, пожалуйста, разобраться, никак не могу сделать так, чтобы на маленьких...

Aside при адаптивной верстке
Здравствуйте. При сужении экрана надо чтобы один блок из сайдбара переместился над блоком контента,...

Высота блока при адаптивной верстке
Всем мир. Страница с 4 блоками в ряд. При мобильной версии возникает такая хня (скриншот). Задать...

1
Эксперт HTML/CSS
1367 / 1135 / 492
Регистрация: 07.08.2016
Сообщений: 3,081
24.12.2017, 22:09 2
В запросе для #cssmenu > ul > li:hover > ul задайте z-index больше 2, а то он у вас перекрывается.
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
24.12.2017, 22:09

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

Как управлять расположением блоков при адаптивной верстке ?
Есть 3 блока, они все стоят в ряд. При ресайзе на определенное разрешение нужно взять центровой...

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

При адаптивной верстке получаеться что ширина экрана не 480х800, а 320х 533 Как с этим бороться?
При адаптивной верстке получаеться что ширина экрана не 480х800, а 320х 533 Как с этим бороться....

Изображения в адаптивной верстке
Друзья как прописать размеры изображений для монитора 1024px...


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

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

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