Как стать автором
Обновить

Очередной хак для IE6

Время на прочтение2 мин
Количество просмотров454
Ни для кого не секрет, что обеспечение кроссбраузерности — это одна из основных головных болей любого уэб-разработчика. Столкнулись недавно с проблемой нарисовать горизонтальное всплывающее меню для шаблона Joomla, которое бы одновременно работало в последних FireFox, Opera, а также в IE7 и IE6.

UPD: данный топик не претендует на новизну или принципиальное удобство описанного в нем способа. Просто еще один вариант исправления.

Само меню отрисовывается при помощи небезызвестного скрипта suckerfish.php.
Суть проблемы сводилась к тому, что IE6 не поддерживает свойство :hover в CSS.
Для обеспечения кроссбраузерности было придумано вот что:
1) правим succerfish,php следующим образом: надо отыскать функцию function mosShowListMenu($menutype) и в ней заменить строку
array( "<ul>", "<li >" , "</li>", "</ul>" ), на
array( "<ul>", "<li onmouseover=\"this.className='over';\" onmouseout=\"this.className=this.className.replace('over', '');\">" , "</li>", "</ul>" ),
сохраняем, кладем в корень шаблона. Теперь каждый элемент <li> будет при наведении на него мышки менять имя класса на «over», что мы дальше поиспользуем в CSS для IE.
Далее для IE6 пишем css в котором учитываем, что при наведении мышки на элемент надо оперировать классом .over примерно так

.........

ul.nav li.over {
background-image:url(../images/navigation_back.jpg);
position:relative;
}
.........

ul.nav ul li.over {
border:1px solid white;
}
.........

ul.nav li.over ul {
visibility: visible;
}

ul.nav li.over ul li ul {
visibility: hidden;
}

ul.nav li ul li.over ul {
visibility: visible;
}

ul.nav li ul li ul li.over {
border:1px solid white;
}
Теги:
Хабы:
Всего голосов 20: ↑6 и ↓14-8
Комментарии5

Публикации