Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты

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

Сергей Иванов Просветленный (27714), на голосовании 10 месяцев назад
На смартфоне сайт должен быть в 2 колонки. Причем видеть мы должны только одну, а увидеть вторую можем, сдвинув пальцем влево, ну или нажав на меню.
На экране левая колонка будет сайдбаром, а правая основной частью сайта.
Делается с помощью медиазапросов. Но как делать видимой только одну половину? В интернете не могу подсказки найти.
Голосование за лучший ответ
Татьяна Шеховцова Высший разум (423392) 11 месяцев назад
display: none
Вот так легко и просто скрывается что угодно
Сергей ИвановПросветленный (27714) 11 месяцев назад
А как на смартфоне организовать перелистывание между левой и правой частями? В WhatsApp листаем пальцем влево и в какой-то момент видим обе половинки, красивый эффект перелистывания. display просто резко включит/выключит области при нажатии на что-то.
Татьяна Шеховцова Высший разум (423392) Сергей Иванов, надо разбираться со специфическими событиями в js, которые под смартфоны
Дмитрий Каллистов Профи (878) 11 месяцев назад
Это можно сделать с использованием в стилях псевдокласса "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
Похожие вопросы