Умоляю! Выпадающее меню и проблемы в IE6.

kalyaka-malyaka · December 11, 2008

Умоляю, помогите! Очень надо Кто обещал помочь, подвел, а мне уже ужас как срочно

Есть выпадающее меню


<ul id="topMenu">
	<li class="top-menu"><a class="main" href="#">Home</a></li>
	<li class="top-menu">
		<a class="main" href="#">About Gnax</a>
		<ul class="sub-menu">
			<li><a href="#" class="a-sub">Dedicated Servers</a></li>
			<li><a href="#" class="a-sub">Colocation</a></li>
			<li><a href="#" class="a-sub">Backup Servers</a></li>
			<li><a href="#" class="a-sub">Domain Registration</a></li>
		</ul>
	</li>
	<li class="top-menu">
		<a class="main" href="#">Services</a>
		<ul class="sub-menu">
			<li><a href="#" class="a-sub">Dedicated Servers</a></li>
			<li><a href="#" class="a-sub">Colocation</a></li>
			<li><a href="#" class="a-sub">Backup Servers</a></li>
			<li><a href="#" class="a-sub">Domain Registration</a></li>
		</ul>
	</li>
	<li class="top-menu"><a class="main" href="#">Forums</a></li>
	<li class="top-menu"><a class="main" href="#">Support</a></li>
</ul>

на всяк случай, css


ul#toptMenu {
	display: inline;
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	padding-left: 0px;
}
li.top-menu {
	position: relative;
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	display: inline;
	background: transparent url(images/design/top-menu-stick.gif) right 2px no-repeat;
	margin-right: 7px;
	padding-right: 9px;
	padding-bottom: 3px;
}
a:active.main, a:visited.main, a:link.main {
	color: #ffffff;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
}
a:hover.main, ul li.sel a.main {
	color: #59acff;
}
.sub-menu {
	display: none;
	position: absolute;
	left: -10px;
	top: 14px;
	border: solid 1px #0c065c;
	background-image: url(images/design/bg-sub-menu.png);
}
*:first-child+html .sub-menu {
	left: -8px;
}
* html .sub-menu {
	top: 14px;
}
ul.sub-menu {
	padding: 1px 8px 10px 8px;
	margin: 0px;
}
ul.sub-menu, ul.sub-menu li {
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
}
ul.sub-menu li {
	margin: 0px;
	display: block;
	background-image: url(images/design/bg-li-submenu.gif);
	background-position: bottom;
	background-repeat: repeat-x;
}
ul.active {
	display: block;
}
a:active.a-sub, a:visited.a-sub, a:link.a-sub {
	color: #120a8f;
	text-decoration: none;
	margin: 0px;
	display: block;
	padding: 6px 0px 6px 0px;
}
a:hover.a-sub {
	color: #ffffff;
}

есть скрипт для "выпадения"


$(function() {
	var mainMenu = $('ul#topMenu');
	$('ul#topMenu li.top-menu').each(function(elem) {
		$(this).bind('mouseover', function() {
			$('ul.sub-menu').removeClass('active');
			$('ul.sub-menu', this).addClass('active');
			$('ul#topMenu li.top-menu').removeClass('sel');
			$(this).addClass('sel');
		})
		.bind('mouseout', function() {
			$('ul.sub-menu', this).removeClass('active');
			$(this).removeClass('sel');
		});
	});
});

и файлик jquery.js к нему

проблема:

в ie6 мышка наводится только на первый пункт сабменю. при попытке вести мышку ниже сабменю пропадает. мне когда-то как-то переделывали этот скрипт, чтобы была задержка по времени для выпадения и исчезания сабменю. тогда ie6 успевает раздуплиться, и сабменю не пропадает, когда его не просят. но тот скрипт, в котором это делали, очень большой, там куча скриптов объединена в один, и я совершенно не могу вычленить оттуда кусок про задержку времени и не знаю, как его правильно прикрутить сюда. ну не знаю я js

Пожалуйста, помогите!

Уже самой впору ратовать за добавление рыдающего смайлика "для дефачек"

Ogalig · December 11, 2008

Попробуй протрейсить как-нибудь в каком именно месте у тебя не срабатывает скрипт. Я обычно юзаю алерты и подставляю их в после интересующей меня строки. Это если нет нормального редактора с точками останова под рукой.

kalyaka-malyaka · December 11, 2008

Попробуй протрейсить как-нибудь в каком именно месте у тебя не срабатывает скрипт. Я обычно юзаю алерты и подставляю их в после интересующей меня строки. Это если нет нормального редактора с точками останова под рукой.

так он срабатывает везде, кроме ie6. ie тормозит, и пока я веду мышку от одного пункта сабменю к другому, он уже считает, что наведение ушло, и прячет сабменю. хотя реально наведение не уходит - там li вплотную друг к другу, только в <a> есть padding

Vlad · December 11, 2008

а ссылку на страницу можно?

kalyaka-malyaka · December 12, 2008

а ссылку на страницу можно?

залила сюда:

http://www.afi-pallada.ho.ua/gnax/index.html

левое верхнее меню.

в ie6 еще и li у сабменю распирать по высоте стало. что-то у меня уже крышу срывает от этого меню.

s0rr0w · December 12, 2008

залила сюда:
http://www.afi-pallada.ho.ua/gnax/index.html
левое верхнее меню.
в ie6 еще и li у сабменю распирать по высоте стало. что-то у меня уже крышу срывает от этого меню.

Попробуй для A внутри LI поставить _zoom: 1;

AMD · December 12, 2008

http://anton.shevchuk.name/wp-demo/jquery-.../drop-down.html

ОТсюда вырви стиль

kalyaka-malyaka · December 12, 2008

Попробуй для A внутри LI поставить _zoom: 1;

попробовала. в ie сабменю стало расползаться не вниз, а вправо.

kalyaka-malyaka · December 12, 2008

http://anton.shevchuk.name/wp-demo/jquery-.../drop-down.html
ОТсюда вырви стиль

вырвала. вставила.

та же хрень - в ie6 сабменю мигает и исчезает, когда пытаешься вести по нему.

может, с какими-то другими скриптами ругается?

может, я в классах что-то пропускаю?

я уже пыталась скачать чудное работающее меню и прикрутить вместо своего.

нашла. проверила. пример работает везде. прикрутила - все равно хрень какая-то.

http://www.afi-pallada.ho.ua/gnax2/index.html

то ли руки у меня из неправильного места, то ли внезапно посветлела до блондинки.

SelenIT · December 12, 2008

kalyaka-malyaka, а без PNGfix-а оно так же глючит?

kalyaka-malyaka · December 12, 2008

kalyaka-malyaka, а без PNGfix-а оно так же глючит?

твою за ногу... нет, не глючит. СПАСИБО!

http://www.afi-pallada.ho.ua/gnax2/index.html

ррррррррррр!

но теперь же надо как-то иначе объяснить IE6, что надо png24 понимать?

Edited December 12, 2008 by kalyaka-malyaka

SelenIT · December 12, 2008

Недавно была серия статей (вот, напр.) о фиксе проблемы с полупрозрачностью через VML (здесь обсуждался готовый скрипт, реализующий такой эффект для фона). Не знаю, как он дружит с JQuery, но по крайней мере есть надежда, что он не так аццки корячит DOM, как традиционные решения с дивами-подкладками...

kalyaka-malyaka · December 12, 2008

SelenIT, еще раз спасибо. буду ковырять прозрачность.

s0rr0w · December 12, 2008

но теперь же надо как-то иначе объяснить IE6, что надо png24 понимать?

А зачем? Пусть сплошная заливка будет...

kalyaka-malyaka · December 12, 2008

А зачем? Пусть сплошная заливка будет...

хых я скромный html-кодер. как дизайнер отрисовал, как клиент принял, так и рЭжу. и шоп везде одинаково было. у меня права голоса по этому вопросу нет

s0rr0w · December 12, 2008

хых я скромный html-кодер. как дизайнер отрисовал, как клиент принял, так и рЭжу. и шоп везде одинаково было. у меня права голоса по этому вопросу нет

Тогда заменить на альфа-фильтр.

Vlad · December 13, 2008

Как в браузере Internet Explorer 6 добавить рисунок с прозрачностью в формате PNG?

http://webimg.ru/node/155

Как в браузере Internet Explorer 6 сделать повторяющийся фон в формате PNG?

http://webimg.ru/node/157

Как в браузере Internet Explorer 6 установить фоновую картинку с прозрачностью в формате PNG?

http://webimg.ru/node/156

kalyaka-malyaka · December 13, 2008

Vlad, спасибо ))

Я сделала!!! Даже, в двух вариантах (с pngfix и без)

В понедельник покажу, на работе все осталось.

Спасибо всем огромное за помощь!

Sign In

Умоляю! Выпадающее меню и проблемы в IE6.

Question

Link to comment

Share on other sites

17 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information