Перейти к содержимому

Сервис обмена электронных валют

Партнерская программа Kredov

  • Закрытая тема Тема закрыта

Проблема с вертикальным меню (типа Accordion)

#1 Вячеслав

Вячеслав
  • Пользователь
  • 357 сообщений
  • Репутация: 0
0

Отправлено 22 Апрель 2010 - 19:51

Всем привет!
Пишу небольшой скрипт для вертикального меню для Joomla, в котором при наведении на родительский LI отображаеться его дочерний элемент UL (субменю).

Все работает в нормальных браузерах, но как обычно упертый Осел не поддаеться! Проблема в том что при наведении на ссылку из вложенного UL, вызываеться событие 'mouseleave' которое запускает функции "сворачивания" меню (скрытия подменю), хотя поидее курсор находиться на РОДИТЕЛЬСКОМ LI.

Рассказать можно по разному но лучьше глянуть (меню слева, наведите на ссылку "Новости" для отображения подменю этого пункта) - Посмотреть пример

это код HTML:

<div id="left">
<ul>
<li><a href="">...</a></li>
<li class="parent">
<a href="">...</a>
<ul>
<li><a href="">...</a></li>
<li><a href="">...</a></li>
</ul>
</li>
<li><a href="">...</a></li>
<li><a href="">...</a></li>
...
</ul>
</div>


Код CSS:
<style type="text/css">
#left li.parent{ position:relative;  z-index:110; display:block; cursor:pointer;}
#left li.parent a{display:block; z-index:100; position:relative;  background:#FFAD46;}
#left li.parent a:hover, #left li.li-hov a{ background:#FFC174;}
#left li.li-hov ul li a{background:none;}
#left li.parent ul{margin-left:15px; z-index:99; margin-top:-100px; position:absolute; margin-bottom:10px;}
#left li.parent{overflow:hidden;}
#left li.parent ul.ul-show{display:block !important;}

#left li.active ul li a{color:#FFFFFF !important;}
</style>

И код Java Script - Mootools 1.1

<script type="text/javascript">
window.addEvent('domready', function(){

	if(!$('left')){return false;}
	
	$$('#left li.parent').each(function(el, i){
		el.addEvents({
			'mouseenter': function(){				
				if(el.getElement('ul').getStyle('margin-top').toInt() == -100){
					el.addClass('li-hov');
					var hLI = el.getStyle('height').toInt();
					var hUL = el.getElement('ul').getStyle('height').toInt();
				
					var fxLi = new Fx.Styles(el, { duration: 1000 });
					var fx = new Fx.Styles(el.getElement('ul'), { duration: 1000 });
					
					el.getElement('ul').setStyles({'opacity': 0}).addClass('ul-show');
					
					fxLi.start.delay(1, fxLi, {'height' : hLI+hUL, 'padding-bottom' : 15 });
					fx.start.delay(1, fx, { 'opacity' : 1, 'margin-top' : 0 });
				}

			},
			'mouseleave': function(){
				if(el.getElement('ul').getStyle('margin-top').toInt() == 0){
					el.removeClass('li-hov');
					var hLI = el.getStyle('height').toInt();
					var hUL = el.getElement('ul').getStyle('height').toInt();
				
					var fxLi = new Fx.Styles(el, { duration: 1000 });
					var fx = new Fx.Styles(el.getElement('ul'), { duration: 1000 });
					
					fxLi.start.delay(1, fxLi, {'height' : hLI-hUL, 'padding-bottom' : 0 });
					fx.start.delay(1, fx, { 'opacity' : 1, 'margin-top' : -100 });
				}
			}
		});
	});
	
	//alert($$('#left li.parent').length);
});
</script>

Скорее всего проблема в CSS вот только невъеду где я накосячил, помогите кто сталкивался, спасибо!

 

 

  • 0

#2 Вячеслав

Вячеслав
    Topic Starter
  • Пользователь
  • 357 сообщений
  • Репутация: 0

Отправлено 22 Апрель 2010 - 20:35

Понял из-за чего это... это из-за того, что у родительского LI установлено свойство relative, если его убрать то все работает правильно кроме того что дочерный UL с абсолютным позиционированием вылезает за пределы родителя LI, и как быть непойму... :rolleyes:
  • 0

#3 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 22 Апрель 2010 - 21:35

Вячеслав, Попробуй добавить в CSS
* html #left ul { line-height: 0; } /* IE6 "fix" */
	  #left ul a { zoom: 1; } /* IE6/7 fix */
	#left ul li { float: none; }
	#left ul ul { top: 0; }
Почитать про zoom:1 можно тут: MSDN - HasLayout Overview
  • 0

#4 Вячеслав

Вячеслав
    Topic Starter
  • Пользователь
  • 357 сообщений
  • Репутация: 0

Отправлено 22 Апрель 2010 - 22:06

Не не помогло((
  • 0

#5 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 22 Апрель 2010 - 22:26

Вячеслав, жесть у меня твой сайт вообще не открывает в IE7. Проверил, это из-за modal.js, почему не знаю.
С меню проблема очевидная, у тебя дочерний UL в IE6 не растягивает родительский LI, и поэтому как только ты выходишь за его фокус, то есть вне дочерних блочных элементов, то происходит закрытие. Побороть это можно, вот только иметь бы доступ для теста, не очень люблю верстать под IE, поэтому сходу решить проблему не сумеем...
  • 0

#6 Вячеслав

Вячеслав
    Topic Starter
  • Пользователь
  • 357 сообщений
  • Репутация: 0

Отправлено 23 Апрель 2010 - 21:43

Спасибо ZiTosS за помощь помог решить это следющим образом

Для элементов А(ссылок) в родительском списке добавлено свойство ZOOM:1, которое и позволило решить эту проблему

#left li.parent a{display:block; z-index:100; position:relative; background:#FFAD46; zoom: 1}
На всякий пожарный отменяем обтекание для IE

#left li.parent li {float: none;}
А также для дочернего UL установлена ширина в 100% и отступ от верха в 15px

#left li.parent ul { top: 15px; width: 100%;}

Теперь все работает)))
  • 0


Оформление форума – IPBSkins.ru