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

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

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

Изображения

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

Покой

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

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

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

HTML

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

<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.

.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.

Категории

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

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

Комментарии