Форум

Semen · #1 (**permalink**) 04.06.2012, 10:42

Сделал меню. При наведении на элемент, раскрывается список. В opera, при ведении курсора мыши по раскрытому списку (видимо между строками списка), он исчезает

в остальных браузерах нормально все.

Получается, что opera воспринимает переход курсора от одной строки к другой строке списка как onmouseout и закрывает его - теряется контакт с элементом. Что тут не так и куда смотреть чтоб исправить?

<td id="menu06" class="menu_list" onmouseover='showl(6, 1);' onmouseout='showl(6, 2);'"><a><b>&nbsp;&nbsp;<a href="">меню</a>&nbsp;&nbsp;<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";}
}
}

devote · #2 (**permalink**) 04.06.2012, 10:48

не знаю как у вас но у меня ничего не закрывается:

<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>&nbsp;&nbsp;<a href="">меню</a>&nbsp;&nbsp;<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 · #3 (**permalink**) 04.06.2012, 11:18

закрытие срабатывает - неприятная штука!

devote · #4 (**permalink**) 04.06.2012, 11:31

Semen,
переделайте меню с использованием CSS без скриптов, и все будет норм работать.. а то что опера отрабатывает уход с элемента, это вполне нормально, ведь когда вы наводите мышь на другой элемент, событие ухода и должно сработать. И дело тут далеко не в браузере, либо делайте задержку между перед закрытием, и очищайте задержку если срабатывает открытие, либо лучше всего переделать на CSS. Оно и проще и работоспособнее.

Semen · #5 (**permalink**) 04.06.2012, 11:33

ок спасибо за совет и направление буду делать...

Deff · #6 (**permalink**) 04.06.2012, 13:38

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>

Semen · #7 (**permalink**) 04.06.2012, 14:02

ок попробую спасибо
Поступил по совету devote - сделал раскрывающийся список в css - отлично работает и настроить все намного легче!

Semen · #8 (**permalink**) 04.06.2012, 19:13

Подскажите еще пожалуйста.
Вот я сделал раскрывающееся меню на 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">&nbsp;&nbsp;com&nbsp;&nbsp;</td></tr></table></a> 
            <ul> 
               
            </ul> 
     </li> 
	<a class="menu_link1" href=""><li class="menu_list"><table><tr><td class="vz">&nbsp;&nbsp;форум&nbsp;&nbsp;</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">&nbsp;&nbsp;раздел №1&nbsp;&nbsp;</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>

Deff · #9 (**permalink**) 04.06.2012, 19:57

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;

devote · #10 (**permalink**) 04.06.2012, 19:58

Сообщение от Deff

display:inline-block;

ИЕ7 не понимает свойства inline-block

Форум

Справочник

Discord чат

Курсы javascript