Даже если вы только начали заниматься веб-разработкой, то наверняка уже знаете, что для перехода к нужному блоку на странице (прокрутке в нужное место) можно использовать якоря - ссылки вида:
<a href="#block-id">Текст ссылки</a>
Переход по такой ссылке автоматически прокрутит страницу к блоку с нужным id. А можно ли не "прокручивать", просто сделать такой блок скрытым и показывать его только после нажатия на ссылку? Давайте попробуем, - при клике по ссылке увидим плавно выезжающее слева сообщение (здесь вы можете посмотреть этот код в действии):
Ну а при клике по ссылке "Close" сообщение пропадет (на этот раз не плавно, почему - см. ниже). Действительно, с помощью стилей CSS можно обработать некоторые события на странице даже без JavaScript.
Что же происходит?
Изначально наш блок сообщения c id = "box" не отображается - свойство display: none;
Далее мы задаем 2 набора свойств :target и :not(:target). Они называются псевдоклассами и отвечают за вид блока, когда ссылка ведет к нему - :target или нет - :not(:target). Их и можно использовать для управления видом такого целевого блока.
#box:target {
display: block;
animation: ani 1s forwards; /* можно обойтись без анимации */
}
#box:not(:target) {
display: none; /* анимировать не получится */
}
Собственно, все, ссылке для закрытия блока зададим адрес href="#hide" - это несуществующий на нашей странице блок. Зачем это нужно? Дело в том, что если мы оставим просто <a href="#">Close</a>, такая ссылка переместит вас в начало страницы, а в нашем случае нет - вы останетесь в том же месте, где и читали, посмотрите блок, закроете и продолжите. Если вас смущает обращение к несуществующему блоку - создайте пустой блок с id = "hide" чуть ниже нашего всплывающего сообщения:
<div id="hide"></div>
Ну и можем добавить анимацию плавного появления слева (или другие эффекты):
@keyframes ani {
/* Начальное положение */
0% {
transform: translateX(-150%);
}
/* Конечное положение */
100% {
transform: translateX(0);
}
}
А можно скрывать этот блок также плавно? - Нет, дело в том что свойство display в CSS не анимируется, удалять и возвращать блоки мы можем только мгновенно. Но как же у нас работает появление? - Мы сначала отображаем блок за границей области экрана, а только потом плавно перемещаем его в видимую область. Наоборот, переместить за экран и скрыть не получится - блок исчезнет сразу.
Однако незначительная доработка (уже с использованием JavaScript) позволит также сделать анимированное исчезновение.
Плюсы:
- очень простой короткий код;
- вместе с переходами по якорям позволит немного разнообразить простые одностраничные сайты.
Минусы:
- если таких блоков несколько - открытие одного сразу закрывает другой, не получится отобразить сразу несколько;
- переходы по ссылкам браузер записывает в историю действий и тогда при нажатии стрелок "вперед-назад" наши блоки будут исчезать и появляться. При этом мы останемся на той же странице. Это не создает значительных неудобств только в том случае, если таких блоков на странице один-два, не больше (я специально не привожу здесь код, позволяющий решить эту проблему на чистом CSS, гораздо проще и удобней будет реализовать это с помощью JS).
Это решение позволит немного "оживить" ваши первые веб-странички, но минусы вполне существенные и если вы намерены заниматься веб-разработкой всьерёз - изучайте фронтенд-технологии сразу в связке HTML+CSS+JavaScript. Например, доработайте этот пример (сделайте анимированное исчезновение блока и откажитесь от якорей или создайте собственное меню для мобильных сайтов).
Удачи!