Древовидное меню
пример работы скрипта:
пример html-кода:
<style type="text/css">
.ls { margin-left: 16px; }
.lsbg { margin-left: 16px; background: url(article/dot.gif) repeat-y bottom left; }
a.mi { font: 11px tahoma; color: #000; text-decoration: none; cursor: pointer; }
a.miact { font: bold 11px tahoma; color: #000; text-decoration: none; cursor: pointer}
img.ico { width: 32px; height: 16px; margin-right: 5px;}
</style>
<script type="text/javascript">
var active = null;
function addItem(oid, text, pid, url)
{
pid = document.getElementById(pid);
if (pid.getElementsByTagName("span").length == 0) pid = createTag("span", pid);
else pid = pid.getElementsByTagName("span")[0];
mi = createTag("div", pid);
mi.id = oid;
miImg = createTag("img", mi);
miImg.align = "absbottom";
miImg.className = "ico";
mia = createTag("a", mi);
mia.innerHTML = text;
mia.className = "mi";
mia.onclick = function (e) { mi_click(e) };
mia.onfocus = function (e) { mi_focus(e) };
if (url != null) mia.href = url;
createTag("br", mi);
}
function createTag(tag, pel)
{
el = document.createElement(tag);
return pel.appendChild(el);
}
function initMenu(act)
{
root = document.getElementById("menu");
els = root.getElementsByTagName("a");
for (i=0; i<els.length; i++)
{
els[i].parentNode.className = els[i].parentNode.nextSibling != null ? "lsbg" : "ls";
img = els[i].parentNode.getElementsByTagName("img")[0];
if (els[i].parentNode.getElementsByTagName("span")[0] != null)
{
els[i].parentNode.getElementsByTagName("span")[0].style.display = 'none';
img.src = "article/fol+.gif";
img.onclick = function (e) { img_click(e) };
}
else
img.src = els[i].parentNode.nextSibling != null ? "article/file.gif" : "article/file_end.gif";
}
if (act != null) node_open(act);
}
function mi_click(e)
{
obj = eventHandler(e);
node_activate(obj);
if ((node = obj.parentNode.getElementsByTagName("span")[0]) == null) return;
if (node.style.display != "block")
{
node.style.display = "block";
obj.parentNode.firstChild.src = "article/fol-.gif";
}
}
function img_click(e)
{
obj = eventHandler(e);
if ((node=obj.parentNode.getElementsByTagName("span")[0]) == null) return;
if (node.style.display != "block")
{
node.style.display = "block";
obj.src = "article/fol-.gif";
}
else
{
node.style.display = "none";
obj.src = "article/fol+.gif";
}
}
function mi_focus(e)
{
obj = eventHandler(e);
obj.blur();
}
function node_open(node_id)
{
if ((node = document.getElementById(node_id)) == null) return;
node_activate(node.getElementsByTagName("a")[0]);
while (node.id != "0")
{
node = node.parentNode;
node.style.display = "block";
if(node.tagName == "DIV") node.getElementsByTagName("img")[0].src = "article/fol-.gif";
}
}
function node_activate(node_a)
{
if (active!=null) active.className = 'mi';
active = node_a;
active.className += 'act';
}
function eventHandler(e)
{
return window.event ? window.event.srcElement : e.currentTarget;
}
</script>
<div id="menu"></div>
<script type="text/javascript">
window.onload = function ()
{
addItem("0", "Создание сайтов", "menu");
addItem("01", "Разработка веб-сайта", "0", "/web/");
addItem("02", "Веб-дизайн сайта", "0", "/web/web.php");
addItem("1", "В помощь Веб-мастеру", "menu");
addItem("11", "Справочник HTML", "1", "/article/1.html");
addItem("111", "Дескрипторы HTML", "11", "/article/6.html");
addItem("1111", "Списки (маркеры)", "111", "/article/14.html");
addItem("1112", "Форматирование текста", "111", "/article/12.html");
addItem("1113", "Вставка мультимедиа-файлов", "111", "/article/15.html");
addItem("112", "Приложения", "11", "/article/8.html");
addItem("113", "XHTML1.0", "11", "/article/120.html");
addItem("12", "Свойства CSS", "1", "/article/2.html");
addItem("121", "Фильтры CSS", "12", "/article/17.html");
addItem("122", "Псевдоэлементы", "12", "/article/21.html");
addItem("123", "Свойства таблиц", "12", "/article/27.html");
addItem("2", "Программы для создания сайта", "menu");
addItem("21", "PHP скрипты", "2", "/soft/54.html");
addItem("22", "Офисные программы", "2", "/soft/55.html");
initMenu("18");
}
</script>
просмотров: 9050
