Простое меню с проявляющимися изображениями
Раздел:
Programming /
Вебмастеру
@
03.04.2008 |
Ключевые слова: простое меню меню на сайте прозрачное меню
Автор: Stepanov
Источник: habrahabr
Допустим у нас стоит задача - сделать меню, состоящее из текстовых заголовков и полупрозрачной картинки, становящейся непрозрачной при наведении курсора на пункт меню.
Делается это очень просто - поместим в таблицу картинку со ссылкой, и текст рядом с ней в ячейку TH:
<table class="tg_menu">
<tr>
<td>
<a href="http://www.rusdoc.ru/go.php?http://www.python.ru/" title="Python"><img src="python.png" alt="Python"/></a>
</td>
<th>
Python
</th>
...
И оживляем всё это при помощи CSS:
.tg_menu td, .tg_menu img{ /* убираем лишние отступы */
padding: 0;
margin: 0;
}
.tg_menu td{ /* придаём нулевую ширину колонке с картинкой */
width: 0;
vertical-align: top;
}
.tg_menu td a{ /* делаем возможным спозиционировать картинку относительно ссылки */
position: relative;
display: block;
}
.tg_menu th{ /* картинки у меня 120 на 120 поэтому делаю текстовый блок таким-же */
width: 120px;
height: 120px;
}
.tg_menu td a img{ /* убираем неизбежную каёмку и позиционируем картинку */
border: 0;
left:0;
top:0;
position: absolute;
opacity: 0.15; /* добавляем прозрачность для нормальных браузеров */
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=15); /* костыль - прозрачность в IE */
}
.tg_menu td a:hover img{ /* проявляем изображение при наведении мыши */
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
opacity: 1;
}
Вот как оно выглядит в действии:
Я ни в коем случае не утверждаю, что это единственный способ сделать меню с прозрачностью, или самый лучший. Однако этот способ имеет ряд положительных сторон:
- Работает одинаково во всех актуальных браузерах
- HTML-код достаточно компактен и прост, всё оформление собрано в CSS и применяется сразу ко всем элементам таблицы
- Не нужно делать двух картинок - обычной и бледной и наносить текст на картинку как в случае с JavaScript-ролловерами, что означает меньший вес, лёгкость автоматизации генерации пункта меню и лёгкость использования в шаблонах CMS
- Никакого JavaScript, поэтому при его выключении всё продолжает работать
- Возможность использования многострочных пунктов навигации(что я и продемонстрировал в примере)
- Простое управление вертикальным выравниванием текста внутри пункта меню относительно решений не использующих таблицы
Этот метод решает строго определённую задачу, поэтому если Вам нужен другой вид или другое поведение навигации, возможно стоит использовать другие подходы.
Я конечно не открыл Америку, но данный способ я придумал сам и надеюсь что кому-нибудь он пригодится.
Это интересно:
Распечатать статью
Вернуться в раздел:
Programming /
Вебмастеру
Реклама:
