Простое древовидное меню на основе списков
Дата публикации: Август 26, 2010 - 18:31:30, чт
Вашему вниманию представляю реализацию простого древовидного меню на основе списков html и JavaScript (кликните!).
Исходный код:
- var treeMenu = new Object();
- /* метод построения меню, в качестве treeId передаем
- id корневого ul-а */
- treeMenu.buildTree = function(treeId)
- {
- // получаем список всех ul-ов
- var ulList = document.getElementById(treeId).getElementsByTagName('ul');
- for (var i = 0; i < ulList.length; i++)
- {
- // и собственно обрабатываем их
- treeMenu.buildSubTree(treeId, ulList[i], i);
- }
- }
- treeMenu.buildSubTree = function(treeId, ulElement, index)
- {
- // в качестве статуса закрыто/открыто используем rel
- ulElement.parentNode.className = "submenu";
- ulElement.setAttribute('rel', 'closed');
- ulElement.style.display = 'none';
- // а это обработчик клика по li, в котором есть ul
- ulElement.parentNode.onclick = function(e)
- {
- var subMenu = this.getElementsByTagName('ul')[0];
- if (subMenu.getAttribute('rel') == 'closed')
- {
- subMenu.style.display = 'block';
- subMenu.setAttribute('rel', 'open');
- }
- else
- {
- subMenu.style.display = 'none';
- subMenu.setAttribute('rel', 'closed');
- }
- treeMenu.preventPropagation(e);
- }
- ulElement.onclick = function(e)
- {
- treeMenu.preventPropagation(e);
- }
- }
- /* метод предотвращает дальнейшее всплытие события вверх по
- иерархии DOM */
- treeMenu.preventPropagation = function(e)
- {
- if (typeof e != "undefined")
- {
- e.stopPropagation();
- }
- else
- {
- event.cancelBubble = true;
- }
- }
Пример:
p. s. Начал делать для себя в качестве замены для JQuery'овской менюхи.
Комментарии