меню CSS Как создать свой сайт > Вебмастеру > Создание своего сайта > Графическое меню на CSS

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

— Мало водки. Ты самый юный. Иди в гастроном.
— А далеко? — спрашиваю.
— Туда — два квартала и обратно — примерно столько же.
«Когда-то мы жили в горах», Сергей Довлатов.
3 августа 2007

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

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

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

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

меню на CSS

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

  • 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;
}

    Результат:

как сделать меню на CSS

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

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

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

Накладывание «картинок» на текст

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

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

    Хочу заметить, что все пункты меню имеют одинаковую высоту, но разную ширину. Например, рассматриваемый пункт имеет размер 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 пикселей. Другими словами, в области видимости окажется нижняя половина фонового рисунка.

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

меню для сайта на CSS

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

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

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

создаём меню для сайта на CSS

    Здесь при наведении курсора на пункт фоновое изображение сдвигается вверх на 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: graphic_css_menu.zip.

Автор: Никита Мосияш.

Комментарии:


⇓ 

Поделись ссылкой на Seoded.ru с друзьями, знакомыми и собеседниками в соцсетях и на форумах! А сам сайт добавь в закладки! Так победим.

Поделиться ссылкой на эту страницу в:

Полезные ссылки:

Ссылки лучше покупать здесь... Ссылками можно и на сайте заработать

Ещё материалы по этой теме:

Позиционирование в CSS Наследование классов в Internet Explorer Вертикальное выравнивание текста в CSS Формирование массива PHP-генератор паролей
основан в 2008 г. © Все права на материалы сайта Seoded.ru принадлежат Алексею Вострову.
Копирование (полное или частичное) любых материалов сайта возможно только с разрешения автора и при указании ссылки на источник.
Ослушавшихся находит и забирает Бабайка!