Спойлер css3 без jquery

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

Пример работы смотрите тут.

Создаем структуру для будущего спойлера

Вот структура и готова, дальше думаю, будет правильно создать и подключить стили для нашего спойлера. Как я и говорил, наши вкладки, буду работать на чистом css3 и без всяких скриптов.

Стили для спойлера

Чтобы понять, как все работает, надо сначала понять, что делает атрибут for в теге <label>. Атрибут for указывает отношение метки Label к нужному чекбоксу. Эта особенность позволяет писать тег label отдельно от input, а при щелчке на label будет происходить имитация щелчка по самому чекбоксу.

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

Стиль закрывающий все спойлеры при загрузке

Стиль позволяющий открыть спойлер, чекбокс которого в состоянии checked

Пример сам по себе интересный, в ближайшем будущем когда все браузер будут хорошо работать с CSS3 его можно будет использовать и тем самым ускорять работу вашего сайта. Пока я протестировал в браузерах FF, Opera, IE, Chrome, Safari, Yandex и пример показал себя вполне сносно, не считая маленьких нюансов, думаю использовать начинать уже можно.

Мы с вами рассмотрели основные моменты работы, касающиеся этого примера. Если есть вопросы или поправки, пишите в комментариях, благодарности тоже принимаются. По вопросам CSS и HTML могу посоветовать почитать сайт htmlbook.ru, мне он служит отличным справочником.

Просмотреть работу спойлера можно на сайте jsfiddle.net. На этом мой урок по css3 подошел к концу, предлагайте новые скрипты на обзор.

Купить хостинг WordPress


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *