Проблемы дроп-давн меню в ИЕ

mario · February 17, 2009

Не пойму почему проблемы с меню в ИЕ.

Проблема заключается в том что при отвода указателя, меню не пропадает а начанает трястись... :rolleyes:

Вот код:

хтмл.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Меню</title>
<link rel="stylesheet" href="../menu.css" type="text/css" />
<script type="text/javascript" src="../ddmenu.js"></script>
</head>
<body>
<ul class="menu" id="menu">
	<li><a href="/" class="menulink">Главная</a></li>
	<li><a href="#" class="menulink">1</a>
		<ul>
			<li>
				<a href="../build/" class="sub">1.1</a>
				<ul>
					<li class="topline"><a href="#">1.1.1</a></li>
					<li><a href="#">1.1.2</a></li>
					<li><a href="#">1.1.3</a></li>
				</ul>
			</li>
			<li>
				<a href="../build/" class="sub">1.2</a>
				<ul>
					<li class="topline"><a href="#">1.2.1</a></li>
					<li><a href="#">1.2.2</a></li>
					<li><a href="#">1.2.3</a></li>
					<li><a href="#">1.2.4</a></li>
				</ul>
			</li>
		</ul>
	</li>

</ul>
<script type="text/javascript">
	var menu=new menu.dd("menu");
	menu.init("menu","menuhover");
</script>
</body>
</html>

ксс.

#menu {width:100%;border-bottom: 1px solid #f2f2f2;height: 36px;padding-left: 15px;}
ul.menu {list-style:none; margin:0; padding:0; text-align: center;width:100%;}
ul.menu * {margin:0; padding:0}
ul.menu a {display:block; color:#000; text-decoration:none}
ul.menu li {position:relative; float:left;}

ul.menu ul {position:absolute; top:37px; left:0; background:#fff; display:none; opacity:0; list-style:none}
ul.menu ul li {position:relative; border:1px solid #f2f2f2; border-top:none; width:148px; margin:0}
ul.menu ul li a {display:block; padding:3px 7px 5px; background-color:#fff}
ul.menu ul li a:hover {background-color:#C8AC1D;color:#fff;}
ul.menu ul ul {left:148px; top:0px}
ul.menu .menulink {padding:5px 7px 16px 7px; font-weight:bold; background:url(../i/mgrad1.gif.gif) #fff; width:134px}
ul.menu .menulink:hover, ul.menu .menuhover {background:url(../i/mgrad.gif)}
ul.menu .sub {background:#fff url(../i/arrow.gif) 136px 8px no-repeat}
ul.menu .sub:hover {background-color:#C8AC1D;}
ul.menu .topline {border-top:1px solid #f2f2f2}

жаваскрипт.

var menu=function(){
	var t=15,z=50,s=6,a;
	function dd(n){this.n=n; this.h=[]; this.c=[]}
	dd.prototype.init=function(p,c){
		a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
		for(i;i<l;i++){
			var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
			h.onmouseover=new Function(this.n+'.st('+i+',true)');
			h.onmouseout=new Function(this.n+'.st('+i+')');
		}
	}
	dd.prototype.st=function(x,f){
		var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
		clearInterval(c.t); c.style.overflow='hidden';
		if(f){
			p.className+=' '+a;
			if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
			if(c.mh==c.offsetHeight){c.style.overflow='visible'}
			else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}
		}else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}
	}
	function sl(c,f){
		var h=c.offsetHeight;
		if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
			if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'}
			clearInterval(c.t); return
		}
		var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
		c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')';
		c.style.height=h+(d*f)+'px'
	}
	return{dd:dd}
}();

mario · February 18, 2009

хелп... :rolleyes:

s0rr0w · February 18, 2009

хелп...

Нет никаких проблем с данным кодом.

mario · February 19, 2009

ув.s0rr0w проблема в ИЕ 7версии, меню дергается вместо того что бы пропасть... :rolleyes:

s0rr0w · February 19, 2009

ув.s0rr0w проблема в ИЕ 7версии, меню дергается вместо того что бы пропасть...

Не заметил что-то...

Ладно, приду на работу еще раз проверю.

s0rr0w · February 26, 2009

Да, есть проблема.

У вас, скорее всего, не срабатывает условие

if((h<=0&&f!=1)||(h>=c.mh&&f==1)){

mario · February 27, 2009

а по каким причинам это может быть?

s0rr0w · February 27, 2009

а по каким причинам это может быть?

Причин вообще-то несколько

1. ИЕ неправильно рапортует о текущей высоте и ширине.

2. Происходит повторное присвоение setTimeout переменной, после чего очистить ее уже не представляется возможным.

Кстати, попробуйте для IE использовать onmouseenter вместо onmouseover

mario · March 2, 2009

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

s0rr0w · March 2, 2009

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

Для начала советую упростить скрипт. Уберите замыкания, пересмотрите все возвращаемые значения от браузера.

Написать готовый - это не ко мне.

Sign In

Проблемы дроп-давн меню в ИЕ

Question

mario

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

mario

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

mario

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

mario

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

mario

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information