Анимации 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

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

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

• Создание трехмерных очков с использованием режимов наложения CSS
• Создание меню в ромбовидной сетке с использованием CSS
• Создание улучшенных фонов с помощью режима наложения