Jump to content
  • 0

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


clavin
 Share

Question

Делаю такое простое меню для выбора города. В элементе 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 by clavin
Link to comment
Share on other sites

7 answers to this question

Recommended Posts

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

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

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

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

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

Link to comment
Share on other sites

  • 0
Для кроссбраузерности рекомендуется назначать атрибутам 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 by Great Rash
Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy