This is a mobile optimized page that loads fast, if you want to load the real page, click this text.

Как сделать чтобы при нажатии кнопки закрывалась менюшка которая открыта

PERS

Активный участник
14 Сен 2020
113
10
37
По этому примеру можешь что то сделать. Разбирайся
HTML: 
<label for="openclose" id="button">Открыть</label>
<input type="checkbox" id="openclose">
<div class="modal-wrapper">
  <div class="modal">
    <label for="openclose">&times;</label>
  </div>
</div>
CSS: 
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: #ddd;
  padding: 16px;
}

.modal-wrapper {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, .2);
  display: flex;
}

.modal {
  width: 40vw;
  height: 40vh;
  background-color: white;
  margin: auto;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .2);
  position: relative;
}

.modal label {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 200%;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-align: center;
  cursor: pointer;
}

.modal label:hover {
  color: blue;
}

#openclose,
.modal-wrapper {
  display: none;
}

#openclose:checked~.modal-wrapper {
  display: flex;
}

#button {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}
 
Последнее редактирование модератором:

X-Clusiv

Модератор
Команда форума
high coder
4 Окт 2020
680
336
161
29
У него vue. Создавал тему до этой)
 

X-Clusiv

Модератор
Команда форума
high coder
4 Окт 2020
680
336
161
29

745164nk

Специалист
17 Сен 2020
104
15
79
Да меню я сам уже сделал осталось понять как его закрывать по сути это как меню репорта на редаге
 

Randomchik

Гуру
high coder
19 Сен 2020
823
322
141
Чел,у тебя это менюшка отдельно идёт?или она в редаги?если отдельно,то смотри есть функция когда нажимаешь на крестик и она закрывается,введи просто новый триггер ещё 1 и все
 
Реакции: gnimmw
Ответить в теме
Меню
Вход
Регистрация