Оригинал сообщения
Комментарии: [показать]

Всем нам нравится эффект, когда при наведении на кнопку-ссылку в меню, фон кнопки меняется, подсвечивается и т.п. Тем самым позволяя нам не запутаться в том, какую ссылку мы выбираем - это то, что касается пользователей. Однако не все вебмастера решаются реализовать этот эффект, т.к. возникает сразу несколько вопросов:

1. Это вообще можно реализовать без JS ?


2. Как избежать эффект пропадающего фона при наведении на кнопку?


3. Сколько картинок мне нужно для 1 кнопки?


4. Можно ли сделать кнопку не фиксированной ширины?


5. Можно ли обойтись без CSS-фильтров?

Думаю каждый из вас сталкивался с этими вопросами. Давайте раз и навсегда разберемся с ними.



Начнем по-порядку, т.к. 1-й вопрос особенно актуален для новичков. Ответ простой: да, можно. К концу статьи вы поймете, что даже навыков JS вам не нужно знать, чтобы реализовать нашу задачу. Перейдем ко 2-му вопросу.

Как избежать эффект пропадающего фона при наведении на кнопку? Для этого можно воспользоваться 2 методами:

1. Использовать свойство background-position для управления положением фона кнопки


2. Определять перекрывающую картинку как фон у родительского элемента кнопки (например, у <li>)

Остановимся на каждом из методов по подробнее. Первый способ предполагает, что мы разместим на 1 картинке сразу несколько изображений кнопок, например так:

[показать]

Таким образом код для кнопки будет выглядеть следующим образом:

a {

background:url(menu_item.gif) top left no-repeat;

/* установили позицию фона обычной кнопки */

height:35px;

display:block;

font-size:12px;

color:#eee;

line-height:35px;

}

a:hover {

background:url(menu_item_hover.gif) bottom left no-repeat;

/* установили позицию фона кнопки при наведении курсором */

color:#fff;

}

Просто, не правда ли? Но радоваться рано :) Дело в том, что несмотря на то, что казалось бы загружается вся картинка, не зависимо от того какую позицую фона мы установим - для IE6 проблема исчезновения фона при наведении курсором не решиться. Поэтому подробно останавливаться на примере я не буду и сразу перейду ко второму способу. Именно он даст нам необходимый результат.

Второй метод предполагает, что определять фон картинки, которая должны быть при наведении, нужно у родительского элемента кнопки. Рассмотрим это сразу на примере.

Напишем небольшой код для нашего меню:

<ul>

<li><a href="#">Ссылка 1</a></li>

<li><a href="#">Ссылка 2</a></li>

</ul>

Стили для элементов будут выглядеть так:

ul {

list-style:none;

height:35px;

padding:0px;

margin:0px;

}

ul li { /* это родительский элемент нашей кнопки */

float:left;

background:url(menu_item_hover.gif) no-repeat top left;

/* устанавливаем фон - картинку при наведении курсором на кнопку*/

}

a {

background:url(menu_item.gif) top left no-repeat;

/* установили фон обычной кнопки */

height:35px;

width:150px;

display:block;

font-size:12px;

color:#eee;

line-height:35px;

}

a:hover {

background:none;

/* убираем фон, тем самым нам становится виден фон

родительского элемента, у которого уже установлен

фон перекрывающей картинки и она !_уже загружена_! */

color:#fff;

}

Ну как вам идея? :) Чувствую, вы уже в предвкушении того, чтобы узнать ответы на остальные вопросы.

Вопрос о количестве картинок решился сам собой - нам необходима только 1 картинка для каждого из состояний кнопки. Теперь не нужно нарезать отдельно фон кнопки и уголки по бокам. Но сразу отмечу, что код, приведенный выше будет работать лишь кнопок фиксированной ширины. Чтобы ответить положительно на вопрос о “резиновости” кнопок, нам потребуется добавить в разметку еще несколько элементов:

<ul>

<li><em><a href="#"><b>Ссылка 1</b></a><em></li>

<li class="current"><em>Ссылка 2<em></li> <!--Активная кнопка-->

<li><em><a href="#"><b>Ссылка 3</b></a><em></li>

</ul>

Элемент <em> поможет нам избавиться от фиксированной ширины у <a>. Определим для <em> тот же фон, что и для <li>, но позиционируем его относительной правой части картинки, таким образом сохранив внешний вид кнопки таким, каким он должен быть. Также, нам необходимо будет задать левый отступ у <li>, чтобы дочерний элемент <em>, не перекрывал левый край кнопки и “подвинуть” a на такое же, но отрицательное значение, т.к. <a> должен полностью перекрывать фон родительского элемента.

Сссылка на полный код в конце статьи. Ниже лишь опишу основные моменты:

ul li {

float:left;

background:url(menu_item_hover.gif) no-repeat left top;

padding-left:8px;

}

ul li em {

background:url(menu_item_hover.gif) no-repeat right top;

...

}

ul li a {

display:block;

padding:0 0px 0 8px;

background:url(menu_item.gif) no-repeat left top;

position:relative;

margin-left:-8px;

...

}

ul li a b {

display:block;

display:inherit; /* Litle filter for IE */

padding:0 16px 0 8px;

background:url(menu_item.gif) no-repeat right top;

...

}

ul li.current {

background:url(menu_item_active.gif);

padding-left:16px;

}

ul li.current em {

background:url(button3.gif) no-repeat right top;

padding-right:16px;

}

ul li a:hover, .menu2 li a:hover b {

background:none;

}

А вот как это выглядит.



В примере 1 фон неативной кнопки совпадает с фоном меню, а в примере 2 у неактивных кнопок свое изображение, поэтому коды примеров несколько отличаются и по разметке - во втором примере, кроме <em> я добавила элемент <b> и у него обозначила фон кнопки с позиционированием по правому краю.

Теперь у нас есть полноценное “rollover” меню.

Что касается фильтров (хаков), как видите, таковых нет. Кроссбраузерность была проверена на IE6/7, Opera 9.25, FireFox 2.0.0.11. Одна лишь неувязочка - возможно будут проблемы в браузерах на Mac OS. Если такие найдуться, просьба оставить комментарий.

Код rollover меню можно скачать здесь.

[показать]LIci WP - WordPress crossposting plugin