Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Tolick
1 / 1 / 1
Регистрация: 26.12.2012
Сообщений: 146
1

Анимация для адаптивного меню

19.12.2016, 03:19. Просмотров 206. Ответов 0
Метки нет (Все метки)

Добрый день, есть многоуровневое адаптивное горизонтальное меню.
Всё работает замечательно, когда ширина браузера маленькая меню стаёт вертикальным и при ховере выпадают пункты.
Только проблема в том, что оно без эффектов. И уже мучаюсь несколько дней но не получается. При использовании свойства display: none; (для скрытия пунктов) эффекты не работают, при visibility: hidden; - работают, но это свойство сохраняет место в дом дереве и скрытые пункты просто прозрачны, пробовал .slideToggle(); но он раскрывает все пункты, и подподпункты.

Вот пример в фиддле: https://jsfiddle.net/sqcaq8of/

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
    <div class="menu">
<ul>
    <li><a href="#">Пункт 1</a></li>
    <li class="menu-drop"><a href="#">Пункт 2</a>
        <ul>
            <li><a href="#">Подпункт1</a></li>
            <li><a href="#">Подпункт2</a></li>
            <li><a href="#">Подпункт3</a></li>
            <li class="menu-drop"><a href="#">Подпункт4</a>
                <ul>
                    <li><a href="#">Подподпункт1</a></li>
                    <li class="menu-drop"><a href="#">Подподпункт2</a>
                        <ul>
                            <li><a href="#">Подподподпункт1</a></li>
                            <li><a href="#">Подподподпункт2</a></li>
                            <li><a href="#">Подподподпункт3</a></li>
                            <li><a href="#">Подподподпункт4</a></li>
                            <li><a href="#">Подподподпункт5</a></li>
                        </ul>   
                    </li>
                    <li><a href="#">Подподпункт3</a></li>
                    <li><a href="#">Подподпункт4</a></li>
                    <li><a href="#">Подподпункт5</a></li>
                </ul>
            </li>
            <li><a href="#">Подпункт5</a></li>
        </ul>
    </li>
    <li><a href="#">Пункт 3</a></li>
    <li><a href="#">Пункт 4</a></li>
    <li><a href="#">Пункт 5</a></li>
    <div class="clear"></div>
</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
* {
    padding: 0;
    margin: 0;
}
.menu-drop:after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: red;
    border-radius: 50%;
    right: 4px;
    top: 50%;
    margin-top: -4px;
}
.clear {
    clear: both;
}
.menu {
    width: 600px;
    height: 1500px;
    margin: 150px auto 0 auto;
}
.menu ul li {
    list-style: none;
    float: left;
    position: relative;
}
.menu ul li a {
    display: block;
    padding: 10px 22px 10px 10px;
    text-decoration: none;
    color: black;
    background: yellow;
}
.menu ul li ul li {
    float: none;
}
.menu ul li ul {
    position: absolute;
    z-index: 2;
    border-top: 5px solid transparent;
    left: -999px;
    opacity: 0;
    margin-top: -34px;
    transition:0.3s opacity, 0.2s margin;
}
.menu ul li:hover > ul {
    left: 0px;
    opacity: 1;
    margin-top: 0px;
}
.menu ul li ul li ul {
    top: 0px;
    border-top: none;
    border-left: 5px solid transparent;
}
.menu ul li ul li:hover > ul {
    left: 100%;
}
 
@media screen and (max-width:780px) {
    .menu {
        width: 300px;
    }
    .menu ul li {
        float: none;
    }
    .menu ul li ul {
        position: static;
        border: none;
        display: none;
    }
    .menu ul li:hover > ul {
        display: block;
    }
}
Подскажите, пожалуйста, как сделать эффекты при выпадении уже в вертикальном меню.
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
19.12.2016, 03:19
Ответы с готовыми решениями:

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

Вёрстка адаптивного меню
Подскажите пожалуйста, как сделать адаптивное меню такого плана, как на...

Вёрстка адаптивного меню
Всем привет. Ребята, подскажите пожалуйста, как сделать чтобы блок в котором...

Вёрстка адаптивного меню
Здравствуйте. Делаю (точнее, пытаюсь делать) адаптивный дизайн для сайта....

Баг адаптивного меню на Safari
Ребята, прошу помощи, что это может быть? Сайт: http://instore.com.ua Сам...

0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
19.12.2016, 03:19

Вёрстка адаптивного меню-гамбургер без использования фреймворков
Всем привет! Необходимо сверстать адаптивное гамбургер-меню без использования...

Анимация и фон для горизонтального меню
Всем доброй ночи, пытаюсь сделать меню как тут (нужно выбрать тему)...

Вёрстка адаптивного фона для страницы
Как сделать фон такой фон: Используя эти картинки? Вот HTML и...


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

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

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