Статьи

Двухуровневая горизонтальная навигация в CSS с изображениями

Опубликовано 02/21/08 // Тэги: // Комментарии: 0

Перевод статьи Вирл Питерс (Veerle Pieters)

Оригинал доступен на сайте Veerle.duoh.com

Используя CSS, создать двухуровневое меню не так и сложно. Так, для текстового его варианта базовых знаний вполне достаточно. Но что, если меню должно быть (и будет) дополнено графикой?

Сверстанный код не содержит изображений. Для каждой кнопки мы используем разные ‘id’ (идентификаторы). Вот эти самые ‘id’ и будут стилизованы через CSS. Текст будет замещен фоновыми изображениями. Вот отрывок кода:

Вся “фишка” в использовании параметра “text-indent: -9999px” (это выносит текст за пределы окна браузера :) и одного, общего, изображения (для всей навигации) в качестве фона.

Навигация первого уровня содержит два изображения (navigation.gif и navigation_over.gif). 

ul#navigation li a {
border: 0;
display: block;
height: 25px;
background: url(navigation.gif) no-repeat;
}

ul#navigation li a:hover {
border: 0;
display: block;
background-image: url(navigation_over.gif);
}

Благодаря смещению фонового изображения по горизонтали и вертикали, а также через параметр ‘display:block’, меняется каждая кнопка навигации. Пример кнопки: 

li#support a {
width: 67px;
}

li#support a:link, 
li#support a:visited, 
li#support a:hover {	
background-position: -264px 0px;
}

пример меню
стиль меню

Что хотелось бы реализовать: при наведении курсора на подменю изображение первого уровня должно появиться на месте ролловера. Я знаю, что это возможно, но не знаю, каким образом. У кого есть идеи, не поленитесь поделиться с нами. Спасибо.

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