|
Как создать выпадающее верхнее меню? |
|
|
Файл top.menu_template.php
| <?<br />$sMenuProlog="<table cellspacing='0' cellpadding='0' border='0' height='29'><tr>\\n";<br /><br />if($SELECTED && ($LINK!=LANG_DIR || $GLOBALS["APPLICATION"]->GetCurPage()==LANG_DIR."index.php"))<br />{<br /> $clrtext = "topmenuact";<br />}<br />else<br />{<br /> $clrtext = "topmenu";<br />}<br /><br />$str = "";<br />$popup_menu = new CMenu("left");<br />$popup_menu->Init($LINK);<br />$popup_menu->template = "/bitrix/php_interface/en/popup.menu_template.php";<br /><br />if(count($popup_menu->arMenu)>0)<br />{<br /> $str = $popup_menu->GetMenuHtml();<br /> $sMenuBody = ($ITEM_INDEX !=0 ? "<td><img src='/images/topmenu_separator.gif' width='7' height='12' alt=''></td>\\n":"").<br /> "<td id='mi".$ITEM_INDEX."' class='' onmouseover=\\"showSubmenu(".$ITEM_INDEX.", this)\\" onmouseout=\\"hideSubmenu(".$ITEM_INDEX.")\\">\\n".<br /><br />"<div id='sm".$ITEM_INDEX."' class='submenu' onmouseover='showSubmenu(".$ITEM_INDEX.", this)' onmouseout='hideSubmenu(".$ITEM_INDEX.", this)' style='width: 130px;'>".$str."</div>\\n".<br /><br />"<a href='".$LINK."' class='".$clrtext."' valign='middle'><div> ".$TEXT." </div></a></td>\\n";<br /><br />}<br />else<br />{<br />$sMenuBody =($ITEM_INDEX != 0 ? "<td><img src='/images/topmenu_separator.gif' width='7' height='12' alt=''></td>\\n":"").<br /> "<td valign='middle'><a href=\\"".$LINK."\\" class='".$clrtext."'><div id='mi".$ITEM_INDEX."'> ".$TEXT." </div></a></td>\\n";<br />}<br /> <br />$sMenuEpilog="</tr></table>";<br />?><br /> |
Файл popup.menu_template.php
| <?<br />$sMenuProlog="";<br />if (IsIE())<br /> $strstyle = "width:100%";<br /><br />if ($PERMISSION > "D"){<br />$sMenuBody = '<div class="submenuitem" style="'.$strstyle.'" onclick="window.location=\\''.$LINK.'\\';" <br />onmouseover="this.className=\\'submenuitemact\\'"<br />onmouseout="this.className=\\'submenuitem\\'"<br />>'.$TEXT.'</div>';<br />}<br />else<br />{<br />$sMenuBody = "";<br />}<br />$sMenuEpilog='';<br />?><br /> |
Javascript-функции (в prolog_main.php)
| function showSubmenu(index, oVal)<br />{<br /> ShowLayers("sm" + index, oVal);<br />}<br /><br /><?<br />if ($USER->IsAdmin()): // проверка, выводится ли панель администрирования ?> var YYY = 55; <?else:?> var YYY = 29; <?endif;?><br /><br />function hideSubmenu(index, oVal) {<br /><?if(IsIE()):?><br /> var obj = tmt_findObj("sm" + index);<br /> if (document.getElementById)<br /> {<br /> var XXX = 0;<br /> if (obj)<br /> {<br /> XXX = obj.offsetLeft;<br /> var oValTmp = obj.parentElement;<br /> while (oValTmp)<br /> {<br /> XXX = XXX + oValTmp.offsetLeft;<br /> oValTmp = oValTmp.offsetParent;<br /> }<br /> var x = window.event.x;<br /> var y = window.event.y;<br /> if(<br /> (x > XXX && x < XXX + obj.clientWidth)<br /> &&<br /> (y > YYY && y < YYY + obj.clientHeight)<br /> )<br /> return ;<br /> }<br /> }<br /><?endif;?><br />ShowHideLayers("sm" + index, "hide");<br />}<br /><br />function MM_findObj(n, d)<br />{<br /> var p,i,x;<br /> if(!d)<br /> d=document;<br /> if((p=n.indexOf("?"))>0&&parent.frames.length)<br /> {<br /> d=parent.frames[n.substring(p+1)].document;<br /> n=n.substring(0,p);<br /> }<br /> if(!(x=d[n])&&d.all)<br /> x=d.all[n];<br /> for (i=0;!x&&i<d.forms.length;i++)<br /> x=d.forms[i][n];<br /> for(i=0;!x&&d.layers&&i<d.layers.length;i++)<br /> x=MM_findObj(n,d.layers[i].document);<br /> if(!x && document.getElementById)<br /> x=document.getElementById(n);<br /> return x;<br />}<br /><br />function tmt_findObj(n){<br /> var x,t; if((n.indexOf("?"))>0&&parent.frames.length){t=n.split("?");<br /> x=eval("parent.frames['"+t[1]+"'].document.getElementById('"+t[0]+"')");<br /> }else{x=document.getElementById(n)}return x; }<br /><br />function ShowHideLayers() {<br /> var i,p,v,obj,args=ShowHideLayers.arguments;<br /> if (document.getElementById)<br /> {<br /> for (i=0; i<(args.length-1); i+=2)<br /> {<br /> obj=tmt_findObj(args[i]);<br /> v=args[i+1];<br /> v=(v=='show')?'visible':(v='hide')?'hidden':v;<br /> if(obj)obj.style.visibility=v;<br /> }<br /> }<br /> else<br /> {<br /> for (i=0; i<(args.length-1); i+=2) <br /> if ((obj=MM_findObj(args[i]))!=null)<br /> {<br /> v=args[i+1];<br /> if (obj.style)<br /> {<br /> obj=obj.style;<br /> v=(v=='show')?'visible':(v='hide')?'hidden':v;<br /> }<br /> obj.visibility=v;<br /> }<br /> }<br />}<br /><br />var aLayer='';<br /><br />var brname=navigator.appName, BrVer='';<br />if(brname.substring(0,2)=="Mi")<br /> BrVer='E';<br /><br />function ShowLayers(sLayer, oVal)<br />{<br /> HideLayers();<br /> if(BrVer=="E")<br /> {<br /> hideElement("SELECT", sLayer);<br /> }<br /> // Count pos<br /> var XXX = 0;<br /> if (document.getElementById)<br /> {<br /> if (oVal)<br /> {<br /> XXX = oVal.offsetLeft;<br /> var oValTmp = oVal.parentElement;<br /> while (oValTmp)<br /> {<br /> XXX = XXX + oValTmp.offsetLeft;<br /> oValTmp = oValTmp.offsetParent;<br /> }<br /> }<br /><br /> obj = tmt_findObj(sLayer);<br /> if (obj)<br /> {<br /> if (XXX + obj.clientWidth >= document.body.clientWidth)<br /> XXX = XXX + oVal.parentElement.clientWidth - obj.clientWidth;<br /> if(navigator.appName != "Netscape")<br /> obj.style.left = XXX-1;<br /> else<br /> obj.style.left = XXX; <br /> obj.style.top = YYY;<br /> }<br /> }<br /> // End count pos<br /> ShowHideLayers(sLayer, 'show');<br /> aLayer = sLayer;<br />}<br /><br />function HideLayers()<br />{<br /> if(aLayer != '')<br /> {<br /> ShowHideLayers(aLayer, 'hide', 'close1', 'hide', 'close2', 'hide')<br /> if(BrVer=="E")<br /> {<br /> showElement("SELECT");<br /> }<br /> aLayer = '';<br /> }<br />}<br /><br />function GetPos(el)<br />{<br /> if (!el || !el.offsetParent)return false;<br /> var res=Array()<br /> res["left"] = el.offsetLeft;<br /> res["top"] = el.offsetTop;<br /> var objParent = el.offsetParent;<br /> while (objParent.tagName.toUpperCase()!="BODY")<br /> {<br /> res["left"] += objParent.offsetLeft;<br /> res["top"] += objParent.offsetTop;<br /> objParent = objParent.offsetParent;<br /> }<br /> res["right"]=res["left"]+el.offsetWidth;<br /> res["bottom"]=res["top"]+el.offsetHeight;<br /> return res;<br />}<br /><br />function hideElement(elName, subMenu)<br />{<br /> var Menu=document.all(subMenu);<br /> for (i = 0; i < document.all.tags(elName).length; i++)<br /> {<br /> Obj = document.all.tags(elName)[i];<br /> if(!(pMenu=GetPos(Menu)))continue;<br /> if(!(pObj=GetPos(Obj)))continue;<br /><br /> if(pObj["left"]<pMenu["right"] && pMenu["left"]<pObj["right"] && pObj["top"]<pMenu["bottom"] && pMenu["top"]<pObj["bottom"])<br /> Obj.style.visibility = "hidden";<br /> }<br />}<br /><br />function showElement(elName)<br />{<br /> for (i = 0; i < document.all.tags(elName).length; i++)<br /> {<br /> obj = document.all.tags(elName)[i];<br /> if (!obj || !obj.offsetParent)continue;<br /> if(obj.style.visibility=="hidden")<br /> obj.style.visibility = "visible";<br /> }<br />} |
Стили (в файл styles.css)
| .submenu {position: absolute; visibility:hidden; border:1px solid #88ABCB; background-color:#D9E7F2; cursor: hand;}<br /><br />.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;}<br /><br />.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;}<br /><br />.submenui {background-color: #D9E7F2; FONT: 12px Verdana, Arial, sans-serif; color: #264F77; text-decoration:none;} |
Наверх
|
|
