Создание эффектного меню без использования JavaScript
Сегодня рассмотрим как создать красивое меню на чистом css.
Сразу пример
С каждым днём, каждая технология расширяет свой функционал. С помощью css, можно уже делать вещи, которые вчера без JavaScript сделать было нельзя. А на JavaScript, который всегда считался клиентским языком, уже можно разворачивать сервера, но это уже другая история.
Красивое меню рассмотрим на примере, представленным здесь.
Меню на самом деле красивое и реализовано оно на чистом css. Давайте рассмотрим какие свойства прописывал создатель и что получилось.
Там представлено 7 типов меню. Но у них у всех есть одна общая черта — расплывчатый текст, который при наведении становится чётким. Это было реализовано с помощью свойства
color: transparent;color — устанавливает цвет шрифта, параметр - transparent делает его прозрачным.
А размытость придаёт свойство:
text-shadow: 0px 0px 5px #fff;- тень текста. Третий параметр (со значением 5px) устанавливает радиус размытия, четвёртый параметр — устанавливает цвет.
При наведении курсором на одну из ссылок, которая находится в блоке с классом bmenu (по документации разработчика) у всех ссылок меняется цвет на чёрный. А ссылке, на которую навели, добавляется параметр padding-left: 10px, добавляющий отступ от левого края внутри блока. В свойстве text-shadow меняется радиус на 1px.
Плавность при наведении на другие ссылки достигается за счёт свойства с параметрами transition: all 0.3s ease-in-out;
transition - свойство, устанавливающее эффект перехода между двумя состояниями объекта.
Первый параметр (all) - устанавливаем стилевое свойство, которое будет использоваться для создания эффекта перехода, в нашем случае указано что все свойства будут отслеживаться
Второй параметр (0.3s) - устанавливается продолжительность анимации от старта и до завершения. Задаётся в секундах.
Третий параметр (ease-in-out) - устанавливаем, насколько быстро должно меняться значение стилевого свойства для которого указан эффект перехода. Ease-in-out - анимация начинается и заканчивается медленно.
У transition ещё есть четвёртый параметр, не используемый в нашем примере. Это параметр transition-delay — устанавливает «задержку» перед выполнением анимации.
С параметром transition:
без параметра transition:
Данное меню реализовал на своём сайте. Просто скачав архив залил в папку css demo.css и style1.css (номер 1 означает какой пример меню выбрал).
Скачать архив моего примера.
Вот за счёт таких свойств, может сделать красивое меню без использования js. В данном примере рассмотрели только 3 свойства, а их у css очень, очень много. Экспериментируйте).
Данный пост подготовлен автором @zheev.
Заглавное фото взято с сайта с примерами tympanus.net