Javascript-форум - Выпадающее меню

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Выпадающее меню (https://javascript.ru/forum/misc/4708-vypadayushhee-menyu.html)

Выпадающее меню

Всем привет, заранее извиняюсь за боянность темы :write:

Но хотелось бы самому во всем разобраться, а не использовать тупо чужие скрипты.

Есть горизонтальное меню

Код:

<div id="top_menu">

в нем расположены пункты меню, вот пример ссылки на главную страницу

Код:

<a class="top_menu_item" href="#" onmouseover="show_sub_menu()" onmouseout="hide_sub_menu()"><p class="top_menu_item_title">Главная</p></a>

ниже идет подменю, которое в обычном состоянии скрыто

Код:

<div id="top_submenu">

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

Заранее спасибо за помощь

Цитата:

Сообщение от theo_

Но хотелось бы самому во всем разобраться, а не использовать тупо чужие скрипты.

Мне уже нравицо:)

Выставляй таймер...

B~Vladi, спасибо большое

как я понял из гугля, надо использовать setTimeout и clearTimeout ?

SetTimeout
Могу выслать вам свой код генерится полностью Явой легко изменяем и при наведении меняются параметры CSS

пришлось отвлечься :-E

zzz, спасибо, но мне хочется просто понять логику работы.

навел я мышкой на элемент меню, появилось подменю. мышку с пункта меню увожу, выполняю

Код:

timerID = setTimeout(hide(menu), 500);

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

в чем может быть причина?

вообщем, что строка

Код:

timerID = setTimeout(hide(menu), 500);

что

Код:

hide(menu)

работают одинаково...

что я неправильно делаю?

вот такой вот скрипт получился:

Код:

var timerID = false;



function show_sub_menu()

{

  var menu = document.getElementById("top_submenu");

  menu.style.visibility = "visible";

  menu.onmouseover = "cancel_hide()";

  menu.onmouseout = "hide()";

}

function hide_sub_menu()

{

  var menu = document.getElementById("top_submenu");

  timerID = setTimeout(hide, 500);

}

function cancel_hide()

{

  var menu = document.getElementById("top_submenu");

  menu.style.visibility = "visible";

  clearTimeout(timerID);

}

function hide()

{

  var menu = document.getElementById("top_submenu");

  menu.style.visibility = "hidden";

}

не получается menu сделать глобальной переменной, в итоге еще и в функции ее каждый раз приходится определять

даже этот вот код работает неверно

Код:

var timerID = false;



function show_sub_menu()

{

  var menu = document.getElementById("top_submenu");

  menu.style.visibility = "visible";

}

function hide_sub_menu()

{

  var menu = document.getElementById("top_submenu");

  timerID = setTimeout(hide, 500);

}

function hide()

{

  var menu = document.getElementById("top_submenu");

  menu.style.visibility = "hidden";

}

смысл в нем, чтобы меню убиралось с задержкой 500мс

однако оно может убраться и в момент, когда указатель мыши находится над ссылкой:blink:

Можно полный код??