Нестандартное меню с помощью позиционирования фона ссылки

Нестандартное меню с помощью позиционирования фона ссылки

Всем доброго времени суток! Решил что-то написать на своем блоге Вот решил описать один из методов верстки меню в css. Этот метод не является стандартным хотя и основывается на стандартных методах верстки меню с помощью списка. Здесь же немного интереснее чем просто отдельный фон для каждой ссылки. Сегодня мы с Вам сверстаем меню, которое также будет реагировать при наведении курсора, но при этом будем использовать всего одну картинку для всех ссылок, как и для статики, так и для события onmouseover.

Эта картинка, размером 450Px на 55px. Но нам не обязательно весь этот размер. Мы сделаем ссылку блочным элементом и зададим ей фиксированные размеры. Вот как раз размер пункта “о компании” и подойдет. Создаем каркас html:

1<ul>

2<li><a href=""></a></li>

3<li><a href=""></a></li>

4<li><a href=""></a></li>

5</ul>

Мы задаем каждой ссылке класс, для дальнейшего редактирования позиционирования фона. Идем в CSS:

1 li{display:inline}

2 li a{

3 position:relative;

4 width:150px;

5 height:26px;

6 display:block;

7 float:left;

8 padding-right:1px;

9 background:url(menu. gif);

10}

11.c1 a{

12 background-position:0 0;

13 }

14 .c2 a{

15 background-position:-151px 0;

16 }

17 .c3 a{

18 background-position:-301px 0;

19}

20 .c1 a:hover{

21 background-position:0 -27px;

22 }

23 .c2 a:hover{

24 background-position:-151px -27px;

25 }

26 .c3 a:hover{

27 background-position:-301px -27px;

28 }

Выставляем позиционирование фона для каждой ссылки и вуаля! Готово. К слову, этот метод широко используется во многих известных сервисах, например youtube.

Что меня порадовало особенно. Вы знаете, что никакой фикс для PNG не даст нормального результата, если фон будет в формате png и при это нежно будет совершить наведение курсором на область ссылки. Что покажет данный фикс в ИЕ? Правильно, серую окантовку вокруг активной ссылки. С помощью этого метода, мы не подгружаем новую картинку, а используем уже


Карта сайта


Информационный сайт Webavtocat.ru