проблемы с меню в opera
Сделал меню. При наведении на элемент, раскрывается список. В opera, при ведении курсора мыши по раскрытому списку (видимо между строками списка), он исчезает :( в остальных браузерах нормально все.
Получается, что opera воспринимает переход курсора от одной строки к другой строке списка как onmouseout и закрывает его - теряется контакт с элементом. Что тут не так и куда смотреть чтоб исправить? <td id="menu06" class="menu_list" onmouseover='showl(6, 1);' onmouseout='showl(6, 2);'"><a><b> <a href="">меню</a> <br></b></a> <div class="menu_block" onmouseover='showl(6, 1);' onmouseout='showl(6, 2);' style="display:none;" id="podmenu_06"> <table class="menu_li"> <tr> <td class="menu_li"><a href="">список1</a></td> </tr> <tr> <td class="menu_li"><a href="">список2</a></td> </tr> <tr> <td class="menu_li"><a href="">список3</a></td> </tr> </table> </div> </td>
function showl() // раскрытие и закрытие списка
{
if (window.innerWidth)
{
var w=window.innerWidth; var h=window.innerHeight;} else {if (document.all){var w=document.all('q').clientWidth; w=document.documentElement.clientWidth; var h=document.all('q').clientHeight; h=document.documentElement.clientHeight;}
}
if(arguments[1]==1) //------------
{
if(arguments[0]==6)
{
document.getElementById('podmenu_06').style.display = "block";
document.getElementById('podmenu_06).style.left = elementPos('menu06').left-elementPos('menu01').left + "px";
}
}
else //------------
{
if(arguments[0]==1) {document.getElementById('podmenu_01').style.display="none";}
}
}
|
не знаю как у вас но у меня ничего не закрывается:
<style type="text/css">
.menu_item div {
position: absolute;
display: none;
}
.menu_item:hover div {
display: block;
}
</style>
<table border="1">
<tr>
<td class="menu_item"><a><b> <a href="">меню</a> <br></b></a>
<div class="menu_block">
<table class="menu_li">
<tr>
<td class="menu_li"><a href="">список1</a></td>
</tr>
<tr>
<td class="menu_li"><a href="">список2</a></td>
</tr>
<tr>
<td class="menu_li"><a href="">список3</a></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
|
закрытие срабатывает - неприятная штука!
|
Semen,
переделайте меню с использованием CSS без скриптов, и все будет норм работать.. а то что опера отрабатывает уход с элемента, это вполне нормально, ведь когда вы наводите мышь на другой элемент, событие ухода и должно сработать. И дело тут далеко не в браузере, либо делайте задержку между перед закрытием, и очищайте задержку если срабатывает открытие, либо лучше всего переделать на CSS. Оно и проще и работоспособнее. |
ок спасибо за совет и направление буду делать...
|
Semen,
Добавьте в css красным <style type="text/css"> .menu_item div { position: absolute; display: none; } .menu_item:hover div { display: block; } table.menu_li{ padding-top:20px; margin-top:-20px; } </style> |
ок попробую спасибо
Поступил по совету devote - сделал раскрывающийся список в css - отлично работает и настроить все намного легче! :thanks: |
Подскажите еще пожалуйста.
Вот я сделал раскрывающееся меню на css. Работает так как нужно во всех браузерах кроме ИЕ. В ИЕ список подменю просто улетает вправо. Как эту проблему можно исправить?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<style>
li.menu_list {
background-image: url("/icon/activ_fon_url.png");
background-color: none;
font: 9pt Verdana;
line-height: 1.0;
font-weight: bold;
font-style: normal;
color: #7f7f7f;
border: solid 0px;
/*background-color:#bedfce;*/
border: solid 1px #9ac8b0;
border-top-color:#f1efea;
border-left-color:#f1efea;
box-shadow: 1px 1px 4px #6fa98b;
}
/* style for style for menu items - hover */
li.menu_list:hover {
background-image: url("/icon/afon_url.png");
background-color: none;
vertical-align: middle;
font: 9pt Verdana;
line-height: 1.0;
font-weight: bold;
font-style: normal;
color: red;
border: solid 0px;
/*background-color:#d6e8f0;*/
border: solid 1px #9ac8b0;
border-top-color:#f1efea;
border-left-color:#f1efea;
box-shadow: 1px 1px 4px #6fa98b;
}
li.li_m {
opacity: 0.7;
font:8pt Verdana;
font-weight: ;
line-height: 1.0;
color: #827053;
text-align: center;
padding: 0;
width: auto;
height: auto;
background-color:#bedfce;
border: solid 1px #9ac8b0;
border-top-color:#f1efea;
border-left-color:#f1efea;
box-shadow: 1px 1px 8px #6fa98b;
}
li.li_m:hover {
opacity: 0.8;
background-image: url("/icon/afon_url.png");
font:8pt Verdana;
font-weight: ;
line-height: 1.0;
color: #e46161;
text-align: center;
padding: 0;
width: auto;
height: auto;
background-color:#d6e8f0;
border: solid 1px #9ac8b0;
border-top-color:#f1efea;
border-left-color:#f1efea;
box-shadow: 2px 2px 8px #6fa98b;
}
td.vz {
width: auto;
height: 24px;
margin: 0px;
}
td.va {
text-align: left;
width: 140px;
height: 24px;
margin: 0px;
}
ul#menu_list ul {
margin: 0px 0px 0px 0px;
padding: 4px 0px 0px 0px;
}
ul#menu_list li {
margin: 0px;
padding: 0px;
list-style-type: none;
width: auto;
float: left;
position: relative;
}
ul#menu_list li ul {
float: left;
position: absolute;
width: 12em;
}
ul#menu_list li ul {
display: none;
}
ul#menu_list li:hover ul {
display: block;
}
</style>
</head>
<body>
<ul id="menu_list" >
<a class="menu_link1" href=""><li class="menu_list"><table><tr><td class="vz"> com </td></tr></table></a>
<ul>
</ul>
</li>
<a class="menu_link1" href=""><li class="menu_list"><table><tr><td class="vz"> форум </td></tr></table></a>
<ul>
<a href=""><li class="li_m"><table><tr><td class="va">регистрация</td></tr></table></li></a>
<a href=""><li class="li_m"><table><tr><td class="va">решение</td></tr></table></li></a>
<a href=""><li class="li_m"><table><tr><td class="va">жизнь</td></tr></table></li></a>
</ul>
</li>
<a class="menu_link1" href="#"><li class="menu_list"><table><tr><td class="vz"> раздел №1 </td></tr></table></a>
<ul>
<a href="1"><li class="li_m"><table><tr><td class="va">подраздел №1</td></tr></table></li></a>
<a href="2"><li class="li_m"><table><tr><td class="va">подраздел №1</td></tr></table></li></a>
<a href="3"><li class="li_m"><table><tr><td class="va">подраздел №1</td></tr></table></li></a>
<a href="4"><li class="li_m"><table><tr><td class="va">подраздел №1</td></tr></table></li></a>
</ul>
</li>
</ul>
</body>
</html>
|
Semen,
Пробуйте добавить красным <style> a.menu_link1 { /*display:inline-block;*/ } li.menu_list { display:inline-block; background-image: url("/icon/activ_fon_url.png"); background-color: none; font: 9pt Verdana; |
Цитата:
|
| Часовой пояс GMT +3, время: 17:06. |