@Farrien
Tell me who

Как сделать появляющееся меню при наведении?

При наведении на определенные псевдо-ссылки, должны появляться меню под ними. И чтоб он исчезал, если курсор отошел более чем, допустим, 200px от появившегося меню и псевдо-ссылки.
Ну или хотя бы не при наведении, а нажатии. То есть уже если кликнул куда-то вне меню, то оно пропадает.

Как в VK, к примеру:
11d0824fb93a41dca43e9eaf05200a14

Мне просто нужно знать какие проверки в JS совершать.
  • Вопрос задан
  • 2626 просмотров
Решения вопроса 1
ШВроде должно работать.

$('.menu').bind({
  touchstart: function(e){ //для мобильных устройств
    e.stopPropagation();
    $(this).addClass('menu_active');
  },
  mouseenter: function(){
    $(this).addClass('menu_active');
  },
  mouseleave: function(){
    $(this).removeClass('menu_active');
  }
});

$(body).on('touchstart', function(e){
    $(this).removeClass('menu_active');
});
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
IonDen
@IonDen
JavaScript developer. IonDen.com
Можно никаких не совершать.
Все это можно сделать на чистом CSS.
Вот пример: https://jsfiddle.net/9g7hdob7/ и даже 20 пиксельный зазор есть.
Расположить меню выше следующих элементов можно с помощью z-index

<div class="container">
    <div class="button">
        Button
    </div>
    <div class="menu_gap">
        <div class="menu">
            Menu
        </div>
    </div>
</div>

.container {
    position: relative;
    width: 200px;
    height: 50px;
    background: #f00;
}
.button {
    display: block;
    color: #fff;
}
.menu_gap {
    position: absolute;
    top: 100%;
    left: -20px; 
    padding: 0 20px 20px 20px;
    display: none;
}
.container:hover .menu_gap {
    display: block;
}
.menu {
    background: #000;
    color: #fff;
    width: 400px;
    padding: 10px 0;
}
Ответ написан
politon
@politon
HTML5,CSS3,JS,PHP,SQL,API,canvas,animation...
Самый простой вариант https://jsfiddle.net/49hsy10L/
Ответ написан
Комментировать
@Div100
Если говоришь что в JS: Тогда вот
или Jquery .hover();
Ну а вообще через css
el :hover {

}
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
18 мая 2022, в 00:48
3000 руб./за проект
18 мая 2022, в 00:31
100000 руб./за проект
18 мая 2022, в 00:09
15000 руб./за проект