Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   проблемы с меню в opera (https://javascript.ru/forum/dom-window/28822-problemy-s-menyu-v-opera.html)

Semen 04.06.2012 10:42
проблемы с меню в opera
 
Сделал меню. При наведении на элемент, раскрывается список. В 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 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 04.06.2012 11:18
закрытие срабатывает - неприятная штука!

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

Semen 04.06.2012 11:33
ок спасибо за совет и направление буду делать...

Deff 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 04.06.2012 14:02
ок попробую спасибо
Поступил по совету devote - сделал раскрывающийся список в css - отлично работает и настроить все намного легче! :thanks:

Semen 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 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 04.06.2012 19:58
Цитата:
Сообщение от Deff
display:inline-block;
ИЕ7 не понимает свойства inline-block

Deff 04.06.2012 20:02
devote,
Не понимает ток для div(и то до ИE8) метод борьбы - div обёртываем в span с этим указанием, - для остальных элементов - норма(на менюшках прост долго сидел => http://htmlbook.ru/css/display

Semen 04.06.2012 20:10
неполучается с display:inline-block;

Deff 04.06.2012 20:19
Цитата:
Сообщение от Semen
неполучается с display:inline-block;
ИE7
тестовая
http://hostjs-mybb2011.narod.ru/Semen.htm

Semen 04.06.2012 20:34
неработает на моем IE
но в любом случае спасибо - буду разбираться, может что получится
http://uploads.ru/?v=t8MLG.jpg

Deff 04.06.2012 20:38
Цитата:
Сообщение от Semen (Сообщение 178918)
неработает на моем IE
но в любом случае спасибо - буду разбираться, может что получится
Я кажецо знаю что - поправлю

Deff 04.06.2012 20:48
А сейчас ?
http://hostjs-mybb2011.narod.ru/Semen.htm

Semen 04.06.2012 20:52
нет - так же

devote 04.06.2012 20:54 
<!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>

#menu_list {
    margin: 4px 0 0 0;
    padding: 0;
}

#menu_list li {
    position: relative;
    list-style-type: none;
    float: left;
    background-image: url("/icon/activ_fon_url.png");
    background-color: none;
    border: solid 0px;
        /*background-color:#bedfce;*/
    border: solid 1px #9ac8b0;
    border-top-color:#f1efea;
    border-left-color:#f1efea;
    box-shadow: 1px 1px 4px #6fa98b;
}

#menu_list li:hover {
    background-image: url("/icon/afon_url.png");
    background-color: none;
    border: solid 0px;
        /*background-color:#d6e8f0;*/
    border: solid 1px #9ac8b0;
    border-top-color:#f1efea;
    border-left-color:#f1efea;
    box-shadow: 1px 1px 4px #6fa98b;
}

#menu_list li a {
    font: 9pt Verdana;
    line-height: 1.0;
    font-weight: bold;
    font-style: normal;
    color: #7f7f7f;
    display: block;
    height: 19px;
    text-decoration: none;
    padding: 5px 4px 0 4px;
}

#menu_list li:hover a {
    color: red; 
}

#menu_list li ul {
    display: none;
    position: absolute;
    padding: 0;
    margin: 0;
    left: 0;
    top: 100%;
}

#menu_list li ul li {
    position: relative;
    opacity: 0.7;
    text-align: left;
    padding: 0;
    background-color:#bedfce;
    border: solid 1px #9ac8b0;
    border-top-color:#f1efea;
    border-left-color:#f1efea;
    box-shadow: 1px 1px 8px #6fa98b;
    list-style-type: none;
    display: block;
    clear: both;
    width: 100%;
    /* for IE7 */
    width: expression((this.parentNode.offsetWidth-2)+"px");
}

#menu_list li ul li:hover {
    opacity: 0.8;
    background-image: url("/icon/afon_url.png");
    color: #e46161;
    background-color:#d6e8f0;
    box-shadow: 2px 2px 8px #6fa98b;
}

#menu_list li:hover ul li a {
    display: block;
    height: 19px;
    color: #827053;
    font-weight: normal;
    font: 8pt Verdana;
    white-space: nowrap;
}

#menu_list li ul li:hover a {
    color: #e46161;
}

#menu_list li:hover ul {
    display: block;
    clear: both;
}
</style>
 
 </head>
 
 <body>

<ul id="menu_list" >
    <li>
        <a href="">com</a>
    </li>
    <li>
        <a href="">форум</a>
        <ul>
            <li><a href="">регистрация</a></li>
            <li><a href="">решение</a></li>
            <li><a href="">жизнь</a></li>
        </ul>
    </li>
    <li>
        <a href="">раздел №1</a>
        <ul>
            <li><a href="">подраздел №1</a></li>
            <li><a href="">подраздел №2</a></li>
            <li><a href="">подраздел №3</a></li>
            <li><a href="">подраздел №4</a></li>
        </ul>
    </li>
</ul>
</body>
</html>

Semen 04.06.2012 20:59
devote - спасибо большое, работает! Буду разбираться как :)

Deff 04.06.2012 21:13
devote,
:blink: У меня ИЕ 7 в XP зависает и не реагирует ни на какие клавиши
http://hostjs-mybb2011.narod.ru/Semen.htm

без width: expression(this.parentNode.offsetWidth + "px"); - Пашет
http://hostjs-mybb2011.narod.ru/Semen2.htm

Semen,
Ксать а второй Вариант - точно так же, как изначально ? (В ИЕ

Semen 04.06.2012 21:24
Цитата:
Сообщение от Deff (Сообщение 178938)
Semen,
Ксать а второй Вариант - точно так же, как изначально ? (В ИЕ
тоже работает отлично!

devote 04.06.2012 21:47
Цитата:
Сообщение от Deff
devote,
У меня ИЕ 7 в XP зависает и не реагирует ни на какие клавиши
да простите, надо экспрешен поправить, отнять пару пикселов бордера забыл:
width: expression((this.parentNode.offsetWidth-2)+"px");

Deff 04.06.2012 23:20
devote,
http://hostjs-mybb2011.narod.ru/Semen.htm работает!

Ксать на счёт inline-block - я правду сказал

Цитата:
Браузеры
Internet Explorer до версии 7 включительно:
значение inline-block применяется только для встроенных элементов, (*span) с блочными элементами работает некорректно.


Часовой пояс GMT +3, время: 13:57.