пропадает выпадающее меню после наведения как его задержать на экране
Выпадающее меню пропадает
Спросил Seven,
16 апреля 2017
Вопрос
Seven
Создаю здесь тему впервые. Собственно, опыта о данном ресурсе пока нет. Но изучил местные правила.
2)Выдвижное меню пропадает (пункт Utbildningar), так как соприкасаеться с другим контейнером. Насколько сложно это исправить? Я использовал готовый код меню, понятное дело. Не знаю, насколько большая проблема, может придеться переделывать весь принцип, по которому я делаю этот простейший сайт, так что из-за меню теперь у меня все стоит.
Изменено 16 апреля 2017 пользователем Seven
Ссылка на комментарий
Поделиться на других сайтах
2 ответа на этот вопрос
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.
Похожие публикации
Я не понимаю, в чём проблема в вертикальном выпадающем меню. Где я мог напортачить? Нужно сделать, чтобы колонки были по вертикали, а не по горизонтали.
Какие мне элементы использовать в коде, чтобы выравнивание всех блоков меню (который появляется при нажатии на кнопку) происходило по центру самого блока относительно кнопки? Как правильно выровнять блок относительно кнопки?
Форум
Справочник
(решил вынести в отдельную тему)
Есть выпадающее меню, оно находится выше родительского на 30 пикселей (абсолютное позиционирование и «top:-30px;»). И вот, наводим на первую менюшку, «выпадает» вторая, неспеша переводим мышку на вторую, но не успеваем, ибо вторая менюшка пропадает.
Подскажите, как сделать этот процесс более человеческим?
Какую-то паузу в яваскрипт? Или в стилях что-то накрутить?
Похоже решил я баг выставлением padding: 15px 0 30px 0; у дочернего ul 
правда при этом красивая анимация пропала, ну да и хрен с ней, переживем как-нибудь.
Можно решить путём выставления скорости анимации. Т.е. в родительском блоке ставим hover(
function () <
$(«#dmenu»).animate(
$(«#dmenu»).animate(
>,
function () <
$(«#dmenu»).animate(
>);
Вся анимация для одного (дочернего в данном случае) элемента выполняется в одной очереди. Поэтому гаснуть блок начнёт только после того, как провисит 5 секунд. Думаю, что этого достаточно для того, чтобы на него попасть мышкой =) Конечно, надо добавить, что при наведении на дочерний блок opacity будет оставаться единицей. Для этого можно сделать clearQueue при наведении на него или stop(). На Ваш выбор.
Создаем выпадающее меню CSS
Для начала мы создадим базовую структуру навигационного меню, состоящего из шести пунктов:
Далее нам нужно добавить базовые CSS-стили для HTML горизонтального меню. Я оставил комментарии к каждому блоку кода:
После применения стилей у нас должно получиться нечто вроде этого:
Если до этого момента вы все делали правильно, то при наведении курсора на пункт меню « WordPress » должны увидеть выпадающий список с тремя другими пунктами (« Themes », « Plugins », « Tutorials »):
Чтобы вертикальное меню HTML отображалось корректно, нужно добавить еще пару строк CSS кода :
Если все сделано правильно, у вас должно получиться нечто вроде этого:
Этот процесс можно повторять, и добавлять новые уровни. Но не следует добавлять их к последнему элементу выпадающего списка, так как я сделал это лишь для примера.
Добавляем индикатор выпадающего списка
Перед тем, как сделать выпадающее меню в HTML до конца, разберемся с индикатором, который указывает на наличие выпадающего списка, прикрепленного к тому или иному пункту меню (знак «+» ):
Значит, вы все сделали правильно.
В завершение
Многие для достижения подобного эффекта используют jQuery или другие библиотеки. Я считаю, что в этой статье приведен самый простой и легкий вариант. Но выбор за вами.
Преобразование меню в выпадающий список на маленьких экранах
В качестве примера того, что мы получим в результате, можно посмотреть сайт «Five Simple Steps» с адаптивной версткой. Когда окно браузера имеет маленькую ширину, меню в верхнем правом углу превращается из обычного ряда ссылок в выпадающее меню.
При просмотре сайта на маленьком дисплее (телефоне), нажав на выпадающее меню вы увидите интерфейс для выбора пункта меню, где каждый пункт большой и его просто выбрать.
Это, несомненно, легче, чем пытаться попасть пальцем на мелкую ссылку на экране телефона. Конечно, так вам придется нажимать на экран 2 раза вместо одного, но это спорный недостаток, так как, вам в обратном случае придется сначала увеличить страницу, а только потом нажать на ссылку.
Вот так выглядит разметка этого меню на сайте «Five Simple Steps»:
По умолчанию мы должны скрыть меню с помощью display: none;.
Затем, используя media queries мы будем переключать видимость элемента select и обычного меню в зависимости от ширины экрана.
Синхронизация пунктов меню с помощью jQuery
Возможно, ваше меню создается динамически, возможно, вы создаете меню вручную, но всегда полезно быть уверенным что пункты обоих меню аналогичны. Чтобы достичь единообразности обоих меню, мы будем использовать динамическое создание выпадающего меню на основе оригинального меню.
Это возможно осуществить с помощью следующего jQuery – кода:
И в завершении – код для того, чтобы заставить выпадающее меню работать:
Выпадающее меню при наведении на всю ширину экрана
Добрый вечер. У меня есть выпадающее меню при hover. Как правильно сделать выпадающее меню на всю ширину?(как на фото). Если его делать, так как и предыдущие, то проблема в том что нужно будет ему задавать большую ширину, а оно на позиционировании и при адаптации будут большие проблемы (или нет?)).
Я решила вынести его к обертке, чтобы не нужно было указывать ширину в пикселях, а указать в процентах и оно без проблем позиционировалось бы так как нужно.
Но теперь проблема, как сделать его активным при hover?
Нашла что-то на js, но оно меню отображает, но когда пытаюсь навести мышку на область меню, оно пропадает.
Подскажите как правильно и лучше все это делают?
2 ответа 2
Вы с выпадашкой потеряли связь, когда вывели её из родителя. Теперь лучше так (через opacity будет без скачков всяких):
Основная проблема в том что у вас селектор .top-search-form input из-за паддингов вылазит за пределы родительского контейнера ширина которого равна 1170px. Чтобы применить падинги для селектора .top-search-form input и избежать данной проблемы вам нужно использовать свойство box-sizing: border box (по умолчанию content-box).
Что касается ховера для выпадающего меню вы можете ставить задержку через css свойство transition.