Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.06.2020, 10:47
Интересующийся
Отправить личное сообщение для Artemyi Посмотреть профиль Найти все сообщения от Artemyi
 
Регистрация: 23.09.2019
Сообщений: 20

Скрытие меню при щелчке в любом месте экрана
Подскажите пожалуйста новичку. Есть меню, которое разворачивается и сворачивается при клике на "гамбургер" - ссылка в песочнице https://jsfiddle.net/L75end8g/
Можно ли добавить возможность скрытия меню при клике в любом месте экрана, кроме самого меню?
Ответить с цитированием
  #2 (permalink)  
Старый 19.06.2020, 11:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

скрытие по клику вне меню
Artemyi,
<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style type="text/css">
.topnav {
  overflow: hidden;
	float: right;
	position: relative;
	z-index: 80;
	right: 50px;
    top: 42px;
	width: 40%;
	background: none;
}
.topnav a, .topnav button.icon {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  background: gray;
}
.topnav a:hover {
  color: black;
}
.active {
  background-color: gray;
  color: white;
}
.topnav .icon {
  display: none;
}
@media screen and (max-width: 2000px) {
	.topnav {
  display: block;
	}
  .topnav a {display: none;}
  .topnav button.icon {
    float: right;
    display: block;
	background: none;
	color:#000;
  }
  .topnav button.icon:hover{
	background: gray;
	color:#fff;
  }
.topnav  span.nameMenu {
    /*color: black;*/
    font-size: 15px;
    margin: 0px 7px 0 0;
}
.responsive  span.nameMenu {
	display:none;
}
}
@media screen and (max-width: 2000px) {
  .topnav.responsive {position: absolute;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: center;
  }
  .responsive i.fa.fa-bars {
    color: white;
}
  .fa {
	  /*color:black;*/
  }
}
@media screen and (max-width: 950px) {
	.topnav {
	position: absolute;
	width: 71%;
	right: 0;
	top: 20px;
	}
	.topnav.responsive {position: absolute;}
}
@media screen and (max-width: 800px) {
	.topnav  span.nameMenu {display:none;}
	.topnav.responsive a:first-child {
	  display: block;
  }
}
    </style>
  <script>
document.addEventListener("click", function(event) {
  var nav = document.querySelector(".topnav");
  var icon = event.target.closest(".icon");
  if (icon) {
    event.preventDefault();
    nav.classList.toggle("responsive");
  }
  if (event.target.closest(".topnav")) {
    return;
  }
  if (nav.classList.contains("responsive")) {
    nav.classList.remove("responsive");
  }
});
  </script>
</head>
<body>
<div class="topnav" id="myTopnav">
<a href="#">Ссылка 1</a>
<a href="#">Ссылка 2</a>
<a href="#">Ссылка 3</a>
<button class="icon" ><span class="nameMenu">МЕНЮ</span><i class="fa fa-bars"></i></button>
</div>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 19.06.2020, 15:25
Интересующийся
Отправить личное сообщение для Artemyi Посмотреть профиль Найти все сообщения от Artemyi
 
Регистрация: 23.09.2019
Сообщений: 20

Спасибо большое.
Все работает как нужно
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Закрыть меню при клике вне зоны меню webzic jQuery 2 09.06.2018 20:37
Анимационные эффекты меню при скроллинге. LLIypuk jQuery 0 14.03.2018 13:57
Меню при нажатии(добавление класса. kostia170985 Общие вопросы Javascript 5 12.07.2017 15:07
Несколько пунктов меню, отображение содержимого при клике chelfenix jQuery 3 10.04.2015 16:52
Меню выезжающее слева при подведении курсора к левой части экрана Артём Тарасов Общие вопросы Javascript 6 25.02.2009 14:18