Реализация всплывающего меню
Доброго времени суток, имеется меню древовидное, структура там такая что во всех пунктах неактивны стоит display:none, в активных если есть display:none отсутствует(это отрабатывается системой управления при переходе) есть задумка сделать чтобы при наведении на родительскую категорию отображались дочерние подкатегории (как бы раскрытие дерева при наведении) или банальное всплывающее меню сбоку. Есть какие идеи как это реализовать более грамотно желательно без серьезных изменений в структуре меню, т.е. подстроить под структуру, сперва думал сделать чистое css меню но все портит display:none не получилось по hover его включать, я так понимаю с ним только через скрипт работать нужно...
<ul> <li> <div class="link_container"> <a href="#">Главная категория</a> </div> </li> <ul id="c1"> <li> <div class="link_container"> <a href="#">Подкатегория 1</a> </div> </li> <ul id="c2"> <li> <div class="link_container"><a href="#">Подкатегория 1.1</a></div> </li> <ul style="display:none" id="c3"> <li> <div class="link_container"><a href="#">Подкатегория 1.1.1</a></div> </li> <li> <div class="link_container"><a href="#">Подкатегория 1.1.2</a></div> </li> </ul> <li> <div class="link_container"><a href="#">Подкатегория 1.2</a></div> </li> </ul> <li> <div class="link_container"> <a href="#">Подкатегория 2</a> </div> </li> <ul style="display:none" id="c7"> <li> <div class="link_container"><a href="#">Подкатегория 2.1</a></div> </li> <li> <div class="link_container"><a href="#">Подкатегория 2.2</a></div> </li> </ul> </ul> </ul> |
Цитата:
|
указывается прям в коде системы управления при генерации меню <ul style="display:none" id="c7">
|
Цитата:
|
да я понял, вообщем очистил код от шелухи сделал через скрипт, одно не могу понять как закрывать при перемещении по Подкатегориям 1.1, 1.2 и т.д. остальные открытые, наводить повторно для скрытия не нравится, а так получается при перемещении по меню оно все раскрывается...
<script type="text/javascript"> function iblock(cellid, blockid){ var a = document.getElementById(cellid); if (a.style.display=="none") a.style.display="block"; /*else a.style.display="none";*/ var b = document.getElementById(blockid); /*для себя)*/ } </script> <ul class="nav"> <li><a href="#">Главная категория</a></li> <ul id="c1"> <li><a onmouseover="iblock('c2','b2');" href="#">Подкатегория 1</a></li> <ul id="c2"> <li><a onmouseover="iblock('c3','b3');" href="#">Подкатегория 1.1</a></li> <ul style="display:none" id="c3"> <li><a href="#">Подкатегория 1.1.1</a></li> <li><a href="#">Подкатегория 1.1.2</a></li> </ul> <li><a href="#">Подкатегория 1.2</a></li> </ul> <li><a onmouseover="iblock('c4','b4');" href="#">Подкатегория 2</a></li> <ul style="display:none" id="c4"> <li><a href="#">Подкатегория 2.1</a></li> <li><a href="#">Подкатегория 2.2</a></li> </ul> <li><a onmouseover="iblock('c5','b5');" href="#">Подкатегория 2</a></li> <ul style="display:none" id="c5"> <li><a href="#">Подкатегория 2.1</a></li> <li><a href="#">Подкатегория 2.2</a></li> </ul> </ul> </ul> |
Цитата:
|
Часовой пояс GMT +3, время: 02:42. |