Выпадающее меню замыкает

@antidemon92 · Регистрация: 29.11.2013

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

всем доброго времени суток. есть выпадающее меню.

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
                    <ul  class="top_menu">
                        <li class="gg"><a href=""><span class="shadow_menu"><span>Конвееры</span></span></a>
                            <ul>
                                <div class="header_bottom_menu_fon">
                                    <li><a href="">Конвейеры винтовые 1</a></li>
                                    <li><a href="">Конвейеры винтовые 1</a></li>
                                    <li><a href="">Конвейеры винтовые s df sdf  1</a></li>
                                    <li><a href="">Конвейеры винтовые 1</a></li>
                                    <li><a href="">Конвейеры винтовые 1</a></li>
                                    <li><a href="">Конвейеры винтовые 1</a></li>
                                    <li><a href="">Конвейеры винтовые  gsdf sdf sdf 1</a></li>
                                    <li><a href="">Конвейеры винтовые fdg dfg df  1</a></li>
                                </div>
                            </ul>
                        </li>
                        <li class="gg1"><a href=""><span class="shadow_menu"><span>Металлоконструкции</span></span></a>
                            <ul>
                                <div class="header_bottom_menu_fon">
                                    <li><a href="">Конвейеры винтовые 2</a></li>
                                    <li><a href="">Конвейеры винтовые 2</a></li>
                                    <li><a href="">Конвейеры винтовые 2</a></li>
                                    <li><a href="">Конвейеры винтовые 2</a></li>
                                    <li><a href="">Конвейеры винтовые 2</a></li>
                                    <li><a href="">Конвейеры винтовые 2</a></li>
                                    <li><a href="">Конвейеры винтовые 2</a></li>
                                    <li><a href="">Конвейеры винтовые 2</a></li>
                                </div>
                            </ul>
                        </li>
</ul>

JavaScript
1
2
3
4
5
            $(document).ready(function(){
                $('.top_menu li').hover(function(){
                        $('ul', this).slideToggle(100)
                    });
});

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
.top_menu{
float:left;
padding:0px;
margin:0px;
}
.top_menu>li{
border-left:2px solid transparent;
border-right:2px solid transparent;
height:116px;
list-style:none;
margin-top:1px;
text-align:center;
float:left;
}
 
.top_menu>li>a{
position:relative;
font-style:italic;
height:116px;
font-size:16px;
display:block;
color:#fff;
text-decoration:none;
}
.top_menu img{
margin-top:13px;
}
.top_menu> li:hover > a {
z-index:3;
background:url('images/header_bottom_menu.jpg');
}
.gg>a>.shadow_menu{
background:url("https://www.cyberforum.ru/images/img_1.png") no-repeat 50% 20%;
}
.gg1>a>.shadow_menu{
background:url("https://www.cyberforum.ru/images/img_2.png") no-repeat 50% 20%;
}
.top_menu li a span{
display:block;
top:80px;
position:relative;
}
.shadow_menu{
top:0px !important;
padding:0 16px;
height:114px;
}
.shadow_menu_2{
box-shadow: inset 2px 0px 0px #374a5f, inset 0px 1px 2px #374a5f;
-moz-box-shadow: inset 2px 0px 0px #374a5f, inset 0px 1px 2px #374a5f;
-webkit-box-shadow: inset 2px 0px 0px #374a5f, inset 0px 1px 2px #374a5f;
}
.top_menu> li:hover{
border-left:2px solid #3a5b7e;
border-right:2px solid #3a5b7e;
}
.top_menu li >ul{
margin-top:-6px;
box-shadow: inset 0px 2px 1px #374a5f;
border-top:2px solid #4b678c;
z-index:2;
display:none;
width:100%;
min-width:990px;
left:0px;
position:absolute;
background:url('images/header_bottom_menu.jpg');
padding:0px;
}
.header_bottom_menu_fon{
margin:0 auto 30px auto;
padding:10px 5px 0 15px;
width:960px;
}
.top_menu li ul .header_bottom_menu_fon a{
font-style:italic;
width:auto;
display:block;
font-size:16px;
color:#fff;
padding:0;
}
.top_menu li ul .header_bottom_menu_fon li{
vertical-align:top;
display:inline-block;
height:auto;
text-align:left;
line-height:16px;
width:210px;
border:none;
margin:15px 25px 0 0;
}
.top_menu li ul .header_bottom_menu_fon a:hover{
text-decoration:none;
}

Все вроде бы нормально открывается закрывается, но если очень быстро переключаться между пунктами а затем увести курсор чуть вниз то он начинает открываться и закрываться без остановки. Можно как-нибудь избежать этого. Пробовал сделать чтобы фон не убирался а менялся только контент, но ничего не вышло, контен не хотел меняться.

Добавлено через 13 минут
Тобиш нужно, чтобы при выводе курсора с меню все команды прекращались и оно закрывалось не зависимо от того на каком этапе открытия оно находится в данный момент

Добавлено через 33 минуты

CSS
1
2
3
4
5
6
.header_bottom_menu_fon{
display:none;
margin:0 auto 15px auto;
padding:5px 5px 0 5px;
width:960px;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
        <script>
            $(document).ready(function(){
                $('.top_menu').mouseenter (function(){
                $('ul', this).show(100)
                });
                $('.top_menu li').hover(function(){
                    $('ul',this).children('div').show()
                });
                $('.top_menu').mouseleave (function(){
                    $('ul', this).hide()
                });
                $('.top_menu>li').hover(function(){
                    $('.shadow_menu',this).toggleClass('shadow_menu_2');
                });
            });
        </script>

Сделал так, но контент не меняется в зависимости от выбранного li

Добавлено через 1 час 28 минут

JavaScript
1
2
3
4
5
$(document).ready(function(){
                $('.top_menu li').hover(function(){
                        $('ul', this).slideToggle(100)
                    });
});

ну или как хотя бы тут сделать чтобы меню выпадало не сразу а с некой паузой... через setTimeout не выходит

@nikolay1982 · 11.07.2014, 18:33

Тема еще актуальна?
Вот код, вроде должен у тебя работать:

JavaScript
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
             $(document).ready(
             function(){
                 var timer_id=null;
                 var $li=$('.top_menu li');
                function li_mouse_out(e){
                }
                function li_hover(e){
                    var $dop=$(this);
                    var $o=$('ul', this);
                    if ($o.length==0) return;
                    var disp=$o.css('display');
                    if (disp!='none') return;
                    if (timer_id==null)
                    timer_id=setTimeout(
                        function (){
                            //if (disp && disp=='none'){
                                $li.children('ul').css('display','none');
                                //$li.children('ul').css('visiblity','unvisible');
                                //$o.css('visiblity','visible');
                                if (1)$o.css('display','block')
                                else $o.slideDown(30);
                                //$o.slideToggle(0);
                            //}
                            timer_id=null;
                            },
                        80);
                    else setTimeout(li_hover,100);
            }
             $li.hover(li_hover,li_mouse_out);
            function li_click(e){
                    var disp=$('ul', this).css('display');
                    if (disp && disp== 'none')
                        $('ul', this).css('display','block');
                        return false;
                    };
                $('.top_menu li').click(li_click);
            });

Надо еще css проверить. Повторное срабатывание hover может быть за счет анимации бордюра( слишком близко li расположенно).

@antidemon92 · 11.07.2014, 20:16 **[ТС]**

nikolay1982, Да я уж через анимэйт сделал.

Добавлено через 15 секунд
nikolay1982, но спасибо

Новые блоги и статьи Все статьи Все блоги /
Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .
Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .

@antidemon92 1 / 1 / 6 Регистрация: 29.11.2013 Сообщений: 233
	11.07.2014, 20:16 [ТС]
	nikolay1982, Да я уж через анимэйт сделал. Добавлено через 15 секунд nikolay1982, но спасибо 0