Помогите сделать выпадающее меню

Great Rash · June 16, 2009

Написал такой код:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Menu</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 11px "Trebuchet MS", Verdana, Tahoma, sans-serif;
		}

		body {
			margin: 10px;
		}

		ul {
			list-style: none;
		}

		li {
			float: left;
			position: relative;
			margin: 0 5px;
		}

		li ul {
			display: none;
			position: absolute;
			width: 100px;
			border: 1px solid;
		}

		li ul ul {
			display: none;
			position: absolute;
			left: 100%;
			top: 0;
		}

		li li {
			float: none;
			margin: 0;
		}
	</style>

	<script type="text/javascript">

		function Menu(parentID) {
			this.parent = document.getElementById(parentID);
			this.int = null;
			this.timeout = 500;
			this.initMenu();
		}

		Menu.prototype.initMenu = function() {
			var prnt = this;
			var uls = this.parent.getElementsByTagName('ul');

			for (var i = 0; i < uls.length; i++) {
				if (uls[i].parentNode.nodeName.toLowerCase() == 'li') {
					uls[i].parentNode.onmouseover = function() {
						prnt.openItem(this);
					}

					uls[i].parentNode.onmouseout = function() {
						prnt.closeItem(this);
					}
				}
			}
		}

		Menu.prototype.openItem = function(elem) {
			if (this.int) {
				clearInterval(this.int);
			}

			elem.getElementsByTagName('ul')[0].style.display = 'block';
		}

		Menu.prototype.closeItem = function(elem) {
			this.int = setInterval(function() { elem.getElementsByTagName('ul')[0].style.display = 'none'; }, this.timeout);
		}
	</script>
</head>

<body>

	<ul id="menu">
		<li>
			menu 1
			<ul id="q">
				<li>
					submenu 1.1
					<ul id="w">
						<li>
							submenu 1.1.1
						</li>
						<li>
							submenu 1.1.2
						</li>
					</ul>
				</li>
				<li>
					submenu 1.2
				</li>
				<li>
					submenu 1.3
				</li>
			</ul>
		</li>
	</ul>

	<script type="text/javascript">
		new Menu('menu');
	</script>

</body>
</html>

Но проблема в том, что подменю второго уровня не хочет оставаться открытым. Такое ощущение, что срабатывает mouseout. Хотя вроде не должен. Или должен?

Если должен, то как мне поправить код, чтобы остановить интервал в том случае если мышь на подменю?

dyadya · June 16, 2009

setInterval clearInterval - замените на setTimeout clearTimeout

Great Rash · June 16, 2009

В общем-то изначально у меня так и было. Смысл от этого особо не меняется.

dyadya · June 16, 2009

Смысл от этого особо не меняется.

Я поменял - работает...

Great Rash · June 16, 2009

Быть такого не могёт!!!

function Menu(parentID) {
	this.parent = document.getElementById(parentID);
	this.int = null;
	this.timeout = 500;
	this.initMenu();
}

Menu.prototype.initMenu = function() {
	var prnt = this;
	var uls = this.parent.getElementsByTagName('ul');

	for (var i = 0; i < uls.length; i++) {
		if (uls[i].parentNode.nodeName.toLowerCase() == 'li') {
			uls[i].parentNode.onmouseover = function() {
				prnt.openItem(this);
			}

			uls[i].parentNode.onmouseout = function() {
				prnt.closeItem(this);
			}
		}
	}
}

Menu.prototype.openItem = function(elem) {
	if (this.int) {
		clearTimeout(this.int);
	}

	elem.getElementsByTagName('ul')[0].style.display = 'block';
}

Menu.prototype.closeItem = function(elem) {
	this.int = setTimeout(function() { elem.getElementsByTagName('ul')[0].style.display = 'none'; }, this.timeout);
}

Только что проверил. Работает точно так же как и с интервалом, т.е. неправильно

dyadya · June 16, 2009

Работает в ИЕ, Опере и Лисе.

Я со строчкой this.initMenu(); ковырялся. Заработало после того как написал this.initMenu() = initMenu(); Потом вернул - пока работает

Great Rash · June 16, 2009

Совершенно ничего не понял...

this.initMenu() = initMenu(); <-- так писать нельзя, будет ошибка

dyadya · June 16, 2009

так писать нельзя, будет ошибка

- не спорю, но потом вернул (работает, так и так). Попробуйте переписать ее заново

Мой Skype dyadya262 - могу продемонстрировать - работает

Great Rash · June 16, 2009

Напишите сюда код, который у вас работает.

dyadya · June 16, 2009

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Menu</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 11px "Trebuchet MS", Verdana, Tahoma, sans-serif;
		}

		body {
			margin: 10px;
		}

		ul {
			list-style: none;
		}

		li {
			float: left;
			position: relative;
			margin: 0 5px;
		}

		li ul {
			display: none;
			position: absolute;
			width: 100px;
			border: 1px solid;
		}

		li ul ul {
			display: none;
			position: absolute;
			left: 100%;
			top: 0;
		}

		li li {
			float: none;
			margin: 0;
		}
	</style>

	<script type="text/javascript">

		function Menu(parentID) {
			this.parent = document.getElementById(parentID);
			this.int = null;
			this.timeout = 500;
			this.initMenu();
		}

		Menu.prototype.initMenu = function() {
			var prnt = this;
			var uls = this.parent.getElementsByTagName('ul');

			for (var i = 0; i < uls.length; i++) {
				if (uls[i].parentNode.nodeName.toLowerCase() == 'li') {
					uls[i].parentNode.onmouseover = function() {
						prnt.openItem(this);
					}

					uls[i].parentNode.onmouseout = function() {
						prnt.closeItem(this);
					}
				}
			}
		}

		Menu.prototype.openItem = function(elem) {
			if (this.int) {
				clearTimeout(this.int);
			}

			elem.getElementsByTagName('ul')[0].style.display = 'block';
		}

		Menu.prototype.closeItem = function(elem) {
			this.int = setTimeout(function() { elem.getElementsByTagName('ul')[0].style.display = 'none'; }, this.timeout);
		}
	</script>
</head>

<body>

	<ul id="menu">
		<li>
			menu 1
			<ul id="q">
				<li>
					submenu 1.1
					<ul id="w">
						<li>
							submenu 1.1.1
						</li>
						<li>
							submenu 1.1.2
						</li>
					</ul>
				</li>
				<li>
					submenu 1.2
				</li>
				<li>
					submenu 1.3
				</li>
			</ul>
		</li>
	</ul>

	<script type="text/javascript">
		new Menu('menu');
	</script>

</body>
</html>

Great Rash · June 16, 2009

Да не работает этот код. Наведите сначала на menu 1, затем на submenu 1.1, а затем на submenu 1.1.1. В итоге у вас должны пропасть все подменю. Я проверял в ИЕ 7, 8 и Мозилле 3.0.11. Везде работает одинаково, т.е. не работает как надо.

UPD:

Я все-таки вставил ради интереса ваш "рабочий" пример - как и ожидалось он дублирует мой. Вы точно туда смотрите/наводите?

Edited June 16, 2009 by Great Rash

dyadya · June 16, 2009

Навожу на menu 1 - появляется submenu 1.1 - навожу на него - появляется submenu 1.1.1 - навожу на него - поочереди пропали все.

В такой последовательности работает у меня... С setInterval submenu 1.1.1 пропадало сразу...

Сейчас буду уходить. Настройте Skype - покажу...

Edited June 16, 2009 by dyadya

Great Rash · June 16, 2009

Скайп настроить нет возиожности.

Навожу на menu 1 - появляется submenu 1.1 - навожу на него - появляется submenu 1.1.1 - навожу на него - поочереди пропали все.

Вот именно, а не должно ничего пропадать.

UPD:

Что-то так никто и не помог...

Ну да ничего Я понял, что я лошара! Все оказалось до тупого просто. Все сделал.

dyadya спасибо за ответы! (хоть и толку от них было не много, но все равно)

Edited June 16, 2009 by Great Rash

dyadya · June 17, 2009

"А ларчик просто открывался..." new Menu('q');new Menu('w'); - ?

Great Rash · June 17, 2009

Нет.

Надо было просто таймаут вешать не на глобальную переменную, а на элемент. И удалять, соответственно, с элемента.

Вот так:

		Menu.prototype.openItem = function(elem) {
			clearTimeout(elem.int);
			elem.getElementsByTagName('ul')[0].style.display = 'block';
		}

		Menu.prototype.closeItem = function(elem) {
			elem.int = setTimeout(function() { elem.getElementsByTagName('ul')[0].style.display = 'none'; }, this.timeout);
		}

Sign In

Помогите сделать выпадающее меню

Question

Link to comment

Share on other sites

14 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

Join the conversation

Обсуждения

Important Information