• Новые сообщения
  • Участники
  • Правила форума
  • Поиск
  • RSS
  • Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Как создать выпадающий блок на чистом CSS (Выпадающий блоки чистом CSS и HTML с открытием по клику)
Как создать выпадающий блок на чистом CSS
Kosten
 		Воскресенье, 28 Июня 2020, 23:46 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
В статье узнаете про создание выпадающего блока при клике на основу, который создан на чистом CSS, где в своей основе всего предоставленного примера лежит использование HTML чекбокса. Больше похоже функционал на вопрос и ответ, где можно написать изначально вопрос по вашей тематике на сайте, где при клике открывается или выезжает основа, где и будет предоставлен ответ.

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

Так по установки эти блоки выглядят:



HTML

Код
    <div class="kesumblen">
        <input type="checkbox" id="vupadayus-blokirata-id-1" class="vupadayus-blokirata">
        <label for="vupadayus-blokirata-id-1" class="kidesam-onucakes">1. Мобильные процессоры Intel Tiger Lake</label>
        <span class="ublosam-kaconckes-box">Intel Tiger Lake может запуститься через месяц или меньше</span>
    </div>

    <div class="kesumblen">
        <input type="checkbox" id="vupadayus-blokirata-id-2" class="vupadayus-blokirata">
        <label for="vupadayus-blokirata-id-2" class="kidesam-onucakes">2. Звездные войны: эскадрильи выглядят как?</label>
        <span class="ublosam-kaconckes-box">Новая игра X-Wing: Squadrons от EA выглядит именно так, как и ожидали фанаты.</span>
    </div>

    <div class="kesumblen">
        <input type="checkbox" id="vupadayus-blokirata-id-3" class="vupadayus-blokirata">
        <label for="vupadayus-blokirata-id-3" class="kidesam-onucakes">3. Предполагаемые слайды «AMD Radeon 6900</label>
        <span class="ublosam-kaconckes-box">Представляем совершенно новый AMD Radeaint 6900 XT.
        </span>
    </div>

    <div class="kesumblen">
        <input type="checkbox" id="vupadayus-blokirata-id-4" class="vupadayus-blokirata">
        <label for="vupadayus-blokirata-id-4" class="kidesam-onucakes">4. Stadia теперь работает на телефонах Android</label>
        <span class="ublosam-kaconckes-box">Мало-помалу Google открыл Stadia, и теперь Stadia появилась практически на всех телефонах Android.</span>
    </div>

    <div class="kesumblen">
        <input type="checkbox" id="vupadayus-blokirata-id-5" class="vupadayus-blokirata">
        <label for="vupadayus-blokirata-id-5" class="kidesam-onucakes">5. AMD обновляет дорожные карты для Zen</label>
        <span class="ublosam-kaconckes-box">AMD выпустила новую презентацию с данными о запуске своего продукта до 2022 года, включая дополнительную информацию о графических процессорах Xbox Series X и PlayStation 5</span>
    </div>

CSS

Код
        .kidesam-onucakes::selection {
            color: none;
            background: none;
        }

        .kesumblen {
            padding: 5px;
        }

    .kidesam-onucakes {
    display: block;
    font-weight: bold;
    width: 750px;
    cursor: pointer;
    border: 1px solid #d8d3d3;
    padding: 15px;
    font-size: 1.1em;
    background-color: #fdfdfd;
}

        .ublosam-kaconckes-box  {
            position: absolute;
            transform: translate(9999px);
            opacity: 0;  
        }

        /* скрываем checkbox */
        .vupadayus-blokirata {
            display: none;
        }

        .vupadayus-blokirata:checked ~ .ublosam-kaconckes-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;
        }

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

Демонстрация
Прикрепления: 5694279.png (17.9 Kb) · drop-down-block.zip (5.3 Kb)
Страна: (RU)
Kosten
 		Понедельник, 29 Июня 2020, 22:34 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
По своим функциям этот блок аналогичен, только идет изначально под ключевые слова, но с красивым дизайном при открытие.

Раскрывающиеся блоки с скрытым содержанием на чистом CSS3

HTML

Код
<div class="demo">
    <input type="checkbox" id="hd-1" class="hide"/>
    <label for="hd-1" >Нажмите здесь, чтобы увидеть скрытый текст №1</label>
    <div>
        HTML — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме..
    </div>
    <br/>
    <br/>
    <input type="checkbox" id="hd-2" class="hide"/>
    <label for="hd-2">Нажмите здесь, чтобы увидеть скрытый текст №2</label>
    <div>
        CSS - CSS Cascading Style Sheets — каскадные таблицы стилей — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.
    </div>
    <br/>
    <br/>
    <input type="checkbox" id="hd-3" class="hide"/>
    <label for="hd-3" >Нажмите здесь, чтобы увидеть скрытый текст №3</label>
    <div>
        JavaScript — прототипно-ориентированный сценарный язык программирования. Является реализацией языка ECMAScript (стандарт ECMA-262). JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам...
    </div>
    <br/>
    <br/>
    <input type="checkbox" id="hd-4" class="hide"/>
    <label for="hd-4">Нажмите здесь, чтобы увидеть скрытый текст №4</label>
    <div>
        jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX.
    </div>
</div>

CSS

Код
/* скрываем чекбоксы и блоки с содержанием */
.hide {
    display: none;
}
.hide + label ~ div{
    display: none;
}
/* оформляем текст label */
.hide + label {
    border-bottom: 1px dotted green;
    padding: 0;
    color: green;
    cursor: pointer;
    display: inline-block;
}
/* вид текста label при активном переключателе */
.hide:checked + label {
    color: red;
    border-bottom: 0;
}
/* когда чекбокс активен показываем блоки с содержанием  */
.hide:checked + label + div {
    display: block;
    background: #efefef;
    -moz-box-shadow: inset 3px 3px 10px #7d8e8f;
    -webkit-box-shadow: inset 3px 3px 10px #7d8e8f;
    box-shadow: inset 3px 3px 10px #7d8e8f;
    padding: 10px;
}

/* demo контейнер */
.demo {
    margin: 5% 10%;
}



See the Pen
demo-blog by Kocsten (@kocsten)
on CodePen.
Страна: (RU)
Kosten
 		Понедельник, 29 Июня 2020, 22:51 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
Меняем немного измененную стилистику CSS

CSS

Код
/* скрываем чекбоксы и блоки с содержанием */
.hide,
.hide + label ~ div {
    display: none;
}
/* вид текста label */
.hide + label {
    margin: 0;
    padding: 0;
    color: green;
    cursor: pointer;
    display: inline-block;
}
/* вид текста label при активном переключателе */
.hide:checked + label {
    color: red;
    border-bottom: 0;
}
/* когда чекбокс активен показываем блоки с содержанием  */
.hide:checked + label + div {
    display: block;
    background: #efefef;
    -moz-box-shadow: inset 3px 3px 10px #7d8e8f;
    -webkit-box-shadow: inset 3px 3px 10px #7d8e8f;
    box-shadow: inset 3px 3px 10px #7d8e8f;
    margin-left: 20px;
    padding: 10px;
    /* чуточку анимации при появлении */
     -webkit-animation:fade ease-in 0.5s;
     -moz-animation:fade ease-in 0.5s;
     animation:fade ease-in 0.5s;
}
/* анимация при появлении скрытых блоков */
@-moz-keyframes fade {
    from { opacity: 0; }
to { opacity: 1 }
}
@-webkit-keyframes fade {
    from { opacity: 0; }
to { opacity: 1 }
}
@keyframes fade {
    from { opacity: 0; }
to { opacity: 1 }   
}
.hide + label:before {
    background-color: #1e90ff;
    color: #fff;
    content: "\002B";
    display: block;
    float: left;
    font-size: 14px;
    font-weight: bold;
    height: 16px;
    line-height: 16px;
    margin: 3px 5px;
    text-align: center;
    width: 16px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.hide:checked + label:before {
    content: "\2212";
}


See the Pen
блоки на чистом CSS by Kocsten (@kocsten)
on CodePen.
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Как создать выпадающий блок на чистом CSS (Выпадающий блоки чистом CSS и HTML с открытием по клику)
  • Страница 1 из 1
  • 1
Поиск: