Очень нужна помощь.
Может кто-нибудь подкинет скрипт выпадающего меню (вертикального или горизонтального). Порылся в инете, но почему-то так и не нашел ничего
интересного (то слишком сложно, а я не очень-то знаю java, то слишком коряво). Если кто-то сможет подкинуть несложный скрипт в котором можно было
разобраться (поменять цвета, размеры, добавить или удалить пункты меню), был бы очень признателен!
Спустя 11 часов, 2 минуты, 58 секунд (30.07.2007 - 11:36) AlexBB написал(а):
menu.js
crossbrowsers.js
index.html
Код
function push(value, stack)
{
stack[stack.length] = value;
}
function pop(stack)
{
if (stack.length == 0) return false;
var ret = stack[stack.length - 1];
stack.length--;
return ret;
}
function menu_SetBgColor(nodenum)
{
this.overnode = nodenum;
var curnode = GetById('tr_' + this.instance + '_' + nodenum);
curnode.style.background = this.overBgColor;
}
function menu_RestoreBgColor(nodenum)
{
this.overnode = -1;
var curnode = GetById('tr_' + this.instance + '_' + nodenum);
curnode.style.background = this.outBgColor;
}
function menu_GetNode(nodenum)
{
var struct = (menu_GetNode.arguments.length == 1) ? this.struct : menu_GetNode.arguments[1];
var result = false;
for(var i=0; i<struct.length; i++)
{
if (struct[i]['nodenum'] == nodenum)
{
return struct[i];
}
if (struct[i]['child'] != null)
{
result = this.GetNode(nodenum, struct[i]['child']);
if (result != false) return result;
}
}
return result;
}
function menu_Hide()
{
var stacklength = this.stack.length;
for(var i=0; i<stacklength; i++)
{
var curmenu = pop(this.stack);
var struct = this.GetNode(this.overnode);
if ((curmenu != this.overnode) && (struct['menunum'] != curmenu))
{
GetById('table_' + this.instance + '_' + curmenu).style.visibility = 'hidden';
this.lefttoright = true;
}
else
{
push(curmenu, this.stack);
return;
}
}
}
function menu_Show(nodenum)
{
if (!this.run) return false;
this.SetBgColor(nodenum);
this.Hide();
for(var i=0; i<this.stack.length; i++)
{
if (this.stack[i] == nodenum) return;
}
this.overnode = nodenum;
var showmenu = GetById('table_' + this.instance + '_' + nodenum);
if (!showmenu) return;
push(nodenum, this.stack);
var struct = this.GetNode(nodenum);
var curmenu = GetById('table_' + this.instance + '_' + struct['menunum']);
var curnode = GetById('tr_' + this.instance + '_' + nodenum, curmenu.document);
if (this.isIe)
{
if (menu_Show.arguments.length == 2)
{
GetById(menu_Show.arguments[1]).style.height = 0;
}
curmenu.style.height = 0;
curnode.style.height = 0;
}
var y = (menu_Show.arguments.length == 2) ? GetById(menu_Show.arguments[1]).offsetTop + this.firstLevelOffsetY : curmenu.offsetTop + curnode.offsetTop + this.otherLevelOffsetY;
if (menu_Show.arguments.length == 2)
{
var x = GetById(menu_Show.arguments[1]).offsetLeft + this.firstLevelOffsetX;
}
else
{
var rightlimit = curmenu.offsetLeft + curmenu.offsetWidth + showmenu.offsetWidth;
if (rightlimit > document.body.clientWidth) this.lefttoright = false;
var leftlimit = curmenu.offsetLeft - showmenu.offsetWidth;
if (leftlimit < 0) this.lefttoright = true;
if (this.lefttoright)
{
var x = curmenu.offsetLeft + curmenu.offsetWidth + this.otherLevelOffsetX;
}
else
{
var x = leftlimit + 1;
}
}
showmenu.style.left = x;
showmenu.style.top = y;
showmenu.style.visibility = 'visible';
}
function menu_Out(nodenum)
{
if (!this.run) return false;
this.RestoreBgColor(nodenum);
clearTimeout(this.timeout);
this.timeout = setTimeout(this.instance + '.Hide()', this.overTimeout);
}
function menu_Run()
{
this.run = true;
var firstlevel = (menu_Run.arguments.length == 0);
var struct = firstlevel ? this.struct : menu_Run.arguments[0];
var tableid = firstlevel ? -1 : menu_Run.arguments[1];
this.tmpcreatemenu[this.menucounter] = '<div id="table_' + this.instance + '_' + tableid + '" style="position:absolute; z-index:' + this.menucounter + ';visibility:hidden">';
this.tmpcreatemenu[this.menucounter] += '<table border="0" cellspacing="0" cellpadding="0" class="popup">';
for(var i=0; i<struct.length; i++)
{
this.tmpcreatemenu[this.menucounter] += '<tr bgcolor="' + this.outBgColor + '" onmouseover="' + this.instance + '.Show(' + struct[i]['nodenum'] + ')" onmouseout="' + this.instance + '.Out(' + struct[i]['nodenum'] + ')">';
this.tmpcreatemenu[this.menucounter] += '<td><div style="width:100%; position:relative;" id="tr_' + this.instance + '_' + struct[i]['nodenum'] + '">' + struct[i]['text'] + '</div></td>';
struct[i]['menunum'] = tableid;
if (struct[i]['child'] != null)
{
this.menucounter++;
this.Run(struct[i]['child'], struct[i]['nodenum']);
}
this.tmpcreatemenu[this.menucounter] += '</tr>';
}
this.tmpcreatemenu[this.menucounter] += '</table></div>';
WriteHtml(this.tmpcreatemenu[this.menucounter]);
this.menucounter--;
}
function menu_AddNode(text, parnum)
{
if (parnum == null)
{
var rootlength = this.struct.length;
this.struct[rootlength] = new Array(4);
this.struct[rootlength]['text'] = text;
this.struct[rootlength]['nodenum'] = this.curnode;
this.struct[rootlength]['child'] = null;
this.struct[rootlength]['menunum'] = -1;
}
else
{
var struct = this.GetNode(parnum);
var tmparr = new Array(4);
tmparr['text'] = text;
tmparr['nodenum'] = this.curnode;
tmparr['child'] = null;
tmparr['menunum'] = -1;
if (struct['child'] == null)
{
struct['child'] = new Array();
}
curlength = struct['child'].length;
struct['child'][curlength] = tmparr;
}
return this.curnode++;
}
function Menu(instance)
{
// Параметры конструктора
this.instance = instance;
// Private переменные
this.isIe = navigator.appName == "Microsoft Internet Explorer";
this.struct = new Array();
this.tmpcreatemenu = new Array();
this.menucounter = 0;
this.curnode = 0; // Уникальный идентификатор узла
this.lefttoright = true;
this.stack = new Array();
this.overnode = -1;
this.timeout = 0;
this.overTimeout = 1500;
this.firstLevelOffsetX = -1;
this.firstLevelOffsetY = -1;
this.otherLevelOffsetX = -1;
this.otherLevelOffsetY = -1;
this.overBgColor = '#FF0000';
this.overBgPos = "right";
this.overBgRep = "no-repeat";
this.outBgColor = '#CCCCCC';
this.padding_left = '11px';
this.run = false;
// Private методы
this.Hide = menu_Hide;
this.GetNode = menu_GetNode;
this.SetBgColor = menu_SetBgColor;
this.RestoreBgColor = menu_RestoreBgColor;
// Public методы
this.AddNode = menu_AddNode;
this.Run = menu_Run;
this.Show = menu_Show;
this.Out = menu_Out;
}
{
stack[stack.length] = value;
}
function pop(stack)
{
if (stack.length == 0) return false;
var ret = stack[stack.length - 1];
stack.length--;
return ret;
}
function menu_SetBgColor(nodenum)
{
this.overnode = nodenum;
var curnode = GetById('tr_' + this.instance + '_' + nodenum);
curnode.style.background = this.overBgColor;
}
function menu_RestoreBgColor(nodenum)
{
this.overnode = -1;
var curnode = GetById('tr_' + this.instance + '_' + nodenum);
curnode.style.background = this.outBgColor;
}
function menu_GetNode(nodenum)
{
var struct = (menu_GetNode.arguments.length == 1) ? this.struct : menu_GetNode.arguments[1];
var result = false;
for(var i=0; i<struct.length; i++)
{
if (struct[i]['nodenum'] == nodenum)
{
return struct[i];
}
if (struct[i]['child'] != null)
{
result = this.GetNode(nodenum, struct[i]['child']);
if (result != false) return result;
}
}
return result;
}
function menu_Hide()
{
var stacklength = this.stack.length;
for(var i=0; i<stacklength; i++)
{
var curmenu = pop(this.stack);
var struct = this.GetNode(this.overnode);
if ((curmenu != this.overnode) && (struct['menunum'] != curmenu))
{
GetById('table_' + this.instance + '_' + curmenu).style.visibility = 'hidden';
this.lefttoright = true;
}
else
{
push(curmenu, this.stack);
return;
}
}
}
function menu_Show(nodenum)
{
if (!this.run) return false;
this.SetBgColor(nodenum);
this.Hide();
for(var i=0; i<this.stack.length; i++)
{
if (this.stack[i] == nodenum) return;
}
this.overnode = nodenum;
var showmenu = GetById('table_' + this.instance + '_' + nodenum);
if (!showmenu) return;
push(nodenum, this.stack);
var struct = this.GetNode(nodenum);
var curmenu = GetById('table_' + this.instance + '_' + struct['menunum']);
var curnode = GetById('tr_' + this.instance + '_' + nodenum, curmenu.document);
if (this.isIe)
{
if (menu_Show.arguments.length == 2)
{
GetById(menu_Show.arguments[1]).style.height = 0;
}
curmenu.style.height = 0;
curnode.style.height = 0;
}
var y = (menu_Show.arguments.length == 2) ? GetById(menu_Show.arguments[1]).offsetTop + this.firstLevelOffsetY : curmenu.offsetTop + curnode.offsetTop + this.otherLevelOffsetY;
if (menu_Show.arguments.length == 2)
{
var x = GetById(menu_Show.arguments[1]).offsetLeft + this.firstLevelOffsetX;
}
else
{
var rightlimit = curmenu.offsetLeft + curmenu.offsetWidth + showmenu.offsetWidth;
if (rightlimit > document.body.clientWidth) this.lefttoright = false;
var leftlimit = curmenu.offsetLeft - showmenu.offsetWidth;
if (leftlimit < 0) this.lefttoright = true;
if (this.lefttoright)
{
var x = curmenu.offsetLeft + curmenu.offsetWidth + this.otherLevelOffsetX;
}
else
{
var x = leftlimit + 1;
}
}
showmenu.style.left = x;
showmenu.style.top = y;
showmenu.style.visibility = 'visible';
}
function menu_Out(nodenum)
{
if (!this.run) return false;
this.RestoreBgColor(nodenum);
clearTimeout(this.timeout);
this.timeout = setTimeout(this.instance + '.Hide()', this.overTimeout);
}
function menu_Run()
{
this.run = true;
var firstlevel = (menu_Run.arguments.length == 0);
var struct = firstlevel ? this.struct : menu_Run.arguments[0];
var tableid = firstlevel ? -1 : menu_Run.arguments[1];
this.tmpcreatemenu[this.menucounter] = '<div id="table_' + this.instance + '_' + tableid + '" style="position:absolute; z-index:' + this.menucounter + ';visibility:hidden">';
this.tmpcreatemenu[this.menucounter] += '<table border="0" cellspacing="0" cellpadding="0" class="popup">';
for(var i=0; i<struct.length; i++)
{
this.tmpcreatemenu[this.menucounter] += '<tr bgcolor="' + this.outBgColor + '" onmouseover="' + this.instance + '.Show(' + struct[i]['nodenum'] + ')" onmouseout="' + this.instance + '.Out(' + struct[i]['nodenum'] + ')">';
this.tmpcreatemenu[this.menucounter] += '<td><div style="width:100%; position:relative;" id="tr_' + this.instance + '_' + struct[i]['nodenum'] + '">' + struct[i]['text'] + '</div></td>';
struct[i]['menunum'] = tableid;
if (struct[i]['child'] != null)
{
this.menucounter++;
this.Run(struct[i]['child'], struct[i]['nodenum']);
}
this.tmpcreatemenu[this.menucounter] += '</tr>';
}
this.tmpcreatemenu[this.menucounter] += '</table></div>';
WriteHtml(this.tmpcreatemenu[this.menucounter]);
this.menucounter--;
}
function menu_AddNode(text, parnum)
{
if (parnum == null)
{
var rootlength = this.struct.length;
this.struct[rootlength] = new Array(4);
this.struct[rootlength]['text'] = text;
this.struct[rootlength]['nodenum'] = this.curnode;
this.struct[rootlength]['child'] = null;
this.struct[rootlength]['menunum'] = -1;
}
else
{
var struct = this.GetNode(parnum);
var tmparr = new Array(4);
tmparr['text'] = text;
tmparr['nodenum'] = this.curnode;
tmparr['child'] = null;
tmparr['menunum'] = -1;
if (struct['child'] == null)
{
struct['child'] = new Array();
}
curlength = struct['child'].length;
struct['child'][curlength] = tmparr;
}
return this.curnode++;
}
function Menu(instance)
{
// Параметры конструктора
this.instance = instance;
// Private переменные
this.isIe = navigator.appName == "Microsoft Internet Explorer";
this.struct = new Array();
this.tmpcreatemenu = new Array();
this.menucounter = 0;
this.curnode = 0; // Уникальный идентификатор узла
this.lefttoright = true;
this.stack = new Array();
this.overnode = -1;
this.timeout = 0;
this.overTimeout = 1500;
this.firstLevelOffsetX = -1;
this.firstLevelOffsetY = -1;
this.otherLevelOffsetX = -1;
this.otherLevelOffsetY = -1;
this.overBgColor = '#FF0000';
this.overBgPos = "right";
this.overBgRep = "no-repeat";
this.outBgColor = '#CCCCCC';
this.padding_left = '11px';
this.run = false;
// Private методы
this.Hide = menu_Hide;
this.GetNode = menu_GetNode;
this.SetBgColor = menu_SetBgColor;
this.RestoreBgColor = menu_RestoreBgColor;
// Public методы
this.AddNode = menu_AddNode;
this.Run = menu_Run;
this.Show = menu_Show;
this.Out = menu_Out;
}
crossbrowsers.js
Код
// Вывод кода, содержащегося в параметре html в текущий документ (в случае задания параметра doc в его документ)
function WriteHtml(html, doc)
{
switch(navigator.appName)
{
case "Netscape":
case "Gecko":
case "Mozilla":
var r = ((doc) ? doc : document.body ).ownerDocument.createRange();
r.setStartBefore(((doc) ? doc : document.body ));
var parsedHTML = r.createContextualFragment(html);
((doc) ? doc : document.body ).insertBefore(parsedHTML, ((doc) ? doc : document.body ).firstChild);
break;
case "Microsoft Internet Explorer":
case "Opera":
document.body.insertAdjacentHTML("AfterBegin", html);
break;
}
}
// Возвращает объект узла по идентификатору в текущем документе (в случае задания параметра doc он определяет документ)
function GetById(id, doc)
{
switch(navigator.appName)
{
case "Netscape":
case "Gecko":
case "Mozilla":
return (doc) ? doc.getElementById(id) : document.getElementById(id);
break;
case "Microsoft Internet Explorer":
case "Opera":
return (doc) ? doc.all[id] : document.all[id];
break;
}
}
function WriteHtml(html, doc)
{
switch(navigator.appName)
{
case "Netscape":
case "Gecko":
case "Mozilla":
var r = ((doc) ? doc : document.body ).ownerDocument.createRange();
r.setStartBefore(((doc) ? doc : document.body ));
var parsedHTML = r.createContextualFragment(html);
((doc) ? doc : document.body ).insertBefore(parsedHTML, ((doc) ? doc : document.body ).firstChild);
break;
case "Microsoft Internet Explorer":
case "Opera":
document.body.insertAdjacentHTML("AfterBegin", html);
break;
}
}
// Возвращает объект узла по идентификатору в текущем документе (в случае задания параметра doc он определяет документ)
function GetById(id, doc)
{
switch(navigator.appName)
{
case "Netscape":
case "Gecko":
case "Mozilla":
return (doc) ? doc.getElementById(id) : document.getElementById(id);
break;
case "Microsoft Internet Explorer":
case "Opera":
return (doc) ? doc.all[id] : document.all[id];
break;
}
}
index.html
Код
<body onload="init()">
<style>
table.popup td
{
border-left : 1px solid #000000;
border-top : 1px solid #000000;
font-family : verdana, sans-serif, arial;
font-size : 14px;
background : #CCCCCC;
}
table.popup
{
border-right : 1px solid #000000;
border-bottom : 1px solid #000000;
width: 100px;
}
</style>
<br>
<br>
<br>
<br>
<script src="crossbrowsers.js" type="text/javascript"></script>
<script src="menu.js" type="text/javascript"></script>
<script type="text/javascript">
function init()
{
menu = new Menu("menu");
a = menu.AddNode("1", null);
b = menu.AddNode("2", null);
cur1 = menu.AddNode("bbbbbb1", b);
cur = menu.AddNode("bbbbbb11", cur1);
cur = menu.AddNode("bbbbbb12", cur1);
cur = menu.AddNode("bbbbbb13", cur1);
cur = menu.AddNode("bbbbbb131", cur);
cur = menu.AddNode("bbbbbb14", cur1);
cur = menu.AddNode("bbbbbb131", cur);
c = menu.AddNode("3", null);
cur = menu.AddNode("cccccc1", c);
cur1 = menu.AddNode("cccccc11", cur);
cur = menu.AddNode("cccccc1111", cur1);
cur = menu.AddNode("cccccc1111", cur1);
cur = menu.AddNode("cccccc1111", cur1);
cur = menu.AddNode("cccccc11111", cur);
cur2 = menu.AddNode("cccccc111111", cur);
cur = menu.AddNode("cccccc1111111", cur2);
cur = menu.AddNode("cccccc1111111", cur2);
cur = menu.AddNode("cccccc1111111", cur2);
cur3 = menu.AddNode("cccccc11111111", cur);
cur3 = menu.AddNode("cccccc11111111", cur);
cur3 = menu.AddNode("cccccc11111111", cur);
cur3 = menu.AddNode("cccccc11111111", cur);
menu.Run();
}
</script>
<table border="1">
<tr>
<td><a href="#" onmouseover="menu.Show(a, 'div_a')" onmouseout="menu.Out(a)">aaaaaaaaaaa</a></td>
<td><div id='div_a' style="position:relative"> </div></td>
</tr>
<tr>
<td><a href="#" onmouseover="menu.Show(b, 'div_b')" onmouseout="menu.Out(b)">bbbbbbbbbbb</a></td>
<td><div id='div_b' style="position:relative"> </div></td>
</tr>
<tr>
<td><a href="#" onmouseover="menu.Show(c, 'div_c')" onmouseout="menu.Out(c)">ccccccccccc</a></td>
<td><div id='div_c' style="position:relative"> </div></td>
</tr>
</table>
</body>
<style>
table.popup td
{
border-left : 1px solid #000000;
border-top : 1px solid #000000;
font-family : verdana, sans-serif, arial;
font-size : 14px;
background : #CCCCCC;
}
table.popup
{
border-right : 1px solid #000000;
border-bottom : 1px solid #000000;
width: 100px;
}
</style>
<br>
<br>
<br>
<br>
<script src="crossbrowsers.js" type="text/javascript"></script>
<script src="menu.js" type="text/javascript"></script>
<script type="text/javascript">
function init()
{
menu = new Menu("menu");
a = menu.AddNode("1", null);
b = menu.AddNode("2", null);
cur1 = menu.AddNode("bbbbbb1", b);
cur = menu.AddNode("bbbbbb11", cur1);
cur = menu.AddNode("bbbbbb12", cur1);
cur = menu.AddNode("bbbbbb13", cur1);
cur = menu.AddNode("bbbbbb131", cur);
cur = menu.AddNode("bbbbbb14", cur1);
cur = menu.AddNode("bbbbbb131", cur);
c = menu.AddNode("3", null);
cur = menu.AddNode("cccccc1", c);
cur1 = menu.AddNode("cccccc11", cur);
cur = menu.AddNode("cccccc1111", cur1);
cur = menu.AddNode("cccccc1111", cur1);
cur = menu.AddNode("cccccc1111", cur1);
cur = menu.AddNode("cccccc11111", cur);
cur2 = menu.AddNode("cccccc111111", cur);
cur = menu.AddNode("cccccc1111111", cur2);
cur = menu.AddNode("cccccc1111111", cur2);
cur = menu.AddNode("cccccc1111111", cur2);
cur3 = menu.AddNode("cccccc11111111", cur);
cur3 = menu.AddNode("cccccc11111111", cur);
cur3 = menu.AddNode("cccccc11111111", cur);
cur3 = menu.AddNode("cccccc11111111", cur);
menu.Run();
}
</script>
<table border="1">
<tr>
<td><a href="#" onmouseover="menu.Show(a, 'div_a')" onmouseout="menu.Out(a)">aaaaaaaaaaa</a></td>
<td><div id='div_a' style="position:relative"> </div></td>
</tr>
<tr>
<td><a href="#" onmouseover="menu.Show(b, 'div_b')" onmouseout="menu.Out(b)">bbbbbbbbbbb</a></td>
<td><div id='div_b' style="position:relative"> </div></td>
</tr>
<tr>
<td><a href="#" onmouseover="menu.Show(c, 'div_c')" onmouseout="menu.Out(c)">ccccccccccc</a></td>
<td><div id='div_c' style="position:relative"> </div></td>
</tr>
</table>
</body>
Спустя 29 дней, 9 часов, 17 минут, 16 секунд (29.08.2007 - 20:53) pavbat написал(а):
скачай прогамму Sothink DHTMLMenu , любую менюшку создать можно.
Спустя 18 часов, 15 минут, 40 секунд (30.08.2007 - 15:09) Ghirik написал(а):
Хорошая коллекция скриптов JavaScript Collector
_____________