Простое анимированное горизонтальное меню с использованием HTML5 и CSS
15 июля 2016 | Опубликовано в css | 3 Комментариев »
Анимации CSS могут использоваться для усовершенствования многих деталей сайта, включая горизонтальное меню. В этом уроке мы покажем, как можно улучшить и анимировать простое основное меню, созданное на HTML5, таким образом, чтобы оно не теряло функциональность даже в старых версиях браузеров.
Для начала рассмотрим очень простую разметку, так как элемент навигации должен использоваться только один раз на странице, нам даже не нужно добавлять идентификатор:
<nav> <a href="#">Home</a> <a href="#">About Us</a> <a href="#">Products</a> </nav>
Добавим для меню фоновое изображение и еще несколько основных свойств CSS. Важно запомнить, что хотя фоновое изображение может быть любого размера, всегда нужно обрезать его до размера, который будет реально использован, иначе нужно будет загружать огромное изображение и использовать только его малую часть. Еще добавим небольшую тень тексту ссылки, чтобы он лучше выделялся на фоновом изображении:
nav { background: url(clouds.jpg) no-repeat; padding: 1em 0; } nav a { text-decoration: none; color: #fff; padding: 1em; text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.7); }
Еще добавим стили для ссылок при наведении указателя мыши, задающие им полупрозрачный фон:
nav a:hover { background: rgba(0, 0, 0, 0.7); }
После этого добавим анимации для состояния ссылки по умолчанию, чтобы цвет фона плавно появлялся:
nav a { text-decoration: none; color: #fff; padding: 1em; text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.7); transition: background 1s; }
Возможно, Вы обратили внимание на небольшой промежуток между соседними блоками фонов ссылок. Об этой проблеме можно прочитать подробней в уроке по созданию простого горизонтального меню, и здесь эту проблему решим таким же образом: удалим переводы строки между ссылками:
<nav> <a href="#">Home</a><a href="#">About Us</a><a href="#">Products</a> </nav>
В результате если браузер поддерживает анимации CSS, то фон у ссылок будет плавно появляться и исчезать при наведении указателя мыши. Если же браузер не поддерживает анимаций CSS, пользователь все равно увидит фон у ссылок:
Как и всегда, код CSS задает внешний вид, а код HTML – разметку данных, и они остаются независимыми.
Автор урока Dudley Storey
Перевод — Дежурка
Смотрите также:
Комментарии
Оставить ответ
Похожие статьи
-
Строгие узоры и иллюстрации от Гарри Голдхока
-
Бесплатные весенние фотографии
-
Яркое на темном в веб-дизайне
-
20 крутых примеров нейл-арта
-
Бесплатный клипарт лепестков
-
Разные шрифты на одной веб-странице
-
Вкусные образы в фотографиях Луизы Валиери
-
Яркий текстовый эффект с масками в Adobe Illustrator
-
Шоколадное вдохновение
-
Текстовый эффект в стиле Sci-fi
-
Цветочные рамки для вашего дизайна
-
Сайты с милой анимацией
-
Благородные паттерны от Дины Мошкало
-
Создание многострочного градиентного фона для текста
Самые комментируемые
- 50 прикольных страниц ошибки 404
90
- Flash и HTML5 для клиентов, разработчиков и пользователей. Откручиваем гайки.
88
- 16 лучших бесплатных графических редакторов
70
- Интервью с fashion-иллюстратором Lilit Sarkisian
64
- Дизайн схемы проезда
62
- 12 сайтов, на которых можно продавать свои работы
61
- 370 экшенов для фотошопа
58
- Как выглядят сайты дизайнерских вузов - их и наши
58
15 июля 2016 в 13:45
transition: 1s Это достаточно много, 0.3 всегда хватает.
Ответить