Справочник функций

Ваш аккаунт

Войти через: 
Забыли пароль?
Регистрация
Информацию о новых материалах можно получать и без регистрации:

Последние темы форума

Показать новые сообщения »

Почтовая рассылка

Подписчиков: 6449
Последний выпуск: 19.06.2015

Графическое 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). Таким образом, каждому пункту задаётся определённая ширина:

#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>&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 Кб]

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

Комментарий:
можно использовать BB-коды
Максимальная длина комментария - 4000 символов.
 

Комментарии

1.
83K
09 июня 2012 года
Kite_1988
0 / / 09.06.2012
Мне нравитсяМне не нравится
9 июня 2012, 20:43:47
На что следует обратить внимание:
1) На динамический псевдокласс :active, его надо проставлять в каждой страничке .html меню, чтобы было выделенным;
2) Быть внимательным к сокращенным записям свойств.

На одно меню в моём портфолио больше.

2.
61K
30 мая 2010 года
rnicolaev
0 / / 30.05.2010
+2 / -0
Мне нравитсяМне не нравится
30 мая 2010, 15:34:40
ДА статейка хорошая да вот только в ней есть одна ошибка.
Которую я как начинающий в этом деле не сразу нашел, но НАШЕЛ :)

В данном коде:

#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; иначе данная менюшка работать не будет.

Спасибо.
3.
230
01 октября 2004 года
DissDoc
639 / / 01.10.2004
+1 / -0
Мне нравитсяМне не нравится
2 декабря 2008, 23:47:03
Хм. Мне понравилось. Довольно доходчиво изложено.
Для новичка должно быть понятно ;-)
Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог