Графическое CSS-меню

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

Многие web-мастера до сих пор представляют себе реализацию графического меню путём замены картинок с помощью JavaScript. Поисковые роботы на сегодняшний день не наделены такими способностями, чтобы считывать текст с самих картинок, но они успешно понимают атрибут ALT. Люди, которые занимаются оптимизацией и раскруткой сайтов хорошо знают, что этому атрибуту поисковики придают очень и очень маленькое значение. Как гласит теория, Яндекс атрибут ALT не учитывает вовсе.

Итак, в этой статье я расскажу и покажу, как сделать графическое динамическое CSS меню без использования JavaScript.

Вот такое меню:

Вот такое несложное, но очень даже привлекательное меню. Решение о графическом оформлении данного меню было принято только потому, что в нём используется нестандартный шрифт. Если бы использовался распространённый шрифт, например, Arial - я бы не написал эту статью.

Меню функционирует следующим образом. Активная ссылка, которая совпадает со страницей, на которой находится посетитель, всё время отображается оранжевым цветом. Остальные пункты при наведении курсора меняют свой цвет с тёмно-серого на оранжевый и обратно.

 <ul id="navbar">
 <li class="about">
 <a href="#" title="О компании">О компании<span>&nbsp;</span></a>
 </li>
 <li class="facility active">
 <a href="#" title="Услуги">Услуги<span>&nbsp;</span></a>
 </li>
 <li class="portfolio">
 <a href="#" title="Портфолио">Портфолио<span>&nbsp;</span></a>
 </li>
 <li class="vacancy">
 <a href="#" title="Вакансии">Вакансии<span>&nbsp;</span></a>
 </li>
 <li class="faq">
 <a href="#" title="Частые вопросы">Частые вопросы<span>&nbsp;</span></a>
 </li>
 </ul>

Замечу, что решение сделать меню с помощью списка - это лишь частный случай. В данной ситуации тэг LI является пунктом меню.

По кусочкам

Да, это фоновое изображение всего меню, на который будут накладываться ссылки. Меню имеет строго фиксированный размер, соответствующий размерам этого фона: 536 пикселей по ширине и 93 по высоте. Безусловно, такой подход накладывает некоторые ограничения на создание нового пункта меню. Например, чтобы в меню добавить дополнительный пункт, кроме создания самой картинки с текстом, необходимо вручную отредактировать фон. То же самое касается и удаления любого из пунктов.

Меню имеет идентификатор navbar, через который к нему можно смело обращаться через CSS:

 #navbar {
 margin: 0;
 padding: 0;
 background: url(../img/nav-bg.gif) no-repeat 0 0;
 width: 536px;
 height: 93px;
 }

В результате чего браузер выдаёт следующий результат:

Средствами того же CSS нетрудно навести порядок с самими пунктами (LI):

 #navbar li {
 list-style: none;
 float: left;
 position: relative;
 margin: 0;
 padding: 0;
 top: 50px;
 height: 29px;
 }

Должен заметить, что результат уже больше похож на реальность:

Пояснения к коду:

• list-style: none - убирает маркер у элементов списка;
• float: left - принудительно выравнивает элемент по левому краю;
• position: relative - данное свойство необходимо, чтобы иметь возможность абсолютно позиционировать различные элементы внутри тэга LI (относительно его расположения на странице). К этому моменту я вернусь ещё не один раз.

Для каждого LI задан свой класс (about, facility, portfolio, vacancy и faq). Таким образом, каждому пункту задаётся определённая ширина:

Преимуществом рассматриваемого меню является то, что в нём используются не графические ссылки в прямом смысле, а сами ссылки состоят из текста, на который накладываются элементы с соответствующим фоновым изображением. Ниже с помощью CSS оформляется текстовый вид ссылок:

 #navbar li a {
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 font: 15px/29px "Arial Narrow";
 text-decoration: none;
 white-space: nowrap;
 color: #666666;
 height: 29px;
 }
 #navbar li a:hover {
 color: #ff6600;
 }

Результат:

Пояснения к коду:

• display: block - делает элемент страницы блочным. По-умолчанию ссылка имеет свойство display: inline, т.е. ведёт себя как строка. Но задавать координаты отображения и задавать определённую высоту с шириной можно только блоковым элементам;
• position: absolute - задаёт абсолютное свободное позиционирование.

Как сказано несколькими строчками выше, для блоков можно задавать координаты отображения. ВАЖНО понимать, относительно чего задаются эти координаты! В данном случае будет не лишним вспомнить, что для элементов LI было задано позиционирование relative. Таким образом, позиционирование ссылки внутри элемента LI происходит относительно границ этого элемента. Например, top: 0 говорит о том, что верхняя граница ссылки A примыкает к верхней границе элемента LI, в котором он находится.

Накладывание на текст

Честно говоря, полдела на этом этапе можно считать выполненным. Теперь стоит уделить внимание самим картинкам, которые будут НАКЛАДЫВАТЬСЯ на текст. Как пример, я буду использовать в примерах пункт .

Хочу заметить, что все пункты меню имеют одинаковую высоту, но разную ширину. Например, рассматриваемый пункт имеет размер 110 на 29 пикселей.

Обратите внимание, что под обозначениями 2, 3 и 5 картинки затемнены. Это сделано для зрительного восприятия, чтобы иметь представление о реальных размерах изображения.

Итак, всё по порядку: Для начала будет полезно вспомнить отрывок HTML кода:

 <li class="about">
 <a href="#" title="О компании">О компании<span>&nbsp;</span></a>
 </li>

Вставка <span>&nbsp;</span> используется в каждом пункте перед закрытием ссылки. Как видно, тэг SPAN не содержит никакой информации, кроме пробела, представленного в символьной форме (только для того, чтобы не ругался валидатор). Но именно в этот тэг будут загружаться изображения и накладываться поверх текста!

Стоит сразу отметить, что SPAN располагается внутри элемента LI по аналогии с расположением ссылок. А именно:

 #navbar li a span {
 cursor: pointer;
 display: block;
 position: absolute;
 float: left;
 top: 0;
 left: 0;
 background-position: 0 0;
 background-repeat: no-repeat;
 height: 29px;
 }
 #navbar li a:hover span {
 background-position: 0 -29px;
 }

Пояснения относительно position: absolute, top: 0 и left: 0 давались выше при рассмотрении позиционирования ссылок внутри элемента LI. Здесь эти свойства играют аналогичную роль. Внимание стоит уделить другим свойствам, как:

• cursor: pointer - определяет форму курсора мыши. Из-за наложения SPAN поверх A в Internet Explorer сама ссылка работает, но курсор отображается как при наведении на обычный текст. Курсор pointer, применённый к SPAN, исправляет эту ситуацию;
• background-position: 0 0 - это свойство задаёт местонахождение фонового рисунка внутри элемента;
• height: 29px -задаёт высоту свободно позиционированного элемента. В данном примере высота элемента равна половине высоты картинки.

А теперь стоит ещё раз посмотреть на иллюстрацию выше, а точнее на обозначения 2 и 3. Высота фоновой картинки - 58 пикселей, что в два раза больше высоты пункта меню. Таким образом, отображается только половина фонового изображения. Ну а что делать со второй половиной - описано ниже.

Свойство background-position: 0 -29px используется для анимации фона при наведении курсора на ссылку. Оно говорит о том, что фоновое изображение должно сместиться вверх на 29 пикселей. Другими словами, в области видимости окажется нижняя половина фонового рисунка.

Итак, результат!

Честно говоря, правильно, что этот результат не отличается от предыдущего. Дело в том, что на данном этапе все подготовлено к тому, чтобы загрузить фоновые рисунки в соответствующие элементы (пункты). Для наглядности, загрузим фоновый рисунок в пункт (и именно в тэг SPAN):

 #navbar li.about a span {
 background-image: url(../img/n1.gif);
 }

Вот теперь можно ещё раз посмотреть на результат:

Здесь при наведении курсора на пункт фоновое изображение сдвигается вверх на 29 пикселей, и надпись становится оранжевой. Аналогичным образом фоновые рисунки загружаются в оставшиеся пункты.

Текущая ссылка - проще простого!

После проделанной работы осталось одна небольшая мелочь - это выделить активную ссылку (которая совпадает с разделом сайта, в котором находится посетитель). Для этого ещё раз вспомни HTML код:

 <li class="facility active">
 <a href="#" title="Услуги">Услуги<span>&nbsp;</span></a>
 </li>

В данном случае особый интерес представляет первая строчка. Как видно, тэгу LI задан не один класс, а два: facility и active. Второй класс как раз и указывает на то, что посетитель сайта находится на соответствующей ссылке странице и что эту ссылку необходимо выделить из остальных. А точнее, как и при наведении курсора, сместить фоновое изображение внутри элемента на 29 пикселей вверх.

 #navbar li a:hover span {
 background-position: 0 -29px;
 }

Теперь меню готово и его можно использовать.

Работающий пример смотреть тут. Скачать в в архиве [ZIP; 97.1 Кб]

Оставить комментарий

Оставлять комментарии могут только зарегистрированные пользователи.

Если вы не являетесь зарегистрированным пользователем, то вам необходимо зарегистрироваться. Регистрация бесплатна. Если вы уже зарегистрированы на CodeNet, то вам необходимо ввести логин и пароль в верхней (Alt-U) части страницы.

Комментарии