Выдвигающаяся панель слева

@Alexei10001982 · Регистрация: 25.10.2016

Author24 — интернет-сервис помощи студентам

Здравствуйте.
Нашел в интернете выдвигающуюся панель. При наведении панель выдвигается,но на мобильной версии только при нажатиии выдвигается и не задвигается обратно при нажатии.Это понятно так hover работает принаведении курсора.А на мобильном это видимо как нажатие.
Как сделать, что бы при нажатии на мобильной версии панель задвигалась обратно используя css?
Вот код :

PHP/HTML

<style>
/* ВНЕШНИЙ БЛОК */
#panel {
    position: fixed; /* положение */
    top: 100px; /* отступ сверху */
    left: 0; /* отступ слева */
    background: green; /* цвет фона */
    width: 30px; /* ширина блока */
    height: 40px; /* высота блока */
    font: 14px Arial; /* размер и тип шрифта */
    color: #fff; /* цвет текста */
    text-align: center; /* выравнивание текста по центру */
    padding: 5px; /* отступы от границ внутри блока */
    -webkit-transition-duration: 0.3s; /* анимационное выдвижение для всех браузеров*/
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-border-radius: 0 5px 5px 0; /* закругление границ для всех браузеров*/
    -moz-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
    }
 
/* СКРЫТЫЙ БЛОК */
#hidden_panel {
    position: fixed; /* положение */
    top: 100px; /* отступ сверху */
    left: -220px; /* отступ слева */
    background: lavender; /* цвет фона */
    color: #000; /* цвет текста */
    width: 200px; /* ширина блока */
    height: 150px; /* высота блока */
    padding: 10px; /* отступы от границ внутри блока */
    text-align: left; /* выравнивание текста */
 
    -webkit-transition-duration: 0.3s; /* анимационное выдвижение для всех браузеров*/
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
 
    -webkit-border-radius: 0 5px 5px 0; /* закругление границ для всех браузеров*/
    -moz-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
    }
 
#panel:hover {
    left: 220px; /* при наведении выдвигается на скрытые 200px + 20px отступы */
}
#panel:hover #hidden_panel {
    left: 0; /* отступ слева */
}
</style>
</head>
<body>
 
<h2>Анимированная выдвижная боковая блок-панель на CSS</h2>
 
<div id="panel"> >>>
    <div id="hidden_panel">
        Содержание блока
    </div>
</div>
 
 
</body>
</html>

@mr_dramm · 01.09.2021, 20:18

Можно сделать через checkbox hack, но тогда нужно будет именно кликать на десктопе (отказаться от ховера) и нажимать на мобильном устройстве. Но еще пользователи захотят закрыть панель проведя пальцем справа налево, так что лучше использовать js.

Новые блоги и статьи
Книги и учебные ресурсы по C# InfoMaster 08.01.2025 Базовые учебники и руководства Одной из лучших книг для начинающих является "C# 10 и . NET 6 для начинающих" Эндрю Троелсена и Филиппа Джепикса . Книга последовательно раскрывает основные концепции. . .	Что такое NullReferenceException и как исправить? InfoMaster 08.01.2025 NullReferenceException - одно из самых распространенных исключений, с которым сталкиваются разработчики на C#. Это исключение возникает при попытке обратиться к членам объекта (методам, свойствам или. . .	Что такое Null Pointer Exception (NPE) и как это исправить? InfoMaster 08.01.2025 Null Pointer Exception (NPE) - это одно из самых распространенных исключений в Java, которое возникает при попытке использовать ссылку на объект, значение которой равно null. Это исключение относится. . .	Русский язык в консоли C++ InfoMaster 08.01.2025 При разработке программ на C++ одной из частых проблем, с которой сталкиваются русскоязычные программисты, является корректное отображение кириллицы в консольных приложениях. Эта проблема особенно. . .	Telegram бот на C# InfoMaster 08.01.2025 Разработка ботов для Telegram стала неотъемлемой частью современной экосистемы мессенджеров. C# предоставляет мощный и удобный инструментарий для создания разнообразных ботов, от простых. . .	Использование GraphQL в Go (Golang) InfoMaster 08.01.2025 Go (Golang) является одним из наиболее популярных языков программирования, используемых для создания высокопроизводительных серверных приложений. Его архитектурные особенности и встроенные. . .
Что лучше использовать при создании класса в Java: сеттеры или конструктор? Alexander-7 08.01.2025 Вопрос подробнее: На вопрос: «Когда одновременно создаются конструктор и сеттеры в классе – это нормально?» куратор уточнил: «Ваш класс может вообще не иметь сеттеров, а только конструктор и геттеры. . .	Как работать с GraphQL на TypeScript InfoMaster 08.01.2025 Введение в GraphQL и TypeScript В современной разработке веб-приложений GraphQL стал мощным инструментом для создания гибких и эффективных API. В сочетании с TypeScript, эта технология. . .	Счётчик на базе сумматоров + регистров и генератора сигналов согласования. Hrethgir 07.01.2025 Создан с целью проверки скорости асинхронной логики: ранее описанного сумматора и предополагаемых fast регистров. Регистры созданы на базе ранее описанного, предполагаемого fast триггера. То-есть. . .	Как перейти с Options API на Composition API в Vue.js BasicMan 06.01.2025 Почему переход на Composition API актуален В мире современной веб-разработки фреймворк Vue. js продолжает эволюционировать, предлагая разработчикам все более совершенные инструменты для создания. . .	Архитектура современных процессоров inter-admin 06.01.2025 Процессор (центральный процессор, ЦП) является основным вычислительным устройством компьютера, которое выполняет обработку данных и управляет работой всех остальных компонентов системы. Архитектура. . .	История создания реляционной модели баз данных, правила Кодда Programming 06.01.2025 Предпосылки создания реляционной модели В конце 1960-х годов компьютерная индустрия столкнулась с серьезными проблемами в области управления данными. Существовавшие на тот момент модели данных -. . .

@mr_dramm молодой 1774 / 1019 / 320 Регистрация: 17.07.2021 Сообщений: 2,066 Записей в блоге: 12
	01.09.2021, 20:18	2
	Можно сделать через checkbox hack, но тогда нужно будет именно кликать на десктопе (отказаться от ховера) и нажимать на мобильном устройстве. Но еще пользователи захотят закрыть панель проведя пальцем справа налево, так что лучше использовать js. 0