Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.08.2009, 17:58
Аватар для theo_
Аспирант
Отправить личное сообщение для theo_ Посмотреть профиль Найти все сообщения от theo_
 
Регистрация: 14.08.2009
Сообщений: 51

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

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

Есть горизонтальное меню
Код:
<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">
При наведении мышью на элемент верхнего меню, подменю появляется. Мышь отводим - исчезает. Как сделать так, чтобы подменю сразу не исчезало, а можно было выбрать его ссылки..

Заранее спасибо за помощь
Ответить с цитированием
  #2 (permalink)  
Старый 14.08.2009, 18:01
Аватар для B~Vladi
Модератор Всея Форума
Отправить личное сообщение для B~Vladi Посмотреть профиль Найти все сообщения от B~Vladi
 
Регистрация: 14.05.2009
Сообщений: 4,021

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

Выставляй таймер...
Ответить с цитированием
  #3 (permalink)  
Старый 14.08.2009, 18:13
Аватар для theo_
Аспирант
Отправить личное сообщение для theo_ Посмотреть профиль Найти все сообщения от theo_
 
Регистрация: 14.08.2009
Сообщений: 51

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

как я понял из гугля, надо использовать setTimeout и clearTimeout ?
Ответить с цитированием
  #4 (permalink)  
Старый 14.08.2009, 18:35
zzz zzz вне форума
Аспирант
Отправить личное сообщение для zzz Посмотреть профиль Найти все сообщения от zzz
 
Регистрация: 06.08.2009
Сообщений: 91

Да
Ответить с цитированием
  #5 (permalink)  
Старый 14.08.2009, 18:36
zzz zzz вне форума
Аспирант
Отправить личное сообщение для zzz Посмотреть профиль Найти все сообщения от zzz
 
Регистрация: 06.08.2009
Сообщений: 91

SetTimeout
Могу выслать вам свой код генерится полностью Явой легко изменяем и при наведении меняются параметры CSS
Ответить с цитированием
  #6 (permalink)  
Старый 14.08.2009, 20:30
Аватар для theo_
Аспирант
Отправить личное сообщение для theo_ Посмотреть профиль Найти все сообщения от theo_
 
Регистрация: 14.08.2009
Сообщений: 51

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

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

навел я мышкой на элемент меню, появилось подменю. мышку с пункта меню увожу, выполняю
Код:
timerID = setTimeout(hide(menu), 500);
только вот подменю убирается сразу, а не через 500мс

в чем может быть причина?
Ответить с цитированием
  #7 (permalink)  
Старый 14.08.2009, 20:47
Аватар для theo_
Аспирант
Отправить личное сообщение для theo_ Посмотреть профиль Найти все сообщения от theo_
 
Регистрация: 14.08.2009
Сообщений: 51

вообщем, что строка
Код:
timerID = setTimeout(hide(menu), 500);
что
Код:
hide(menu)
работают одинаково...

что я неправильно делаю?
Ответить с цитированием
  #8 (permalink)  
Старый 14.08.2009, 21:05
Аватар для theo_
Аспирант
Отправить личное сообщение для theo_ Посмотреть профиль Найти все сообщения от theo_
 
Регистрация: 14.08.2009
Сообщений: 51

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

Код:
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 сделать глобальной переменной, в итоге еще и в функции ее каждый раз приходится определять

Последний раз редактировалось theo_, 14.08.2009 в 21:32.
Ответить с цитированием
  #9 (permalink)  
Старый 14.08.2009, 21:36
Аватар для theo_
Аспирант
Отправить личное сообщение для theo_ Посмотреть профиль Найти все сообщения от theo_
 
Регистрация: 14.08.2009
Сообщений: 51

даже этот вот код работает неверно
Код:
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мс

однако оно может убраться и в момент, когда указатель мыши находится над ссылкой
Ответить с цитированием
  #10 (permalink)  
Старый 15.08.2009, 18:20
zzz zzz вне форума
Аспирант
Отправить личное сообщение для zzz Посмотреть профиль Найти все сообщения от zzz
 
Регистрация: 06.08.2009
Сообщений: 91

Можно полный код??
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выпадающее меню SunYang Общие вопросы Javascript 3 16.04.2009 22:18
Выпадающее меню ! Подскажите пожалуйста 123 Общие вопросы Javascript 0 08.01.2009 22:56
Сделать выпадающее меню по аналогу SerG Общие вопросы Javascript 1 05.11.2008 15:05
Выпадающее меню на css и javascript Jackky Общие вопросы Javascript 3 13.09.2008 18:30
выпадающее меню AniStark Общие вопросы Javascript 12 11.05.2008 20:24