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

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

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

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

<ul>

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

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

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

</ul>

Мы задаем каждой ссылке класс, для дальнейшего редактирования позиционирования фона. Идем в CSS: li{display:inline} li a{ position:relative; width:150px; height:26px; display:block; float:left; padding-right:1px; background:url(menu. gif);

}

.c1 a{ background-position:0 0;

}

.c2 a{ background-position:-151px 0;

}

.c3 a{ background-position:-301px 0;

}

.c1 a:hover{ background-position:0 -27px;

}

.c2 a:hover{ background-position:-151px -27px;

}

.c3 a:hover{ background-position:-301px -27px;

}

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

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


Карта сайта


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