Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Простое анимированное горизонтальное меню с использованием 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

Перевод — Дежурка

Смотрите также:




Комментарии

  1. Антон
    Thumb up Thumb down +1

    transition: 1s Это достаточно много, 0.3 всегда хватает.

    Ответить

Оставить ответ


− два = 5

Вставить изображение