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

Question

[Albert Kazan]

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

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


Мне просто нужно знать какие проверки в JS совершать.

Answer 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');
});

Answer 2

[Денис Инешин]

Можно никаких не совершать.
Все это можно сделать на чистом 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;
}

Comments

[Albert Kazan]

С :hover трюк мне не подходит. Это не красиво.

[Денис Инешин]

Albert Tatarin: можно сделать и красиво, CSS анимации рулят: https://jsfiddle.net/9g7hdob7/1/

Answer 3

[Олег]

Самый простой вариант https://jsfiddle.net/49hsy10L/

Answer 4

[Vladislav]

Если говоришь что в JS: Тогда вот
или Jquery .hover();
Ну а вообще через css

el :hover {

}