Меню из изображения html

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

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

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

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

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

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

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

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

По кусочкам

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

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

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

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

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

• 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

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

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

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

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

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

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

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

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

Вставка   используется в каждом пункте перед закрытием ссылки. Как видно, тэг 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

Пояснения относительно 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):

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

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

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

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

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

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

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

Источник

CSS меню картинками

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

Для тех кто любит смотреть исходный код страницы, заходим в онлайн-пример.

Изображения

Для меню, в котором будут ссылки из текста достаточно двух картинок. Картинка по-умолчанию и картинка при наведении курсора мыши.

Покой

В примере название файла menu.gif

При наведении

В примере название файла menu-hover.gif

HTML

Создаем меню в виде списка.

CSS

Пропишем стили для списка .menu .

Результат

В результате получим симпатичное меню, красивым шрифтом, отлично индексируемое поисковыми системами.

Материалы

Категории

Читайте также

• Как подключить CSS только для IE 6
• Резиновая верстка div 3 колонки (HTML)
• div с прокруткой
• div с закругленными углами
• Ссылка пунктиром
• Двойной отступ в IE6
• Размер шрифта (CSS)
• CSS хак (IE7)
• CSS хак (IE8)
• div height 100 (CSS)
• Растянуть таблицу на всю ширину без отступов (CSS)
• Запретить выделение текста (CSS)

Комментарии

Вход на сайт

Введите данные указанные при регистрации:

Социальные сети

Вы можете быстро войти через социальные сети:

Источник

Меню с изображениями на jQuery

В данном уроке мы сделаем простое и эффектное меню на jQuery с использованием изображений. Пункты меню будут оформлены в виде слайдов, которые будут отодвигаться при наведении курсора мыши.

Первый вариант

Разметка HTML

Структура меню будет построена на основании неупорядоченного списка:

CSS

.jimgMenu < position: relative; width: 670px; height: 200px; overflow: hidden; margin: 25px 0px 0px; >.jimgMenu ul < list-style: none; margin: 0px; display: block; height: 200px; width: 1340px; >.jimgMenu ul li < float: left; >.jimgMenu ul li a < text-indent: -1000px; background:#FFFFFF none repeat scroll 0%; border-right: 2px solid #fff; cursor:pointer; display:block; overflow:hidden; width:78px; height: 200px; >.jimgMenu ul li.landscapes a < background: url(images/landscapes.jpg) repeat scroll 0%; >.jimgMenu ul li.people a < background: url(images/people.jpg) repeat scroll 0%; >.jimgMenu ul li.nature a < background: url(images/nature.jpg) repeat scroll 0%; >.jimgMenu ul li.abstract a < background: url(images/abstract.jpg) repeat scroll 0%; >.jimgMenu ul li.urban a < background: url(images/urban.jpg) repeat scroll 0%; min-width:310px; >

JavaScript

В раздел head страницы нужно включить jQuery и все плагины, необходимые для работы меню:

А затем добавить код для активации нашего меню:

Вариант два

Для второго варианта используем плагин jQuery Kwick, который добавляет функционала к нашему меню.

HTML

Разметка остается такой же, за исключением использования атрибута id вместо класса для пунктов меню:

CSS

Код CSS немного модифицирован для использования плагина Kwick.

.jimgMenu_2 < position:relative; margin: 0px 0px 0px 50px; padding: 0px; width:475px; height:200px; overflow: hidden; >.jimgMenu_2 ul < list-style: none; margin: 0px; padding: 0px; display: block; height: 200px; position: relative; >.jimgMenu_2 ul li < width: 95px; float: left; display: block; overflow: hidden; >.jimgMenu_2 ul li a < text-indent: -1000px; background:#fff repeat scroll 0%; border-right: 2px solid #fff; cursor:pointer; display:block; overflow: hidden; height: 200px; >.jimgMenu_2 ul li#landscapes a < background: url(images/landscapes.jpg) repeat scroll 0%; >.jimgMenu_2 ul li#people a < background: url(images/people.jpg) repeat scroll 0%; >.jimgMenu_2 ul li#nature a < background: url(images/nature.jpg) repeat scroll 0%; >.jimgMenu_2 ul li#abstract a < background: url(images/abstract.jpg) repeat scroll 0%; >.jimgMenu_2 ul li#urban a < background: url(images/urban.jpg) repeat scroll 0%; border-right-style: none; >

JavaScript

В раздел head страницы нужно вставить библиотеку jQuery и все плагины, которые используются для меню:

Остается только активировать плагин для работы нашего меню:

Источник

MagentaWAVE

Примеры и готовые решения для оформления блога и сайта. Разработка и дизайн шаблонов Blogger.

Пример простого меню из картинок с CSS анимацией

Продолжая изучать свойства анимации CSS3, решил применить полученные знания на практике — сделать какое-нибудь простенькое анимированное меню. В итоге получилось довольно симпатичное и очень простое меню с использованием иконок. Смысл его в том, что при наведении курсора картинка и тест плавно увеличиваются, как бы приближаясь к посетителю, анимация выполнена с помощью CSS3.
Сразу смотрим:
DEMO
Для реализации данного меню у себя на сайте или в блоге не нужно ничего дополнительно подключать, достаточно лишь добавить не большой HTML и короткий CSS коды. В Blogger-блоге можно использовать для этих целей стандартный гаджет HTML/JavaScript.
Итак, по кодам. HTML для меню выглядит так:

.macmenu <
height: 128px; /*высота общего блока*/
>
.button <
margin: 0 auto; /*выравнивание блока по центру*/
width: 720px; /*ширина всего блока с меню*/
>
.button a img,
.button a <
display: block;
float: left;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
height: 70px;
width: 70px;
>
.button a <
margin: 5px 15px;
text-align: center;
color: #fff;
font: normal normal 10px Verdana;
text-decoration: none;
word-wrap: normal; /*запрещает автоматически разрывать слова на перенос*/
>
.macmenu a:hover img <
margin-left: -30%; /*смещает картинку левее, выравнивая ее по центру*/
height: 128px;
width: 128px;
>
.button a:hover <
font: normal bold 14px Verdana;
>

.macmenu <
height: 720px; /*высота всего блока*/
>
.button <
text-align: center;
margin: 0 10px; /*внешние отступы*/
>
.button a img,
.button a <
display: block;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
height: 70px;
width: 70px;
>
.button a <
margin: 15px 5px;
text-align: center;
color: #000;
font: normal normal 10px Verdana;
text-decoration: none;
word-wrap: normal;
>
.macmenu a:hover img <
margin-left: -30%;
height: 128px;
width: 128px;
>
.button a:hover <
font: normal bold 14px Verdana;
height: 128px; /*высота ссылки при наведении курсора*/
>

Источник