Простое меню с проявляющимися изображениями - Компьютерная документация по Windows. Оптимизация Windows.
 Компьютерная документация по Windows. Оптимизация Windows.  Компьютерная документация по Windows. Оптимизация Windows. Поиск
  Здравствуйте  [ Новый пользователь ] Домой  .  Статьи по темам  .  Компьютерная документация  .  Личный кабинет  .  Toп 10  .  Карта сайта  

  Навигация

 Главная   Главная
 Главная   Магазин софта
 Темы новостей   Темы новостей
 Топ 10   Топ 10
 Архив новостей   Архив новостей
 Карта сайта   Карта сайта
 Конструктор   Конструктор
 Обзоры   Обзоры
 Интересное   Интересное
 Рассылка новостей   Рассылка новостей
    Полезные ресурсы
 Пользователи   Пользователи
 Поиск   Поиск
 Написать нам   Написать нам
 Тест скорости   Тест скорости


  Наши темы
Windows 8
Windows 7
Windows Vista
Windows XP
Настройка Windows
Реестр Windows
Восстановление системы
MS-DOS
BIOS
Интернет
Microsoft Office
Сетевые настройки
Обработка видео
Вебмастеру
Оптимизация Windows
Обзор софта
Технологии, обзоры
Обзоры компьютеров и комплектующих
Рецензии
Полезные советы
Продвижение сайтов

Новые обзоры

Как заработать на ремонте компьютеров

Переработка отходов электроники

Типовые неисправности I:Phone, Pad, Pod и Macbook

Место для вашей электронной души

Ремонт компьютеров в Москве


Простое меню с проявляющимися изображениями

Размещено 03/04/2008

Вебмастеру Допустим у нас стоит задача - сделать меню, состоящее из текстовых заголовков и полупрозрачной картинки, становящейся непрозрачной при наведении курсора на пункт меню.
Делается это очень просто - поместим в таблицу картинку со ссылкой, и текст рядом с ней в ячейку 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, поэтому при его выключении всё продолжает работать
  • Возможность использования многострочных пунктов навигации(что я и продемонстрировал в примере)
  • Простое управление вертикальным выравниванием текста внутри пункта меню относительно решений не использующих таблицы


Этот метод решает строго определённую задачу, поэтому если Вам нужен другой вид или другое поведение навигации, возможно стоит использовать другие подходы.

Я конечно не открыл Америку, но данный способ я придумал сам и надеюсь что кому-нибудь он пригодится.

Автор: Stepanov
Источник: habrahabr


 



Компьютерная документация по Windows Copyright © 2008-2019