Вы можете авторизоваться через ВКонтакте, Фейсбук и оставить комментарий


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

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

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

Изображения

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

Покой

В примере название файла menu.gif
CSS-меню картинками

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

В примере название файла menu-hover.gif
Меню картинками (CSS)

HTML

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

1
2
3
4
5
6
7
8
<ul class="menu">
<li><a href="/internet.php" class="m_internet"><i>Представительства</i></a></li>
<li><a href="/news/" class="m_news"><i>Новости</i></a></li>
<li><a href="/images/" class="m_images"><i>Изображения</i></a></li>
<li><a href="/dates/" class="m_dates"><i>По датам</i></a></li>
<li><a href="/about.php" class="m_about"><i>О проекте</i></a></li>
<li><a href="/terms.php" class="m_terms"><i>Правила пользования</i></a></li>
</ul>

CSS

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

1
2
3
4
5
6
7
8
9
10
11
12
13
.menu {width:300px; list-style:none; margin:0; padding:0;}
.menu li {height:24px; margin-bottom:12px;}
.menu a {background-image:url("menu.gif"); background-repeat:no-repeat; text-decoration:none; display:block; height:24px;}
.menu a:hover {background-image:url("menu-hover.gif");}
/* Текст естественно нужно скрыть способом visibility:hidden, а не display:none; */
.menu i {visibility:hidden;}

/* Позиции изображения для элементов */
.m_news {background-position:0 -24px;}
.m_images {background-position:0 -48px;}
.m_dates {background-position:0 -72px;}
.m_about {background-position:0 -96px;}
.m_terms {background-position:0 -120px;}

Результат

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

Меню из картинок (CSS)

Материалы

Шрифт меню: a_RussDecor.ttf.

Опубликовано: 30 сентября 2011  ·  Автор: Артём Фёдоров  ·  6857 просмотров

Категория

ГлавнаяВеб-дизайнHTMLВерсткаCSS меню картинками

Чтобы оставить комментарий нужно авторизоваться на сайте
или войти через ВКонтакте или Фейсбук

Войти через ФейсбукВойти через Твиттер

Комментарии

Верстка, HTML, Веб-дизайн

© 2010-2017 expange.ru
При полном или частичном копировании статей сайта, ссылка на источник обязательна.

Хотите узнать больше информации, пишите на: artem@expange.ru

Полезное онлайн  ·  Новости  ·  Изображения  ·  Статьи по датам

О проекте  ·  Правила пользования  ·  Представительства

Благодарности и пожелания