Выпадающее меню сайта. Как показать / скрыть?

@George Sirin · Регистрация: 24.07.2015

Всем здравствуйте!

Делаю меню, которое появляется при клике на ссылку. Для его появления в обработчике клика пишу, например

Javascript

1 2	$(".drop-menu").css("opacity","1"); $(".drop-menu").css("visibility","visible");

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

Но я не могу придумать, к какому элементу и обработчику это событие прицепить, для того чтобы меню спрятать.

Логично прицепить обработчик ко всему телу сайте, по событию клика, например

HTML5

1	<body onclick="hide-main-menu()">

Но в таком случае это будет мешать первому обработчику, так как второй сразу же вызовется после первого и спрячет меню.

Подскажите, пожалуйста, что можно придумать?

@AmateR62 · 06.05.2016, 15:45

Сообщение от George Sirin

Подскажите, пожалуйста, что можно придумать?

При клике по меню показывать так же прозрачный блок размером на весь экран, который находится над всеми элементами, но под меню. Обработчик повесить на этот блок. Например:

HTML5

1	<div class="overflow" onclick="hide-main-menu()"></div>

CSS

div.overflow {
  background-color: black;  /* а можно и не прозрачный, а как бы затемнять страничку */
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0; /* если затемнять, то поиграться с этим параметром */
  z-index: 999; /* подбираем значение так, чтобы было над всеми элементами, но под меню */
}

Опции темы