Скрыть и показать контент с помощью только CSS

Вступление Когда-то я задался вопросом, как можно сделать какую-нибудь простую анимацию на странице без использования сторонних тяжёлых библиотек — Ajax, jQuery или здоровенный JavaScript. Выход был один — искать решения с помощью CSS3.

Вот простой пример скрывающегося\появляющегося контента с помощью только HTML и CSS:

<!DOCTYPE html>
<head>
<title>menu mockup</title>
<style type="text/css">
.show {display: none; }
.hide:focus + .show {display: inline; }
.hide:focus { display: none; }
.hide:focus ~ #list { display:none; }
@media print { .hide, .show { display: none; } }
</style>
</head>
<body>
<p>Здесь что-то есть</p>
<div>
<a href="#">[Тыц]</a>
<a href="#">[Тыдыц]</a>
<ol id="list">
<li>фигня 1</li>
<li>фигня 2</li>
<li>фигня 3</li>
</ol>
</div>
<p>Ну как?</p>
</body>
</html>

Пример интересный, я раньше такое яваскриптом делал, каюсь… :) Но всё-таки недостаточный — хочется красивой и плавной анимации. Использовать будем свойство CSS3 «transition»

.tran1 { -o-transition: all 1s; //Для Оперы
         -moz-transition: all 1s;/Для Огнелиса/
         -webkit-transition: all 1s;//для Хрома и Сафари
         transition: all 1s;//Валидное, как должно быть
}

Указываем заодно специфические параметры для браузеров (IE не поддерживает пока вообще) Заодно анимируем увеличение размера:


#menu { opacity: 1; height: 9em; overflow: hidden }
a.hide:focus ~ #menu { opacity: 0; height: 0em; }

Что получилось в итоге (полный код):

.tran1 { -o-transition: all 1s;-moz-transition: all 1s;-webkit-transition: all 1s; transition: all 1s;}
#nav { padding: 1ex; border: 2px solid #aaa; background-color: #ccf; margin: 1em; width: 50%; }
#nav:hover { border: 2px solid #ddd; background-color: #eef; }
#nav h2 { display: inline; vertical-align: middle; }

.hide, .show  { display: none;  font-size: 80%; vertical-align: middle; }

@media all and (min-width:1px) { .hide, .show  { display: inline; } }

a.hide:focus + .show { display: inline; }
.show { display: none; }
a.hide:focus { display: none; }

#menu { opacity: 1; height:3em; margin-top: 0em; width: auto; margin-left: -1ex; overflow: hidden; }
a.hide:focus ~ #menu { opacity: 0; height: 0em; }

@media print {
.hide, .show  { display: none; }
#nav { position: static; border: none; width: auto; }
#menu { width: auto; }
}

Такое даже осилят даже компьютеры в Пензе… 😉

Остаётся только дождатся, когда нативная поддержка этого свойства появится в IE.

Всем удачного кодинга!

Постоянный адрес статьи Пинги запрещены.

  • Alex

    Пример в студию