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



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

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

#1

Поделиться сообщением #1



Вячеслав

Вячеслав
  • Пользователь
  • 375 сообщений
  • Репутация: 2
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

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Проблема с выпадающим меню
  2. Переделать горизонтальное меню в вертикальное
  3. Многоуровневое меню акордеон
  4. Урок (Viewport)#2 - создание выпадающих меню
  5. Верстаем горизонтальное меню по мотивам MasterWEBS

#2

Поделиться сообщением #2



Вячеслав

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

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

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

#3

Поделиться сообщением #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

Поделиться сообщением #4



Вячеслав

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

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

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

#5

Поделиться сообщением #5



ZiTosS

ZiTosS
  • Неактивные
  • 5 148 сообщений
  • Репутация: 8

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

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

#6

Поделиться сообщением #6



Вячеслав

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

Отправлено 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