Как сделать выезжающие меню как у google?

Question

[Resolut1on]

Добрый день возникла проблема при создании меню как гугла, вот само это меню https://fonts.google.com/ (меню для мобильных версий). Собственно я его почти сделал но проблема в том что при клике меню открывается но нужно что бы оно закрывалось при клике на экран в любую точку вот в этом проблема. Язык Java я не особо знаю поэтмоу написал как мог

$(document).ready(function() {
	$('.md-button').on('click', function(e) {
		e.preventDefault();
		$('.xs-menu').toggleClass('xs-menu-open');
	});
});

.xs-menu
	position: fixed
	height: 100%
	max-width: 320px
	width: 100%
	top: 0
	right: 0
	background-color: #fff
	box-sizing: border-box
	margin-right: -320px
.xs-menu.xs-menu-open
	margin-right: 0px
	box-shadow: 0 6px 30px 5px rgba(0,0,0,0.2)

Если правильн поняли в моем скрипте md-button-кнопка меню , xs-menu-само меню. И еще одна проблема как можно сделать что бы при открытии фон затемнялся?

Answer 1

[Максим Тимофеев]

1. не java а javascript, это совсем разные языки.
2.

$(document).ready(function() {
  $('body').on('click', function() {
    $('.xs-menu').removeClass('xs-menu-open');
  });
});

Comments

[Resolut1on]

Прошу прощения что перепутал.
Пробовал такой вариант к сожалению он не подходит, т.к он не дает возможности открыться меню.
Я могу написать на обычно языке как это должно работать но на языке програмирвоания не знаю как.
1) я его написал при клике на кнопку добовить класс .xs-menu-open
2)Если класс .xs-menu-open активен тогда ваш скрипт должен включиться

[Максим Тимофеев]

Resolut1on: если произошел клик на body убирается класс отвечающий за закрытие и меню закрывается - что в этом Вас не устаивает?

[Resolut1on]

Я добавил скрипт. Меню теперь не открывается. Я думаю потмоучто кнопка нахоидтся в body и при клике на нее срабатывает не 1 скрип а 2 , 1 который открывает меню и сразу срабаывает 2 который закрывает ее.

[Максим Тимофеев]

Resolut1on: Ну естественно, добавьте проверку на div который надо исключить из селектора (тот в котором кнопка открытия и в котором меню), можно еще добавить проверку на наличие класса xs-menu-open.
api.jquery.com/not-selector
api.jquery.com/hasclass

Answer 2

[Justin Bieber]

таких меню готовых туча, зачем изобретать велосипед? понравился стиль, скопируй и все