Доброго времени суток.
Никак не могу разобраться со странным глюком. Я сделал меню, при наведении на него указателя мыши выпадает подменю выбранного пункта через JS и CSS. Мудился достаточно долго, чтобы это смертельно надоело  и наконец, вышло...
Но как оказалось работает корректно во всех браузерах, кроме IE (как всегда  ) По непонятной причине пункты выпадающего меню (элементы LI) становятся неактивными (т.е. отображаются, но своих функций не выполняют)... ВСЕ КРОМЕ ПЕРВОГО! Как объяснить это я действительно не знаю...
Посмотреть на это можно здесь http://vmk4[dot]kzn[dot]ru/account_sys
Меню в HTML выглядит так:
CODE ( text):
скопировать код в буфер обмена
<div class="menu"> <ul style="padding-left: 0.1em;" onmouseover="showItem('item1');highlightItem('hItem1');" onmouseout="hideItem('item1');lowlightItem('hItem1');"> <li> <a href="#" id="hItem1">File</a> <ul id="item1" onmouseout="hideItem('item1');lowlightItem('hItem1');"> <li><a href="#">Option1</a></li> <li><a href="#">Option2s</a></li> <li><a href="#">Option3</a></li> <li><a href="#">Option4</a></li> </ul> </li> </ul> <ul onmouseover="showItem('item2');highlightItem('hItem2');" onmouseout="hideItem('item2');lowlightItem('hItem2');"> <li> <a href="#" id="hItem2">Fonts2</a> <ul id="item2" onmouseout="hideItem('item2');lowlightItem('hItem2');"> <li><a href="#">Option1</a></li> <li><a href="#">Option2</a></li> <li><a href="#">Option3</a></li> <li><a href="#">Option4</a></li> </ul> </li> </ul> <ul onmouseover="showItem('item3');highlightItem('hItem3');" onmouseout="hideItem('item3');lowlightItem('hItem3');"> <li> <a href="#" id="hItem3">Fonts3</a> <ul id="item3" onmouseout="hideItem('item3');lowlightItem('hItem3');"> <li><a href="#">Option1</a></li> <li><a href="#">Option2</a></li> <li><a href="#">Option3</a></li> <li><a href="#">Option4</a></li> </ul> </li> </ul> </div>
JS функции так:
CODE ( text):
скопировать код в буфер обмена
function showItem(id) {document.getElementById(id).style.display='block';} function hideItem(id) {document.getElementById(id).style.display='none';} function highlightItem(id) { document.getElementById(id).style.backgroundColor='#669933'; document.getElementById(id).style.color='#FFF'; document.getElementById(id).style.borderColor='#558822'; } function lowlightItem(id) { document.getElementById(id).style.backgroundColor='#EEE'; document.getElementById(id).style.color='#444'; document.getElementById(id).style.borderColor='#DDD'; }
А стили CSS так:
/* Class selectors */
CODE ( text):
скопировать код в буфер обмена
.menu{ width: 63.8em; height: 2.1em; margin: 0 0.5em 0.3em 0.5em; background-color: #336699; border: 0.1em solid <?php echo $Config['header_bord_color']; ?>; line-height: 1.4em; white-space: nowrap; } .menu ul { display: block; list-style-type: none; z-index: 90; text-align: center; } .menu ul li{ width: 13em; white-space: nowrap; float: left; position: relative; } .menu ul li a{ font-size: 0.95em; font-weight: normal; text-decoration: none; text-transform: uppercase; background-color: <?php echo $Config['menu_bg_color']; ?>; color: <?php echo $Config['menu_font_color']; ?>; border: 0.1em solid <?php echo $Config['menu_bord_color']; ?>; padding: 0.3em 1.6em; display: block; } .menu ul li a:hover{ text-decoration: none; background-color: <?php echo $Config['smenu_bg_color']; ?>; color: <?php echo $Config['smenu_font_color']; ?>; border: 0.1em solid <?php echo $Config['smenu_bord_color']; ?>; } .menu ul li ul{ position: absolute; left: 0; top: auto; display: none; z-index: 200; width: 13em; } .menu ul li ul li{ position: relative; } .menu ul li ul li a{ padding: 0.3em 1.6em; font-size: 0.8em; }
P.S. Это меню я сам делал по примеру чужого сайта с работающим меню. Правда, там табличная верстка, а я в этот раз решил попробовать через DIV-ы. Там (www[dot]zamzamplus[dot]ru ) меню работает, но этот косяк частично присутствует: в пунктах начиная со второго ссылкой является не весь пункт, а только текст в нем.(Отредактировано автором: 30 Октября, 2008 - 11:34:10)
|
Главная
Помощь
Поиск
Пользователи
Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS (Модераторы: ALEN, armancho7777777)
Без описания
