twentyfivesymbolsusername
@twentyfivesymbolsusername
Front-end developer

Вопрос касательно выпадающего меню

Привет! При наведении на portfolio выпадает меню. Я опустил сабменю немного ниже, и, соответственно, при попытке навести на него, оно уже успевает исчезнуть. Как сделать так, чтобы оно не исчезало. Как-то скрыто продлить его по высоте? Выставить как-то таймер? Использовать джаваскрипт? Или еще как-то?

4b5471ad15d75962dfa1736bb7398727.png

Код меню на codepen.io

Спасибо!
  • Вопрос задан
  • 4194 просмотра
Решения вопроса 1
Prilepsky
@Prilepsky
Программист 1C
Если важна поддержка только современных браузеров, то можно и без js

.main-menu .sub-menu{
 
    background:#E2534B;
    padding:6px 6px 0 6px;
    margin:0;
 
 margin-top:20px;
   visibility:hidden;
    opacity:0;
    transition:visibility 0s linear 0.3s,opacity 0.3s linear;

     position:absolute;
    width:200px;
    top:35px;
    list-style:none;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px; 
}
.main-menu>li:hover .sub-menu {
  
visibility:visible;
  opacity:1;
  transition-delay:0s;

}


Еще одни вариант
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
Могу ошибаться, но посмотрите как это реализовано в бутстрапе
http://getbootstrap.com/javascript/#dropdowns
Ответ написан
Комментировать
@Balboni
сабменю нужно опустить свойством padding и подредактировать свойство top
.main-menu .sub-menu{
    padding-top: 20px;
    background:#E2534B;
    display:none;
    padding:6px 6px 0 6px;
    margin:0;
    position:absolute;
    width:200px;
    top:35px;
    list-style:none;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px; 
}
Ответ написан
Комментировать
webvany
@webvany
Дизайнер
Оно реализовано с помощью псевдокласса hover? Если да, то вам нужно использовать JS, либо возможно создать с помощью псевдокласса after дополнительный невидимый прозрачный блок, который будет входить в пункт меню. Тогда будет нормально. Нужно полностью смотреть код меню, чтобы понять. Вы бы выложили это меню на codepen.io, тогда было бы значительно проще. Можно было бы скинуть вам готовый вариант.
Ответ написан
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
Самый простой способ - сделать задержку на js, как - зависит от того, как реализовано меню.
На bootstrap я делал так:
$('ul.nav li.dropdown').hover(function() {
	  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
	}, function() {
	  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
	});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
26 нояб. 2022, в 11:51
7000 руб./в час
26 нояб. 2022, в 11:41
2000 руб./за проект
26 нояб. 2022, в 11:40
5000 руб./за проект