Выпадающее меню на Javascript. Как убирать меню при отводе указателя мыши?

clavin · July 12, 2009

Делаю такое простое меню для выбора города. В элементе div с названием gorod_div содержится само всплывающее меню. Изначально оно у меня скрыто и появляется только при клике на соответствующий текст.


<div style="font-weight: bold; color: rgb(255, 255, 255); background-color:red;">
<span style="background-color:blue;" name="gorod_all" id="gorod_all" onclick="func_gorod_all();">
выбрать город
</span>
</div>

<div style="display:none; width:100px; height:100px; position:absolute; left:600px; background-color:red;"
name="gorod_div" id="gorod_div" onmouseout="func_gorod_hide();">
<a href="" style="display:block;">Москва</a>
<a href="" style="display:block;">Санкт-Петербург</a>
<a href="" style="display:block;">другие города</a>
</div>

Это функции, убирающие и показывающие меню.


function func_gorod_all()
{
var left_pos=document.getElementById('gorod_all').offsetLeft;
document.getElementById('gorod_div').style.display="block";
document.getElementById('gorod_div').style.left=left_pos;
}

function func_gorod_hide()
{
document.getElementById('gorod_div').style.display="none";
}

Возникает проблема при убирании этого меню. По нормальному надо, чтобы при любом положении мыши над этим выпадающим меню (div с id="gorod_div") меню отображалось, а убиралось только тогда, когда мышь уходит за пределы элемента div. Но на самом деле меню скрывается, когда указатель мыши отводится от теста (я это исправил, введя для ссылок style="display:block;"). Но все равно получается браузеры "считают", что событие onmouseout назначено для каждой ссылки в отдельности. Не получается свободное перемещение указателя мыши по всем ссылкам меню. Меню закрывается при событии onmouseout для каждой ссылки в отдельности. Как делаются меню в таких случаях?

Edited July 12, 2009 by clavin

Veseloff · July 12, 2009

1. У тега DIV не бывает параметра name.

2. Проблема решается добавлением onMouseOver="this.style.display='block';" для блока gorod_div

clavin · July 13, 2009

1. У тега DIV не бывает параметра name.
2. Проблема решается добавлением onMouseOver="this.style.display='block';" для блока gorod_div

1. Для кроссбраузерности рекомендуется назначать атрибутам name и id одинаковые имена. Лишним не будет...

2. А у меня разве не так? Этот блок отображается как блочный элемент и затем, я думаю, должен оставаться блочным.

Просмотрел кучу скриптов выпадающих меню и у всех почему-то работает как надо :blink:

Great Rash · July 13, 2009

Для кроссбраузерности рекомендуется назначать атрибутам name и id одинаковые имена. Лишним не будет...

У тега <div> нет атрибута name. Как вы хотите обеспечить кроссбраузернось невалидным кодом? Чем вас не устраивает id?

UPD: Вот накидал по быстрому, разбирайтесь:

<?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>An XHTML 1.0 Strict standard template</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;
		}

		body {
			margin: 10px;
		}

		ul {
			list-style: none;
		}

		li {
			position: relative;
			float: left;
			padding: 5px 10px;
			border: 1px solid;
		}

		li ul {
			position: absolute;
			display: none;
			top: 100%;
			left: -1px;
			border: 1px solid;
		}

		li li {
			float: none;
			border: none;
		}
	</style>
	<script type="text/javascript">
		function showMenu() {
			var top = document.getElementById('menu');
			var topLinks = top.getElementsByTagName('li');

			for (var i in topLinks) {
				if (topLinks[i].parentNode == top) {
					topLinks[i].onmouseover = function() {
						if (this.getElementsByTagName('ul')[0]) {
							this.getElementsByTagName('ul')[0].style.display = 'block';
						}
					}

					topLinks[i].onmouseout = function() {
						this.getElementsByTagName('ul')[0].style.display = 'none';
					}
				}
			}
		}

		window.onload = showMenu;
	</script>
</head>

<body>

	<ul id="menu">
		<li>
			<a href="/">top</a>
			<ul>
				<li><a href="/">sub</a></li>
				<li><a href="/">sub</a></li>
				<li><a href="/">sub</a></li>
				<li><a href="/">sub</a></li>
				<li><a href="/">sub</a></li>
			</ul>
		</li>
		<li>
			<a href="/">top</a>
		</li>
		<li>
			<a href="/">top</a>
			<ul>
				<li><a href="/">sub</a></li>
				<li><a href="/">sub</a></li>
				<li><a href="/">sub</a></li>
				<li><a href="/">sub</a></li>
				<li><a href="/">sub</a></li>
			</ul>
		</li>
		<li>
			<a href="/">top</a>
		</li>
	</ul>

</body>
</html>

Edited July 13, 2009 by Great Rash

clavin · July 15, 2009

В библии Javascript говорится, чтобы обеспечить совместимость с будущими версиями javascript, лучше назначать два атрибута id и name. Хотя ещё не разу не проверял свой код на валидность javascript (если есть такие валидаторы).

Razor · July 15, 2009

А какого года книга?

clavin · July 16, 2009

А какого года книга?

Старая... год не знаю

Great Rash · July 16, 2009

Короче купите новую книгу ибо цитата про id, name и совместимость с будующими версиями - бред.

Sign In

Выпадающее меню на Javascript. Как убирать меню при отводе указателя мыши?

Question

clavin

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

Veseloff

Link to comment

Share on other sites

clavin

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

clavin

Link to comment

Share on other sites

Razor

Link to comment

Share on other sites

clavin

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information