Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.06.2012, 10:42
Аспирант
Отправить личное сообщение для Semen Посмотреть профиль Найти все сообщения от Semen
 
Регистрация: 28.07.2009
Сообщений: 67

проблемы с меню в 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";}
}
}
Ответить с цитированием
  #2 (permalink)  
Старый 04.06.2012, 10:48
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

не знаю как у вас но у меня ничего не закрывается:
<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>
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #3 (permalink)  
Старый 04.06.2012, 11:18
Аспирант
Отправить личное сообщение для Semen Посмотреть профиль Найти все сообщения от Semen
 
Регистрация: 28.07.2009
Сообщений: 67

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

Последний раз редактировалось Semen, 04.06.2012 в 11:34.
Ответить с цитированием
  #4 (permalink)  
Старый 04.06.2012, 11:31
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Semen,
переделайте меню с использованием CSS без скриптов, и все будет норм работать.. а то что опера отрабатывает уход с элемента, это вполне нормально, ведь когда вы наводите мышь на другой элемент, событие ухода и должно сработать. И дело тут далеко не в браузере, либо делайте задержку между перед закрытием, и очищайте задержку если срабатывает открытие, либо лучше всего переделать на CSS. Оно и проще и работоспособнее.
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #5 (permalink)  
Старый 04.06.2012, 11:33
Аспирант
Отправить личное сообщение для Semen Посмотреть профиль Найти все сообщения от Semen
 
Регистрация: 28.07.2009
Сообщений: 67

ок спасибо за совет и направление буду делать...
Ответить с цитированием
  #6 (permalink)  
Старый 04.06.2012, 13:38
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

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>

Последний раз редактировалось Deff, 04.06.2012 в 13:47.
Ответить с цитированием
  #7 (permalink)  
Старый 04.06.2012, 14:02
Аспирант
Отправить личное сообщение для Semen Посмотреть профиль Найти все сообщения от Semen
 
Регистрация: 28.07.2009
Сообщений: 67

ок попробую спасибо
Поступил по совету devote - сделал раскрывающийся список в css - отлично работает и настроить все намного легче!
Ответить с цитированием
  #8 (permalink)  
Старый 04.06.2012, 19:13
Аспирант
Отправить личное сообщение для Semen Посмотреть профиль Найти все сообщения от Semen
 
Регистрация: 28.07.2009
Сообщений: 67

Подскажите еще пожалуйста.
Вот я сделал раскрывающееся меню на 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>

Последний раз редактировалось Semen, 04.06.2012 в 19:22.
Ответить с цитированием
  #9 (permalink)  
Старый 04.06.2012, 19:57
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

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;
Ответить с цитированием
  #10 (permalink)  
Старый 04.06.2012, 19:58
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от Deff
display:inline-block;
ИЕ7 не понимает свойства inline-block
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с аккордионом и меню Tie ExtJS 3 01.09.2011 14:36
Всплывающее меню (проблемы) Барин Элементы интерфейса 8 07.07.2011 09:22
Неккоректное отображение jquery меню в Google Chrome и Opera Galyanov Opera, Safari и др. 6 25.01.2011 00:26
Проблема с меню не корректно отображается в браузерах отличных от IE (т.е. FF Opera) 3xv Элементы интерфейса 2 16.04.2009 19:51
глюк форума Gvozd Сайт Javascript.ru 11 18.03.2009 14:37