VPF::убрать div, если onclick вне div'а - Форум программистов

bel_nikita

Дата 2.4.2010, 23:51 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Эксперт
Сообщений: 2304
Регистрация: 12.10.2003
Где: Поезд №21/22 ( ст . Прага )

Репутация: нет
Всего: 47

По onclick показываем <div id="megamenu1">. Проблема убрать <div id="megamenu1">, если onclick происходит вне div'а, ну или курсор вышел за пределы div'а.

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="jkmegamenu.css" />
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<script type="text/javascript">

</script>
<title>Untitled Document</title>
</head>

<body>

<!--Mega Menu Anchor-->
<a href="#" onclick="$('megamenu1').appear(); return false;">Click here for a demo!</a></li>
<a href="#" onclick="$('megamenu1').hide(); return false;">Reset</a>

<!--Mega Drop Down Menu HTML. Retain given CSS classes-->
<div id="megamenu1" class="megamenu" style="display:none;" onmouseout="$('megamenu1').hide(); return false;" >

<div class="column">
    <h3>Web Development</h3>
    <ul>
    <li><a href="#">JavaScript Kit</a></li>
    <li><a href="#">Dynamic Drive</a></li>
    <li><a href="#">CSS Drive</a></li>
    <li><a href="#">Coding Forums</a></li>
    <li><a href="#">DOM Reference</a></li>
    </ul>
</div>

<div class="column">
    <h3>News Related</h3>
    <ul>
    <li><a href="#">CNN</a></li>
    <li><a href="#">MSNBC</a></li>
    <li><a href="#">Google</a></li>
    <li><a href="#">BBC News</a></li>
    </ul>
</div>

<div class="column">
    <h3>Technology</h3>
    <ul>
    <li><a href="#">News.com</a></li>
    <li><a href="#">SlashDot</a></li>
    <li><a href="#">Digg</a></li>
    <li><a href="#">Tech Crunch</a></li>
    </ul>
</div>

<br style="clear: left" /> <!--Break after 3rd column. Move this if desired-->

<div class="column">
    <h3>Web Development 2</h3>
    <ul>
    <li><a href="#">JavaScript Kit</a></li>
    <li><a href="#">Dynamic Drive</a></li>
    <li><a href="#">CSS Drive</a></li>
    <li><a href="#">Coding Forums</a></li>
    <li><a href="#">DOM Reference</a></li>
    </ul>
</div>

<div class="column">
    <h3>News Related</h3>
    <ul>
    <li><a href="#">CNN</a></li>
    <li><a href="#">MSNBC</a></li>
    <li><a href="#">Google</a></li>
    <li><a href="#">BBC News</a></li>
    </ul>
</div>

<div class="column">
    <h3>Technology 2</h3>
    <ul>
    <li><a href="#">News.com</a></li>
    <li><a href="#">SlashDot</a></li>
    <li><a href="#">Digg</a></li>
    <li><a href="#">Tech Crunch</a></li>
    </ul>
</div>

</div>

</body>
</html>

Код


.megamenu{
position: absolute;
left: 0;
top: 30px;
background: white;
border: 1px solid #f06b24;
border-width: 5px 1px;
padding: 10px;
font: normal 12px Verdana;
z-index: 100;

}

.megamenu .column{
float: left;
width: 180px; /*width of each menu column*/
margin-right: 5px;
}

.megamenu .column ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.megamenu .column ul li{
padding-bottom: 5px;
}

.megamenu .column h3{
background: #e0e0e0;
font: bold 13px Arial;
margin: 0 0 5px 0;
}

.megamenu .column ul li a{
text-decoration: none;
}

.megamenu .column ul li a:hover{
color: red;
}

--------------------

— регистрация доменов от 150 руб.

segrey

Дата 3.4.2010, 01:45 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 54
Регистрация: 26.12.2006

Репутация: нет
Всего: нет

Для закрытия ловить клик на документе. А в обработчике клика по диву делать stopPropagation() чтобы событие повторно в документ не просачивалось (если не надо).

bel_nikita

Дата 4.4.2010, 20:54 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Эксперт
Сообщений: 2304
Регистрация: 12.10.2003
Где: Поезд №21/22 ( ст . Прага )

Репутация: нет
Всего: 47

Сделал так

Код


<script type="text/javascript">
 $('click1').observe('click', function(event){
  $('megamenu1').appear();
 });

Event.observe(document, 'click', function(event) {
  var element = $( Event.element(event) );
  //alert(element.tagName+element.id+Event.pointerX);
  if ('megamenu1' != element.id)
    $('megamenu1').hide();
});
 </script>

Но как реализовать onmouse корректно?

--------------------

— регистрация доменов от 150 руб.

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »