Как сделать верстку сайта, как в приложении WhatsApp? Не понимаю, как делать одну из половин текущей

Question

Как сделать верстку сайта, как в приложении WhatsApp? Не понимаю, как делать одну из половин текущей

Сергей Иванов Просветленный (27715), на голосовании 10 месяцев назад

На смартфоне сайт должен быть в 2 колонки. Причем видеть мы должны только одну, а увидеть вторую можем, сдвинув пальцем влево, ну или нажав на меню.
На экране левая колонка будет сайдбаром, а правая основной частью сайта.
Делается с помощью медиазапросов. Но как делать видимой только одну половину? В интернете не могу подсказки найти.

Answer 1

Татьяна Шеховцова Искусственный Интеллект (421230) 11 месяцев назад

display: none
Вот так легко и просто скрывается что угодно

Сергей ИвановПросветленный (27715) 11 месяцев назад

А как на смартфоне организовать перелистывание между левой и правой частями? В WhatsApp листаем пальцем влево и в какой-то момент видим обе половинки, красивый эффект перелистывания. display просто резко включит/выключит области при нажатии на что-то.

Татьяна Шеховцова Искусственный Интеллект (421230) Сергей Иванов, надо разбираться со специфическими событиями в js, которые под смартфоны

Answer 2

Это можно сделать с использованием в стилях псевдокласса "hover" (срабатывает при наведении), либо с использованием событий document.getElementById (тут какое-то Id из стилей)
В стилях указывается Id блока (он пишется в скобках), который скрыт от пользователя по display: none
Но когда активируется событие, то дальше display: none меняется на inline или block

onclick="document.getElementById('id01').style.display='block'"
где id01 это блок прописанный в стилях
https://www.w3schools.com/jsref/event_onclick.asp
https://www.w3schools.com/js/js_htmldom_events.asp
https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_examples_modal_login

https://www.w3bai.com/en-US/w3css/tryit.php?filename=tryw3css_modal_tab

Answer 3

Тут можешь залогиниться и искать примеры по запросу "Side menu"
https://codepen.io/EduardL/pen/jObzJB
https://codepen.io/jcoulterdesign/pen/jWWroX
https://codepen.io/calendee/pen/MWJMaQ