Ни для кого не секрет, что обеспечение кроссбраузерности — это одна из основных головных болей любого уэб-разработчика. Столкнулись недавно с проблемой нарисовать горизонтальное всплывающее меню для шаблона Joomla, которое бы одновременно работало в последних FireFox, Opera, а также в IE7 и IE6.
UPD: данный топик не претендует на новизну или принципиальное удобство описанного в нем способа. Просто еще один вариант исправления.
Само меню отрисовывается при помощи небезызвестного скрипта suckerfish.php.
Суть проблемы сводилась к тому, что IE6 не поддерживает свойство :hover в CSS.
Для обеспечения кроссбраузерности было придумано вот что:
1) правим succerfish,php следующим образом: надо отыскать функцию function mosShowListMenu($menutype) и в ней заменить строку
сохраняем, кладем в корень шаблона. Теперь каждый элемент <li> будет при наведении на него мышки менять имя класса на «over», что мы дальше поиспользуем в CSS для IE.
Далее для IE6 пишем css в котором учитываем, что при наведении мышки на элемент надо оперировать классом .over примерно так
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;
}