Как создать выпадающее верхнее меню?

Файл top.menu_template.php

<?
$sMenuProlog="<table cellspacing='0' cellpadding='0' border='0' height='29'><tr>\\n";

if($SELECTED && ($LINK!=LANG_DIR || $GLOBALS["APPLICATION"]->GetCurPage()==LANG_DIR."index.php"))
{
$clrtext = "topmenuact";
}
else
{
$clrtext = "topmenu";
}

$str = "";
$popup_menu = new CMenu("left");
$popup_menu->Init($LINK);
$popup_menu->template = "/bitrix/php_interface/en/popup.menu_template.php";

if(count($popup_menu->arMenu)>0)
{
$str = $popup_menu->GetMenuHtml();
$sMenuBody = ($ITEM_INDEX !=0 ? "<td><img src='/images/topmenu_separator.gif' width='7' height='12' alt=''></td>\\n":"").
"<td id='mi".$ITEM_INDEX."' class='' onmouseover=\\"showSubmenu(".$ITEM_INDEX.", this)\\" onmouseout=\\"hideSubmenu(".$ITEM_INDEX.")\\">\\n".

"<div id='sm".$ITEM_INDEX."' class='submenu' onmouseover='showSubmenu(".$ITEM_INDEX.", this)' onmouseout='hideSubmenu(".$ITEM_INDEX.", this)' style='width: 130px;'>".$str."</div>\\n".

"<a href='".$LINK."' class='".$clrtext."' valign='middle'><div> ".$TEXT." </div></a></td>\\n";

}
else
{
$sMenuBody =($ITEM_INDEX != 0 ? "<td><img src='/images/topmenu_separator.gif' width='7' height='12' alt=''></td>\\n":"").
"<td valign='middle'><a href=\\"".$LINK."\\" class='".$clrtext."'><div id='mi".$ITEM_INDEX."'> ".$TEXT." </div></a></td>\\n";
}

$sMenuEpilog="</tr></table>";
?>

Файл popup.menu_template.php

<?
$sMenuProlog="";
if (IsIE())
$strstyle = "width:100%";

if ($PERMISSION > "D"){
$sMenuBody = '<div class="submenuitem" style="'.$…
onmouseover="this.className=\\'submenuitemact\\'"
onmouseout="this.className=\\'submenuitem\\'"
>'.$TEXT.'</div>';
}
else
{
$sMenuBody = "";
}
$sMenuEpilog='';
?>

Javascript-функции (в prolog_main.php)

function showSubmenu(index, oVal)
{
ShowLayers("sm" + index, oVal);
}

if ($USER->IsAdmin()): // проверка, выводится ли …

function hideSubmenu(index, oVal) {
<?if(IsIE()):?>
var obj = tmt_findObj("sm" + index);
if (document.getElementById)
{
var XXX = 0;
if (obj)
{
XXX = obj.offsetLeft;
var oValTmp = obj.parentElement;
while (oValTmp)
{
XXX = XXX + oValTmp.offsetLeft;
oValTmp = oValTmp.offsetParent;
}
var x = window.event.x;
var y = window.event.y;
if(
(x > XXX && x < XXX + obj.clientWidth)
&&
(y > YYY && y < YYY + obj.clientHeight)
)
return ;
}
}
<?endif;?>
ShowHideLayers("sm" + index, "hide");
}

function MM_findObj(n, d)
{
var p,i,x;
if(!d)
d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length)
{
d=parent.frames[n.substring(p+1)].document;
n=n.substring(0,p);
}
if(!(x=d[n])&&d.all)
x=d.all[n];
for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById)
x=document.getElementById(n);
return x;
}

function tmt_findObj(n){
var x,t; if((n.indexOf("?"))>0&&parent.frames.le…
x=eval("parent.frames['"+t[1]+"'].document.getEl…
}else{x=document.getElementById(n)}return x; }

function ShowHideLayers() {
var i,p,v,obj,args=ShowHideLayers.arguments;
if (document.getElementById)
{
for (i=0; i<(args.length-1); i+=2)
{
obj=tmt_findObj(args[i]);
v=args[i+1];
v=(v=='show')?'visible':(v='hide')?'hidden':v;
if(obj)obj.style.visibility=v;
}
}
else
{
for (i=0; i<(args.length-1); i+=2)
if ((obj=MM_findObj(args[i]))!=null)
{
v=args[i+1];
if (obj.style)
{
obj=obj.style;
v=(v=='show')?'visible':(v='hide')?'hidden':…
}
obj.visibility=v;
}
}
}

var aLayer='';

var brname=navigator.appName, BrVer='';
if(brname.substring(0,2)=="Mi")
BrVer='E';

function ShowLayers(sLayer, oVal)
{
HideLayers();
if(BrVer=="E")
{
hideElement("SELECT", sLayer);
}
// Count pos
var XXX = 0;
if (document.getElementById)
{
if (oVal)
{
XXX = oVal.offsetLeft;
var oValTmp = oVal.parentElement;
while (oValTmp)
{
XXX = XXX + oValTmp.offsetLeft;
oValTmp = oValTmp.offsetParent;
}
}

obj = tmt_findObj(sLayer);
if (obj)
{
if (XXX + obj.clientWidth >= document.body.cli…
XXX = XXX + oVal.parentElement.clientWidth - …
if(navigator.appName != "Netscape")
obj.style.left = XXX-1;
else
obj.style.left = XXX;
obj.style.top = YYY;
}
}
// End count pos
ShowHideLayers(sLayer, 'show');

}

function HideLayers()
{
if(aLayer != '')
{
ShowHideLayers(aLayer, 'hide', 'close1', 'hide'…
if(BrVer=="E")
{
showElement("SELECT");
}
aLayer = '';
}
}

function GetPos(el)
{
if (!el || !el.offsetParent)return false;
var res=Array()
res["left"] = el.offsetLeft;
res["top"] = el.offsetTop;
var objParent = el.offsetParent;
while (objParent.tagName.toUpperCase()!="BODY")
{
res["left"] += objParent.offsetLeft;
res["top"] += objParent.offsetTop;
objParent = objParent.offsetParent;

res["right"]=res["left"]+el.offsetWidth;
res["bottom"]=res["top"]+el.offsetHeight;
return res;
}


{
var Menu=document.all(subMenu);
for (i = 0; i < document.all.tags(elName).length…
{
Obj = document.all.tags(elName)[i];
if(!(pMenu=GetPos(Menu)))continue;
if(!(pObj=GetPos(Obj)))continue;

if(pObj["left"]<pMenu["right"] && pMenu["left"]…
Obj.style.visibility = "hidden";
}
}

function showElement(elName)
{
for (i = 0; i < document.all.tags(elName).length…
{
obj = document.all.tags(elName)[i];
if (!obj || !obj.offsetParent)continue;
if(obj.style.visibility=="hidden")
obj.style.visibility = "visible";
}
}

Стили (в файл styles.css)

.submenu {position: absolute; visibility:hidden; border:1px solid #88ABCB; background-color:#D9E7F2; cursor: hand;}

.submenuitemact {padding:4px; padding-left:5px; padding-right:10x; border-bottom:1px solid #FFFFFF; background-color: #ECF1F9; FONT: 12px Verdana, Arial, sans-serif; color: #E10808; text-decoration:none;}

.submenuitem {padding:4px; padding-left:5px; padding-right:10px; border-bottom:1px solid #FFFFFF; background-color: #D9E7F2; FONT: 12px Verdana, Arial, sans-serif; color: #346BA0; text-decoration:none;}

.submenui {background-color: #D9E7F2; FONT: 12px Verdana, Arial, sans-serif; color: #264F77; text-decoration:none;}