youx agency

Данный код помогает добавить в шапку сайта кастомного выпадающее меню из zero-блок при наведении курсора мыши.

Выпадающее меню из зеро-блок при наведении на кнопку

Заказать код
Вступить в чат
Поблагодарить
Видео-урок

Инструкция

1

Добавьте ссылку кнопке в вашем меню #youxmenu и создайте новый зеро блок

2

Вставьте код ниже в блок "T123"

3

Вставьте ID вашего зеро-блок в код.

Код скопирован
Код для вставки

<!-- Выпадающее меню второго уровня в zero блок -->
<!-- https://youx.agency/vypadayushhee-menyu-vtorogo-urovnya-v-zero-blok -->

                            <style>
                            /*Скрываем наши блоки по ID*/
                            #rec580927480 {
                                position: absolute;
                                width: 100%;
                                z-index: 999999;
                                display: none;
                                box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
                            }
                        }
                        </style>

                            <script>
                            var showTimeoutId;
                            var hideTimeoutId;

                            // Показываем первый блок при наведении на кнопку со ссылкой #youxmenu
                            $('[href="#youxmenu"]').mouseenter(function() {
                                showTimeoutId = setTimeout(function() {
                                    $('#rec580927480').slideDown(500, function() {
                                        t_lazyload_update();
                                    });
                                }, 500);
                            });

                            // Скрываем первый блок при уходе курсора с кнопки со ссылкой #youxmenu
                            $('[href="#youxmenu"]').mouseleave(function() {
                                clearTimeout(showTimeoutId);
                                hideTimeoutId = setTimeout(function() {
                                    $('#rec580927480').slideUp(500, function() {
                                        t_lazyload_update();
                                    });
                                }, 200);
                            });

                            // Отменяем таймеры при наведении курсора на выпадающий блок
                            $('#rec580927480').mouseenter(function() {
                                clearTimeout(showTimeoutId);
                                clearTimeout(hideTimeoutId);
                            });

                            // Скрываем первый блок при уходе курсора с выпадающего блока
                            $('#rec580927480').mouseleave(function() {
                                hideTimeoutId = setTimeout(function() {
                                    $('#rec580927480').slideUp(500, function() {
                                        t_lazyload_update();
                                    });
                                }, 200);
                            });

                            // Отменяем таймер при наведении на выпадающий блок
                            $('#rec580927480').mouseenter(function() {
                                clearTimeout(hideTimeoutId);
                            });
</script>

Другие модификации

Дарим 1 месяц SEO-оптимизации
🎁 1 месяц услуги "SEO оптимизация" при заказе разработки сайта до 31.09.2024 года.