Главная » Языки программирования

Выпадающий блок html css

На чтение 11 мин
Содержание
  1. Как сделать выпадающий блок на чистом CSS?
  2. Программирование на JavaScript с Нуля до Гуру 2.0
  3. Комментарии ( 0 ):
  4. Выпадающий блок при нажатии на HTML + CSS
  5. Аккордеон, faq, спойлер и другие раскрывающиеся виджеты

Как сделать выпадающий блок на чистом CSS?

Сегодня я покажу Вам как можно, на чистом CSS cделать выпадающий блок. В основе всего примера лежит использование HTML чекбокса.

body background-color: #f0f0f0;
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
>

/* псевдоэлемент, отменяет выделение текста стилями при быстрых кликах */
.toggler__label::selection color: none;
background: none;
>

/* Стили для заголовка блока, при нажатии на который появляется дополнительный блок */
.toggler__label display: block;
font-weight: bold;
cursor: pointer;
border: 1px solid #ddd;
padding: 15px;
font-size: 1.1em;
background-color: #fff;
>

/* скрытый блок позиционируется абсолютно, чтобы не оставлять пустое место */
.toggler__content-box position: absolute;
transform: translate(9999px);
opacity: 0;
>

/* скрываем checkbox */
.toggler__checkbox display: none;
>

/* при нажатии на блок label (каждый label через аттрибут for привязан к конкретному чекбоксу посредством уникального id)
чекбокс меняет свое состояние (но мы этого не видим, так как скрыли его)
и элемент с классом .toggler__content-box, ближайший к нажатому чекбоксу, плавно выдвигается, отображаяя
свое содержимое. */
.toggler__checkbox:checked ~ .toggler__content-box display: block;
position: relative;

transition: opacity .5s linear;
transform:translate(0);
opacity: 1;

margin-top:5px;
cursor: pointer;
border: 1px solid #ddd;
padding: 15px;
font-size: 1em;
background-color: #fff;
>

Программирование на JavaScript с Нуля до Гуру 2.0


Вместе с Бонусами курс содержит 123 урока общей продолжительностю 26 часов 46 минут и 19 секунд.


Это курс 2020-го года, поэтому, безусловно, да, информация актуальная. А когда она становится уже не совсем актуальной, то курс снимается с продаж и выпускается его новая версия.


Тематически он связан, некоторые темы совпадают (циклы, условия и т.п.), но это абсолютно другой курс с другим подходом и с упором на те вопросы, которые я получал несколько лет. Так же надо понимать, что подход к программированию на JavaScript сильно изменился за эти годы. И всё это уже учтено в новом курсе.

В итоге мы должны увидеть следующее:

Создано 16.06.2020 13:30:10

  • Михаил Русаков

    • Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

    Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
    Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

    Если Вы не хотите пропустить новые материалы на сайте,
    то Вы можете подписаться на обновления: Подписаться на обновления

    Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

    Читайте также:  Php html xml what is that

    Порекомендуйте эту статью друзьям:

    Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

    1. Кнопка:
      Она выглядит вот так:
    2. Текстовая ссылка:
      Она выглядит вот так: Как создать свой сайт
    3. BB-код ссылки для форумов (например, можете поставить её в подписи):

    Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

    Источник

    Выпадающий блок при нажатии на HTML + CSS

    Выпадающий блок при нажатии на HTML + CSS

    Ранее также все решалось, то для этого обязательно подключали javascript, по при обновленном CSS3 все изменилось, и теперь все выстраивается на чистых стилях. Где нужно задать свойство под каждый элемент, которые будут выполнять свой заданный функционал. Плюс эта версия блока отличается от других, что при клике вы можете открыть любой раздел, как и на остальных, но также автоматически закрыть, для удобства все сделано отлично.

    Такой блок можно увидеть на страницах, где идет очень много содержание по информации, и подключая развертывание блоков, вы сразу заметите, что место стало намного больше, что для удобства и восприятие нужно создавать все корректно и удобности для пользователя.

    Так выглядит при проверке, где изменена палитра, также добавлены некоторые элементы для редактирование.

    Чистый CSS-аккордеон с помощью CSS3

    Приступаем к установке:

    .gaonutosal <
    float: left;
    width: 37%;
    padding: 0 1em;
    >

    .pesontedan <
    position: relative;
    margin-bottom: 1px;
    width: 100%;
    color: #f3f1f1;
    overflow: hidden;
    >

    .pesontedan input <
    position: absolute;
    opacity: 0;
    z-index: -1;
    >

    .pesontedan label <
    position: relative;
    display: block;
    padding: 0 0 0 1em;
    background: #1c3e5d;
    line-height: 3;
    cursor: pointer;
    text-shadow: 0 1px 0 #333131;
    font-size: 17px;
    >

    .pesontedan-content <
    max-height: 0;
    overflow: hidden;
    background: #0d7b8e;
    transition: max-height .40s;
    font-size: 14px;
    color: #fffdfd;
    text-shadow: 0 1px 0 #292727;
    >

    .pesontedan-content <
    background: #0f6f80;
    >
    .pesontedan-content p <
    margin: 1em;
    >
    /* :checked */
    .pesontedan input:checked ~ .pesontedan-content <
    max-height: 100vh;
    >

    /* Icon */
    .pesontedan label::after <
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    width: 3em;
    height: 3em;
    line-height: 3;
    text-align: center;
    -webkit-transition: all .40s;
    -o-transition: all .40s;
    transition: all .40s;
    >
    .pesontedan input[type=checkbox] + label::after <
    content: «+»;
    >
    .pesontedan input[type=radio] + label::after <
    content: «\25BC»;
    >
    .pesontedan input[type=checkbox]:checked + label::after <
    transform: rotate(315deg);
    >
    .pesontedan input[type=radio]:checked + label::after <
    transform: rotateX(180deg);
    >

    Сами заголовки идут по вверх, на цветовой гамме, которая задана в стилистике, где можно ее изменить под свой стиль дизайна. Также у вас появится возможность поставить скорость открывание, все отлично настраивается. Если установить больше трех разделов, то получится по виртуальности схоже как на навигацию.

    Источник

    Аккордеон, faq, спойлер и другие раскрывающиеся виджеты

    Поддерживается всеми современными браузерами и это семантически правильно оформленный код, при использовании которого будут плюсы:

    1. Людям с ограниченными возможностями проще будет пользоваться вашим сайтом! Их софт (скринридеры и подобное) прекрасно понимает html5 теги и будет правильно обрабатывать их и правильно информировать людей о содержимом.
    2. Улучшится связанность текста, и поисковики смогут более качественно индексировать сайт, так как будут лучше понимать, как связаны между собой видимый и скрытый текст.
    3. Будет доступно управление элементами с клавиатуры и других устройств.
    4. Уменьшается количество javascript кода, который нужно подгружать, что увеличивает скорость загрузки страницы, скорость обработки и корректность.
    5. Улучшаются показатели в Lighthouse, Google PageSpeed и других подобных инструментах.
    6. Работает при выключенном javascript.
     
    Покажи-скрой меня 
    Скандинавская мифология — мифология древних скандинавов
     
     
    Покажи-скрой меня 2 
    Основным источником сведений о ней являются тексты поэтической
     
     
    Покажи-скрой меня 3 
    Скандинавская мифология — мифология древних скандинавов

    С одной стороны выглядит не очень красиво, с другой стороны нейтрально и легко может вписаться во многие дизайны. Кстати, дефолтный вид тега Details очень похож на спойлер от хабра, только нужно чуть перекрасить, сделать подчеркивание и получим семантически правильный, без javascript и дивов, хабровский спойлер.

    Читайте также:  Data transfer objects python

    К сожалению, у дефолтного маркера есть два недостатка:

    Рассмотрим первый пример Details/Summary с измененным текстовым маркером:

    summary::-webkit-details-marker summary::-moz-list-bullet summary::marker summary < display:inline-block; padding: .3em .5em .3em .4em; font-size:1.4em; cursor: pointer; >summary:before < content: "+"; margin-right: .3em; >details[open] > summary:before < content: "–"; >summary ~ * < padding:0 1em 0 1em; >summary:focus < outline:0; box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3); >details

    summary:focus — обводка при помощи box-shadow, это нужно для клавиатуры, чтоб видно было активный элемент и можно было перемещаться клавишей таб и открывать и закрывать при помощи пробела.

    Для тега summary я поставил display:inline-block — это чтоб он не растягивался на всю ширину и были кликабельными только слова, а не вся строка.

    Текстовый маркер справа + простейшая анимация текста и маркера:

    summary::-webkit-details-marker summary::-moz-list-bullet summary::marker summary < display:inline-block; padding: .3em .5em .3em .4em; font-size:1.4em; cursor: pointer; >summary:after < content: "+"; margin-left: .3em; display: inline-block; transition: transform .5s; >details[open] > summary:after < transform: scale(1,-1); >summary ~ * < padding:0 1em 0 1em; >summary:focus < outline:0; box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3); >details[open] summary ~ * < animation: sweep .5s ease-in-out; >@keyframes sweep < 0% 100% > details

    В новом примере я использую для маркера summary:after вместо summary:before, для того чтоб он отображался справа.

    Анимация маркера при помощи transform: scale(1,-1);

    Всем элементам, которые находится после summary, ставлю анимацию плавного появления при помощи animation: sweep .5s ease-in-out;

    Svg маркер + анимация поворота:

    summary::-webkit-details-marker summary::-moz-list-bullet summary::marker summary < display:inline-block; padding: .3em .6em .3em 1.5em; font-size:1.4em; cursor: pointer; position: relative; >summary:before < left: .3em; top: .4em; color: transparent; background: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em; width: 1em; height: 1em; content: ""; position: absolute; transition: transform .5s; >details[open] > summary:before < transform: rotateZ(90deg); >summary ~ * < padding:0 1em 0 1em; >details[open] summary ~ * < animation: sweep .5s ease-in-out; >@keyframes sweep < 0% 100% > summary:focus < outline:0; box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3); >details

    Summary:before пришлось серьезно переделать:

    1. Поставить position: absolute; left: .3em; top: .4em; width: 1em; height: 1em;
    2. Текстовому маркеру надо обязательно поставить color: transparent; иначе он будет виден.
    3. Картинку вешаем при помощи background.
    Читайте также:  Установка пакетов python локально

    Ну и добавляем transform: rotateZ(90deg) для красивого поворота стрелки.

    Если нам нужна svg иконка справа, то нужно поменять summary:before и вместо left поставить right.

    Для summary поставить padding-right: 1.5em;

    summary::-webkit-details-marker summary::-moz-list-bullet summary::marker summary < display:inline-block; padding: .3em 1.5em .3em .6em; font-size:1.4em; cursor: pointer; position: relative; >summary:before < right: .3em; top: .4em; color: transparent; background: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em; width: 1em; height: 1em; content: ""; position: absolute; transition: transform .5s; >details[open] > summary:before < transform: rotateZ(90deg); >summary ~ * < padding:0 1em 0 1em; >details[open] summary ~ * < animation: sweep .5s ease-in-out; >@keyframes sweep < 0% 100% > summary:focus < outline:0; box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3); >details

    Давайте теперь сделаем один из наиболее распространенных примеров создания аккордиона, где будет иконка слева, фон, тени, эффекты:

    body details < display:block; background: #fff; width:400px; box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); border-radius: 8px; overflow:hidden; margin-bottom: 1.5rem; >summary::-webkit-details-marker summary::-moz-list-bullet summary::marker summary < display:block; padding: .3em .3em .3em 1.4em; font-size:1.4em; cursor: pointer; position: relative; border-bottom: 1px solid #e2e8f0; >summary:before < top: .4em; left: .3em; color: transparent; background: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em; width: 1em; height: 1em; content: ""; position: absolute; transition: transform .5s; >details[open] > summary:before < transform: rotateZ(90deg); >summary ~ * < padding: 0 2em 10px 2em; >details[open] summary ~ * < animation: sweep .5s ease-in-out; >@keyframes sweep < 0% 100% > summary:focus

    Svg маркер справа + эффект зеркального поворота стрелки:

    body details < display:block; background: #fff; width:400px; box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); border-radius: 8px; overflow:hidden; margin-bottom: 1.5rem; >summary::-webkit-details-marker summary::-moz-list-bullet summary::marker summary < display:block; padding: .3em 1em .3em .9em; border-bottom: 1px solid #e2e8f0; font-size:1.4em; cursor: pointer; position: relative; >summary:before < top: .4em; right: .3em; color: transparent; background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTYuNTkgOC41OUwxMiAxMy4xNyA3LjQxIDguNTkgNiAxMGw2IDYgNi02eiIvPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em; width: 1em; height: 1em; content: ""; position: absolute; transition: transform .5s; >details[open] > summary:before < transform: scale(1,-1); >summary ~ * < padding: 0 1em 10px 1.4em; >details[open] summary ~ * < animation: sweep .5s ease-in-out; >@keyframes sweep < 0% 100% > summary:focus

    Теперь вы можете создавать красивые аккордионы, спойлеры и faq, без JavaScript, на чистом HTML5 и CSS.

    Прежде чем убирать outline, 100 раз подумайте, чем вы можете его заменить, чтоб человек мог видеть фокус и мог перемещаться с клавиатуры или других устройств.

    Если вам нужно, чтоб при открытии одного спойлера, закрывались остальные, то придется применить javascript, ниже привожу пример простого JS кода, который решит эту проблему.

    var details = document.querySelectorAll("details"); for(i=0;i function accordion(event) < if (!event.target.open) return; var details = event.target.parentNode.children; for(i=0;idetails[i].removeAttribute("open"); > >

    С уважением, создатель конструктора лэндингов для фрилансеров CMS cPortfolio

    Источник

    Оцените статью
    © 2023 Программирование