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


× Быстрый вопрос
Пользователь месяца
dos1k dos1k 1-й за Май
Очков активности: 1 194 28 тем, 115 сообщений, 4 балла репутации
Сайт: dos1k.ru
ТОП самых активных за этот месяц
  • Фотография Olya23
    #1

    Olya23
    Очков активности: 678 3 темы, 104 сообщения, 4 балла репутации

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

    Rodiola (rukodelkovo.ru)
    Очков активности: 414 0 тем, 69 сообщений, 4 балла репутации

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

    maxnik (konovalovpavel.ru)
    Очков активности: 81 0 тем, 18 сообщений, 3 балла репутации

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

    agrx (key-assort.ru)
    Очков активности: 48 0 тем, 16 сообщений, 2 балла репутации

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

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

  • Фотография re-search
    #6

    re-search
    Очков активности: 36 5 тем, 9 сообщений, 1 балл репутации

  • Фотография Андрей WPMasterKZ
    #7

    Андрей WPMasterKZ (wpmaster.kz)
    Очков активности: 34.5 0 тем, 23 сообщения, 1 балл репутации

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

    fedornabilkin (plohoneponyal.ru)
    Очков активности: 33 0 тем, 11 сообщений, 2 балла репутации

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

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

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

    Artos
    Очков активности: 21 0 тем, 7 сообщений, 2 балла репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 24.05.2019
  • Яндекс выдача: 12.06.2019
Последние темы

Топ 5 участников по репутации


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

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

#1 Вячеслав

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

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

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

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