С Новым годом! Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.60/30: Рейтинг темы: голосов - 30, средняя оценка - 4.60
0 / 0 / 0
Регистрация: 30.11.2018
Сообщений: 38
1

Кнопка, которая выдвигает скрытую панель слева

09.02.2021, 09:09. Показов 5507. Ответов 3
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Скажу сразу, что html и css только недавно начал изучать, в общем решил я сделать скрытую панель, которая должна скрываться или выдвигаться, если нажать на кнопку сбоку. Нашёл пример, но там панель выдвигается не при нажатии, а при наведении мыши. И вот как сделать, без использования JS, чтобы панель выдвигалась при нажатии, а если ещё раз нажать, то пряталась?

Вот код откуда я нашёл пример:
HTML5
1
2
3
4
5
<div id="panel"> >>>
    <div id="hidden_panel">
        Содержание блока
    </div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
/* ВНЕШНИЙ БЛОК */
#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; /* отступ слева */
}
Как я понял, нужно заменить hover на что-то другое, только не знаю на что
Миниатюры
Кнопка, которая выдвигает скрытую панель слева   Кнопка, которая выдвигает скрытую панель слева  
0
Лучшие ответы (1)
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
09.02.2021, 09:09
Ответы с готовыми решениями:

Виджет - панель слева в win xp
Народ, поможите плиз, не могу нигде найти подобный виджет на раб стол ХР сколько не искал, может...

Как добавить на главной странице панель меню слева (column_left)?
Добрый день! Начал разбираться с устройством Opencart и не могу понять такой простой момент: как...

Чёрный экран - серая кнопка внизу слева
Здравствуйте! У меня проблема такая. DOS программа работает под W-98. После ее работы и выхода в...

Плавающая кнопка или панель
Всем привет уважаемые мастера скажите пожалуйста как в своем проекте можно реализовать плавающую...

3
Эксперт JS
1586 / 796 / 362
Регистрация: 01.02.2019
Сообщений: 1,047
09.02.2021, 10:13 2
Лучший ответ Сообщение было отмечено Xalindie как решение

Решение

Xalindie, Работа с кликами на css без js делается "хаком" с input checkbox, например так:
HTML5
1
2
3
4
5
6
<input id="cb" type="checkbox" hidden>
<label id="panel" for="cb"> >>>
    <div id="hidden_panel">
        Содержание блока
    </div>
</label>
CSS
1
2
3
4
5
6
7
/* ... */
#cb:checked + #panel {
    left: 220px; /* при наведении выдвигается на скрытые 200px + 20px отступы */
}
#cb:checked + #panel #hidden_panel {
    left: 0; /* отступ слева */
}
1
1794 / 942 / 383
Регистрация: 26.11.2014
Сообщений: 1,927
Записей в блоге: 1
09.02.2021, 10:31 3
Да, есть такое...
HTML5
1
2
3
4
5
<label for="input">>>></label>
<input type="checkbox" id="input">
<div class="hidden_panel">
  Содержание блока
</div>
CSS
1
2
3
4
5
6
7
8
9
#input {
  display: none;
}
.hidden_panel {
  visibility: hidden;
}
#input:checked ~ .hidden_panel {
  visibility: visible;
}
1
0 / 0 / 0
Регистрация: 30.11.2018
Сообщений: 38
09.02.2021, 12:51  [ТС] 4
Почему-то, если нажимать не на кнопку, а на панель, то сама панель как кнопка, то есть панель задвигается обратно. Скажите, пожалуйста, как это убрать?

Добавлено через 51 минуту
Исправил
0
09.02.2021, 12:51
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
09.02.2021, 12:51
Помогаю со студенческими работами здесь

Своя кнопка на панель mvb6
Как создать свой инструмент на панели Microsoft Visual Studio 6 Только не из стандартных...

Навигационная панель Bootstrap 3. Кнопка
В наличии навигация Bootstrap 3. Она свёртывается в кнопку от 768px. Вопрос: как сделать чтоб она...

Кнопка в несколько строк (заголовок и описание) и картинка (слева или справа)
Как сделать такую &quot;многофункциональную&quot; кнопку? Заголовок должен быть жирным шрифтом.

Боковая кнопка + Выдвижная панель - Импровизация
Заинтересован в вопросе по разным кнопочкам и красивым панелькам)) Пытаюсь выяснить как сделать...

Панель управления в Mathcad 15 (флажок, переключатель, кнопка)
Всех приветствую! Помогите пожалуйста с поиском информации по &quot;панели управления&quot;. На ней находятся...

Камера SONY DSC-QX10 при включении выдвигает объектив и прячет его (после падения)
Уранил смартограф SONY DSC-QX10 (это фотоаппарат без дисплея - кою роль играет смартфон - через...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Новые блоги и статьи
Книги и учебные ресурсы по C#
InfoMaster 08.01.2025
Базовые учебники и руководства Одной из лучших книг для начинающих является "C# 10 и . NET 6 для начинающих" Эндрю Троелсена и Филиппа Джепикса . Книга последовательно раскрывает основные концепции. . .
Что такое NullReferenceEx­­­ception и как исправить?
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-х годов компьютерная индустрия столкнулась с серьезными проблемами в области управления данными. Существовавшие на тот момент модели данных -. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru