Графическое CSS-меню
На большинстве сайтов навигационное меню оформляется с помощью обычных текстовых ссылок. Во-первых, такие ссылки хорошо индексируются поисковиками, а во-вторых, это самый простой способ. Но что делать, когда дизайн требует нестандартного решения? В этой статье я поделюсь своим опытом и покажу на примере, как создать навигационное меню, используя изображения, но при этом сохранить.
Многие web-мастера до сих пор представляют себе реализацию графического меню путём замены картинок с помощью JavaScript. Поисковые роботы на сегодняшний день не наделены такими способностями, чтобы считывать текст с самих картинок, но они успешно понимают атрибут ALT. Люди, которые занимаются оптимизацией и раскруткой сайтов хорошо знают, что этому атрибуту поисковики придают очень и очень маленькое значение. Как гласит теория, Яндекс атрибут ALT не учитывает вовсе.
Итак, в этой статье я расскажу и покажу, как сделать графическое динамическое CSS меню без использования JavaScript.
Вот такое меню:
Вот такое несложное, но очень даже привлекательное меню. Решение о графическом оформлении данного меню было принято только потому, что в нём используется нестандартный шрифт. Если бы использовался распространённый шрифт, например, Arial - я бы не написал эту статью.
Меню функционирует следующим образом. Активная ссылка, которая совпадает со страницей, на которой находится посетитель, всё время отображается оранжевым цветом. Остальные пункты при наведении курсора меняют свой цвет с тёмно-серого на оранжевый и обратно.
<ul id="navbar"> <li class="about"> <a href="#" title="О компании">О компании<span> </span></a> </li> <li class="facility active"> <a href="#" title="Услуги">Услуги<span> </span></a> </li> <li class="portfolio"> <a href="#" title="Портфолио">Портфолио<span> </span></a> </li> <li class="vacancy"> <a href="#" title="Вакансии">Вакансии<span> </span></a> </li> <li class="faq"> <a href="#" title="Частые вопросы">Частые вопросы<span> </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). Таким образом, каждому пункту задаётся определённая ширина:
#navbar li.about { width: 110px; } #navbar li.facility { width: 101px; } #navbar li.portfolio { width: 108px; } #navbar li.vacancy { width: 103px; } #navbar li.faq { width: 114px; }Преимуществом рассматриваемого меню является то, что в нём используются не графические ссылки в прямом смысле, а сами ссылки состоят из текста, на который накладываются элементы с соответствующим фоновым изображением. Ниже с помощью 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> </span></a> </li>
Вставка <span> </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> </span></a> </li>
В данном случае особый интерес представляет первая строчка. Как видно, тэгу LI задан не один класс, а два: facility и active. Второй класс как раз и указывает на то, что посетитель сайта находится на соответствующей ссылке странице и что эту ссылку необходимо выделить из остальных. А точнее, как и при наведении курсора, сместить фоновое изображение внутри элемента на 29 пикселей вверх.
#navbar li a:hover span {
background-position: 0 -29px;
}
Теперь меню готово и его можно использовать.
Работающий пример смотреть тут. Скачать в в архиве [ZIP; 97.1 Кб]
Оставить комментарий
Комментарии
1) На динамический псевдокласс :active, его надо проставлять в каждой страничке .html меню, чтобы было выделенным;
2) Быть внимательным к сокращенным записям свойств.
На одно меню в моём портфолио больше.
Которую я как начинающий в этом деле не сразу нашел, но НАШЕЛ :)
В данном коде:
#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;
В конце необходимо указать WIDTH:110px; иначе данная менюшка работать не будет.
Спасибо.
Для новичка должно быть понятно ;-)