Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.02.2009, 18:13
Новичок на форуме
Отправить личное сообщение для Devider Посмотреть профиль Найти все сообщения от Devider
 
Регистрация: 24.02.2009
Сообщений: 6

Ссылка под слоем перекрывает слой
Есть несколько меню один под другим:

Меню 3: пункт 1 | пункт2 | пункт 3 | пункт 4 | пункт 5
Меню 2: пункт 1 | пункт2 | пункт 3 | пункт 4
Меню 1: пункт 1 | пункт2 | пункт 3

К пунктам скрытыми блоками прикрепляется подменю (любого уровня вложенности).

При этом, если мы открываем подменю Пункта 1 в Меню 3, то при наведении на Пункт 2 подменю закрывается. Все бы работало, не будь несколько меню, поскольку ссылки в Меню 1 и Меню 2 обрабатывают событие onmouseover, не смотря на то, что их перекрывает подменю пунктов Меню 3.

Для подменю испльзую дивы.
Ответить с цитированием
  #2 (permalink)  
Старый 24.02.2009, 20:52
Новичок на форуме
Отправить личное сообщение для Devider Посмотреть профиль Найти все сообщения от Devider
 
Регистрация: 24.02.2009
Сообщений: 6

уже на нескольких форумах спросил. Неужели никто не сталкивался?
Ответить с цитированием
  #3 (permalink)  
Старый 24.02.2009, 20:55
Отправить личное сообщение для Андрей Параничев Посмотреть профиль Найти все сообщения от Андрей Параничев
 
Регистрация: 21.02.2008
Сообщений: 1,250

Выложите код проблемного места, а еще лучше - ссылку на проблемную страницу.
По вашему описанию совершенно ничего не понятно.
Ответить с цитированием
  #4 (permalink)  
Старый 24.02.2009, 21:08
Новичок на форуме
Отправить личное сообщение для Devider Посмотреть профиль Найти все сообщения от Devider
 
Регистрация: 24.02.2009
Сообщений: 6

Там будет много лишнего. Лучше попробую попонятнее объяснить.

Так меню расположены изначально:
Меню 3: пункт 1 | пункт2 | пункт 3 | пункт 4 | пункт 5
Меню 2: пункт 1 | пункт2 | пункт 3 | пункт 4
Меню 1: пункт 1 | пункт2 | пункт 3

Теперь мы нажали на Пункт 1:
Меню 3: пункт 1 | пункт2 | пункт 3 | пункт 4 | пункт 5
Меню 2: подпункт 1 нкт2 | пункт 3 |пункт 4
Меню 1: подпункт 2 нкт2 | пункт 3
_______ подпункт 3

Меню 1 и Меню 2 находится под DIV-ом, содержащим подпункты.

Теперь мы навели курсор на Пункт 3 в Меню 3 и подменю Пункта 1 скрылось:
Меню 3: пункт 1 | пункт2 | пункт 3 | пункт 4 | пункт 5
Меню 2: пункт 1 | пункт2 | пункт 3 | пункт 4
Меню 1: пункт 1 | пункт2 | пункт 3

Но если мы наведем курсор на подпункт 1
Меню 3: пункт 1 | пункт2 | пункт 3 | пункт 4 | пункт 5
Меню 2: подпункт 1 нкт2 | пункт 3 |пункт 4
Меню 1: подпункт 2 нкт2 | пункт 3
_______ подпункт 3

То срабатывает событие onmouseover Пункта 1 или Пункта 2 в Меню 2, которые скрыты подпунктами.
Ответить с цитированием
  #5 (permalink)  
Старый 24.02.2009, 21:31
Отправить личное сообщение для Андрей Параничев Посмотреть профиль Найти все сообщения от Андрей Параничев
 
Регистрация: 21.02.2008
Сообщений: 1,250

Devider,
Дело в том, что не зная в каком(их) браузерах проблема, и какой именно код у этого меню, какие стили в этих выпадающих меню и т.д. - помочь практически невозможно. Во всяком случае я не могу по такому описанию понять почему такая проблема возникает.
Ответить с цитированием
  #6 (permalink)  
Старый 24.02.2009, 22:28
Новичок на форуме
Отправить личное сообщение для Devider Посмотреть профиль Найти все сообщения от Devider
 
Регистрация: 24.02.2009
Сообщений: 6

Такая проблема возникает во всех браузерах.

<style><!--

.layer { VISIBILITY: hidden; POSITION:absolute; margin-top:1px;}
.layer A{ text-align:left;  color:#FFFFFF}
.layer A:hover{}

TABLE.tmenu { border-collapse:collapse; border:0px;  }
TABLE.tmenu TH{ white-space:nowrap; padding:0px; text-align:left; color:#f06426; font-weight:normal; font:11px Verdana;  }
TABLE.tmenu TD{ padding:0px; vertical-align:top; font:11px Verdana;  color:#f06426; padding-left:3px; padding-right:3px;}
TABLE.tmenu A{text-transform:none; color:#000000; display:block; padding-bottom:3px; padding-top:3px;  text-decoration:none; font-weight:bold; } 
TABLE.tmenu A:hover{ color:#FF0000; text-decoration:none }
TABLE.tmenu A.select{ color:#FF0000; }

TABLE.submenu1{  border-collapse:collapse; border:0px;  }
TABLE.submenu1 TD{ white-space:nowrap; padding:5px; background-color:#ffffcc; }
TABLE.submenu1 TH{ white-space:nowrap; padding:0px; width:10px; height:10px;}
TABLE.submenu1 A{text-transform:none; color:#000000; display:block; padding-bottom:3px; padding-top:3px;   text-decoration:none; } 
TABLE.submenu1 A:hover{ color:#FF0000; text-decoration:none }
TABLE.submenu1 A.select{ color:#FF0000; }

</style>


var isOpera = (navigator.userAgent.indexOf("Opera") != -1) ? true : false;
var DOM = (typeof(document.getElementById) != 'undefined');

var openLayers = new Array();
var noClose = 0;
var currentLayerNum=0;
var closeTimer = null;
var closeSubMenu = null;
var bTranState = 0;

function mopen(n, level)
{
  var vl = document.getElementById("menu_"+n);
 
  if(bTranState)
  {
    // vl.style.visibility='hidden';
	
	// currentLayerNum = 0;
	bTranState = 0;
  }
  else 
  {
	bTranState = 0; 

	if(closeSubMenu){ window.clearTimeout(closeSubMenu); closeSubMenu = null; }
	
	mcancelclosetime();
	
	if(openLayers[level] && (openLayers[level] != n)) document.getElementById("menu_"+openLayers[level]).style.visibility='hidden';
	
	openLayers[level] = n;
	currentLayerNum = n;	
	vl.style.visibility='visible';
  }			
}

/* Закрываем открытые подуровни, при перемещении курсора по пунктам меню  */
function mchitem(level, n)
{
 mcancelclosetime();	
	
 currentLayerNum = n;	
 closeSubMenu = window.setTimeout("mclose("+level+")", 300);
}

function mclosetime()
{
//	document.form.events.value+=" "+currentLayerNum;
 closeTimer = window.setTimeout(mallclose, 1000);
}
	
function mcancelclosetime()
{
//	document.form.events.value+=" cancel="+currentLayerNum;
 if(closeTimer) { window.clearTimeout(closeTimer); closeTimer = null; }				
}
	
function mclose(level)
{
 if (openLayers[level])
 { 
	for (i=level; i<openLayers.length; i++)
	{ 
		if (currentLayerNum!=openLayers[i]) { document.getElementById("menu_"+openLayers[i]).style.visibility='hidden'; openLayers[i]=''; }		
	} 
 }
}

/* Закрываем все открытые подменю */
function mallclose()
{
 if (openLayers.length>0) 
 {  
	for( var key in openLayers ) { document.getElementById("menu_"+openLayers[key]).style.visibility='hidden'; openLayers[key]='';  } 
 }
}
	
document.onclick = mallclose;



На выводе так

Меню 1

<TABLE class="tmenu"><tr> <td> <strong>1</strong></td>
<td>|</td><th > 
<a  href="javascript:mopen(2, 1); void(0);" >Работа&nbsp;</a>  
	
                Подменю
  	<DIV class="layer" style=" z-index:3" id="menu_2"><table class="submenu2"><tr><td >

	      
	<a  href="javascript:void(0);" onmouseover="javascript:mopen(34, 2); return false;"  class="smenu"  >Работодатели&nbsp;</a>

	</td></tr>
     
  	<tr><td >

	<a  href="/notice-board/1/2/35/" onmouseover="mchitem(2, 35);"  >Персонал&nbsp;</a>
	
	</td></tr> 

  	<tr><td >
	<a  href="/notice-board/1/2/36/" onmouseover="mchitem(2, 36);"  >Содействие в трудоустройстве&nbsp;</a>
	
	</td></tr> 
 <table>

Меню 2
<TABLE class="tmenu"><tr> <td> <strong>2</strong></td>
       
 	<td>|</td><th > 

  	<a  href="/notice-board/7/8/"  onmouseover="mclosetime()" >Бытовая техника&nbsp;</a>  
	
	</th>	
 	<td>|</td><th > 

  	<a  href="/notice-board/7/8/"  onmouseover="mclosetime()" >Бытовая техника&nbsp;</a>  
	
	</th>	
 	<td>|</td><th > 

  	<a  href="/notice-board/7/8/"  onmouseover="mclosetime()" >Бытовая техника&nbsp;</a>  
	
	</th>	
  </tr>
</table>
Ответить с цитированием
  #7 (permalink)  
Старый 24.02.2009, 22:32
Новичок на форуме
Отправить личное сообщение для Devider Посмотреть профиль Найти все сообщения от Devider
 
Регистрация: 24.02.2009
Сообщений: 6

Мне нужно чтобы ссылки, закрытые подменю, не обрабатывали событие onmouseover.
Ответить с цитированием
  #8 (permalink)  
Старый 24.02.2009, 23:18
Новичок на форуме
Отправить личное сообщение для Devider Посмотреть профиль Найти все сообщения от Devider
 
Регистрация: 24.02.2009
Сообщений: 6

Проблема была в другом. Дело в том что событие обрабатывалось не сразу и если мы прошлись курсором по нижним пунктам меню, срабатывал таймер, который выключал подменю.

Как мне подсказали на одном форуме

Цитата:
Блок, находящийся наверху, должен:
- во-первых, ДЕЙСТВИТЕЛЬНО быть НАВЕРХУ (т.е. иметь свойство z-index б_О_льшим, чем у ссылки внизу;
- во-вторых, блок должен ОБЯЗАТЕЛЬНО иметь УКАЗАННЫМ background (т.е. фон должен быть отличным от transparent)


Если эти два условия соблюдены, то ссылка не может срабатывать под блоком.
Ответить с цитированием
Ответ



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

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