[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Создание главного меню с выбором категории
Страницы: 1, 2
skolozhabskiy
добрый день,

необходима помощь в создании главного меню. задача при выделении ссылки, например, "Раздел-1" должен открываться блок с подменю или категориями (например, div с именем "node1") и иметь возможность переноса курсора на этот блок для выбора категории. блок (например, "node1") должен закрываться только при переходе на другую ссылку или когда курсор покидает блок категорий (подменю). Видимость блока с категориями (например, "node1") определяется добавлением класса " active" к div с именем "node1" и удаления класса "hidden" от div с именем "drop_menu_top".


<script type="text/javascript">
$(function() {
var index
, interval;

var flip = function(index) {
$('div[name="node'+index+'"]').removeClass("active");
$('div[name="node'+index+'"] div[name="drop_menu_top"]').addClass("hidden");
};

$('div[name="action_elements"] ul li a, div[name="drop_menu_top"]:not(.hidden)').live('mouseover mouseout', function(event) {
index = $(this).parent('li').index()+1;

if (event.type == 'mouseover') {
// do something on mouseover
$('div[name="node'+index+'"]').addClass("active");
$('div[name="node'+index+'"] div[name="drop_menu_top"]').removeClass("hidden");
interval = clearInterval(interval);
} else {
// do something on mouseout
interval = setInterval(flip(index), 5000);
}
}
);
});
</
script>



<div class="main-menu" name="action_elements">
<ul>
<li><a
href="">Раздел-1</a></li>
<li><a
href="">Раздел-2</a></li>
</ul>
<div
name="node1" class="">
<div
class="box-border hidden" name="drop_menu_top">
// содержимое первого раздела с категориями
</div>
</div>
<div
name="node2" class="">
<div
class="box-border hidden" name="drop_menu_top">
// содержимое второго раздела с категориями
</div>
</div>
</div>



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

спасибо за помощь.
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.