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


Пользователь месяца
ShowPrint ShowPrint 1-й за Сентябрь
Очков активности: 283 2 темы, 21 сообщение, 7 баллов репутации
Сайт: ShowPrint.ru
ТОП самых активных за этот месяц
  • Фотография Medvedoc
    #1

    Medvedoc
    Очков активности: 510 9 тем, 58 сообщений, 4 балла репутации

  • Фотография ShowPrint
    #2

    ShowPrint (ShowPrint.ru)
    Очков активности: 312 Вне конкурса за определение пользователя месяца

  • Фотография Ixman
    #3

    Ixman (o5cat.ru)
    Очков активности: 216 0 тем, 24 сообщения, 6 баллов репутации

  • Фотография BLIK
    #4

    BLIK
    Очков активности: 210 Вне конкурса за определение пользователя месяца

  • Фотография Игорь Ку
    #5

    Игорь Ку (dudesday.ru)
    Очков активности: 126 4 темы, 9 сообщений, 4 балла репутации

  • Фотография WGN
    #6

    WGN (worldgamenews.com)
    Очков активности: 88.5 Вне конкурса за определение пользователя месяца

  • Фотография Алексей111
    #7

    Алексей111 (xvideo24.ru)
    Очков активности: 66 8 тем, 20 сообщений, 1 балл репутации

  • Фотография yuran
    #8

    yuran (yurbol.ru)
    Очков активности: 37.5 1 тема, 22 сообщения, 1 балл репутации

  • Фотография Zevss
    #9

    Zevss (domles43.ru)
    Очков активности: 22.5 2 темы, 9 сообщений, 1 балл репутации

  • Фотография falka
    #10

    falka (mygoodjob.ru)
    Очков активности: 16.5 3 темы, 2 сообщения, 1 балл репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 26.09.2018
  • Яндекс выдача: 20.10.2018
Топ 5 участников по репутации


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

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

#1 Вячеслав

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

Отправлено 22 April 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
  • Пользователь
  • 381 сообщений
  • Репутация: 2

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

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

#3 ZiTosS

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

Отправлено 22 April 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
  • Пользователь
  • 381 сообщений
  • Репутация: 2

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

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

#5 ZiTosS

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

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

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

#6 Вячеслав

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

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