Если вы регулярно используете наборы изображений CSS3 при создании веб-сайтов, вам может быть интересно, можно ли с их помощью как-то упростить создание меню в HTML5. Да, это возможно, хотя и не всегда выглядит обоснованным, о чем мы расскажем дальше.

Если использовать набор изображений для создания меню в HTML5, нужно создать элемент навигации, чтобы показать браузеру, что это основной раздел навигации. Теоретически в этом случае нет необходимости в использовании элемента ненумерованного списка и его элементов для оборачивания элементов ссылок, можно просто оставить ссылки со вложенными элементами изображений:

<nav class="sprites" <a href="#">
                <img src="sprite-panel.png" alt="RSS">
        </a>
        <a href="#">
                <img src="sprite-panel.png" alt="About">
        </a>
        <a href="#">
                <img src="sprite-panel.png" alt="Book Mode">
        </a>
</nav>

Это также упростит нужный код CSS:

nav.sprites {
        height: 27px;
}
nav.sprites img {
        position: absolute;
        opacity: 0.4;
        width: 150px;
        height: 76px;
        transition: all 0.5s linear;
}
nav.sprites a:hover img {
        opacity: 1;
}
img[alt="RSS"] {
        clip: rect(54px,21px,76px,0px);
}
img[alt="About"] {
        clip: rect(54px,47px,76px,25px);
}
img[alt="Book Mode"] {
        clip: rect(54px,75px,76px,48px);
}

Но автор не считает правильным всегда избавляться от структуры списка в элементе навигации. Мы бы не рекомендовали удалять элемент ненумерованного списка и его элементы, если меню ссылается на связанные друг с другом страницы. Особенно если со временем такое меню может стать более сложным, например, обзавестись подпунктами. Хотя для очень простого и небольшого меню, как в примере выше, в котором пункты меню не связанны друг с другом и значительное усложнение такого меню не видится возможным в будущем, использование только элемента навигации со вложенными элементами ссылок с элементами изображений может оказаться вполне обоснованным и достаточным.

Автор урока Dudley Storey

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

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

• Анимации элементов по дугам, окружностям и эллипсам с использованием CSS
• Фоны SVG в виде штриховки, сетки и шахматной доски
• Создание видео эффектов HTML5 с использованием режимов наложения CSS