Вот полный код
style.css
script.js
teamplate.php
style.css
Код |
---|
/**Top menu**/ #horizontal-multilevel-menu,#horizontal-multilevel-menu ul { margin:0; padding:0; background:#BC262C url(images/header_menu_bg.gif) repeat-x; min-height:43px; width:100%; list-style:none; font-size:11px; float:left; /*font-size:90%*/ } #horizontal-multilevel-menu { } /*Links*/ #horizontal-multilevel-menu a { display:block; padding:5px 10px; /*padding:0.3em 0.8em;*/ text-decoration:none; text-align:center; } #horizontal-multilevel-menu li { float:left; } /*Root items*/ #horizontal-multilevel-menu li a.root-item { color:#fff; font-weight:bold; padding:7px 12px; width:180px; } /*Root menu selected*/ #horizontal-multilevel-menu li a.root-item-selected { background:#FF5E00; color:#fff; font-weight:bold; padding:7px 12px; width:180px; } /*Root items: hover*/ #horizontal-multilevel-menu li:hover a.root-item, #horizontal-multilevel-menu li.jshover a.root-item { background:#FF5E00; color:#fff; } /*Item-parents*/ #horizontal-multilevel-menu a.parent { background: url(images/arrow.gif) center right no-repeat; } /*Denied items*/ #horizontal-multilevel-menu a.denied { background: url(images/lock.gif) center right no-repeat; } /*Child-items: hover*/ #horizontal-multilevel-menu li:hover, #horizontal-multilevel-menu li.jshover { background:#FFE07C; color:#fff; } /*Child-items selected*/ #horizontal-multilevel-menu li.item-selected { background:#FFE07C; color:#fff; } /*Sub-menu box*/ #horizontal-multilevel-menu li ul { position:absolute; /*top:-999em;*/ top:auto; display:none; z-index:500; height:auto; /*width:12em;*/ width:220px; /*width:auto;*/ background:#FFFFFF; border:1px solid #C1C1C1; } /*Sub-menu item box*/ #horizontal-multilevel-menu li li { width:100%; /*width:180px;*/ /*border-bottom:1px solid #DEDEDE;*/ } /*Item link*/ #horizontal-multilevel-menu li ul a { text-align:left; } /*Items text color & size */ #horizontal-multilevel-menu li a, #horizontal-multilevel-menu li:hover li a, #horizontal-multilevel-menu li.jshover li a, #horizontal-multilevel-menu li:hover li:hover li a, #horizontal-multilevel-menu li.jshover li.jshover li a, #horizontal-multilevel-menu li:hover li:hover li:hover li a, #horizontal-multilevel-menu li.jshover li.jshover li.jshover li a, #horizontal-multilevel-menu li:hover li:hover li:hover li:hover li a, #horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li a, #horizontal-multilevel-menu li:hover li:hover li:hover li:hover li:hover li a, #horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li.jshover li a { color:#FF3300; /*font-weight:bold;*/ } /*Items text color & size: hover*/ #horizontal-multilevel-menu li:hover li:hover a, #horizontal-multilevel-menu li.jshover li.jshover a, #horizontal-multilevel-menu li:hover li:hover li:hover a, #horizontal-multilevel-menu li.jshover li.jshover li.jshover a, #horizontal-multilevel-menu li:hover li:hover li:hover li:hover a, #horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover a #horizontal-multilevel-menu li:hover li:hover li:hover li:hover li:hover a, #horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li.jshover a #horizontal-multilevel-menu li:hover li:hover li:hover li:hover li:hover li:hover a, #horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li.jshover li.jshover a { color:#000000; } #horizontal-multilevel-menu li ul ul { margin:-27px 0 0 132px; /*margin:-1.93em 0 0 11.6em;*/ } #horizontal-multilevel-menu li:hover ul ul, #horizontal-multilevel-menu li.jshover ul ul, #horizontal-multilevel-menu li:hover ul ul ul, #horizontal-multilevel-menu li.jshover ul ul ul, #horizontal-multilevel-menu li:hover ul ul ul ul, #horizontal-multilevel-menu li.jshover ul ul ul ul, #horizontal-multilevel-menu li:hover ul ul ul ul ul, #horizontal-multilevel-menu li.jshover ul ul ul ul ul { /*top:-999em;*/ display:none; } #horizontal-multilevel-menu li:hover ul, #horizontal-multilevel-menu li.jshover ul, #horizontal-multilevel-menu li li:hover ul, #horizontal-multilevel-menu li li.jshover ul, #horizontal-multilevel-menu li li li:hover ul, #horizontal-multilevel-menu li li li.jshover ul, #horizontal-multilevel-menu li li li li:hover ul, #horizontal-multilevel-menu li li li li.jshover ul, #horizontal-multilevel-menu li li li li li:hover ul, #horizontal-multilevel-menu li li li li li.jshover ul { /*z-index:1000; top:auto;*/ display:block; } div.menu-clear-left { clear:left; } |
script.js
Код |
---|
var jshover = function() { var menuDiv = document.getElementById("horizontal-multilevel-menu") if (!menuDiv) return; var sfEls = menuDiv.getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" jshover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" jshover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", jshover); |
teamplate.php
Код |
---|
<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?> <?if (!empty($arResult)):?> <ul id="horizontal-multilevel-menu"> <? $previousLevel = 0; foreach($arResult as $arItem):?> <?if ($previousLevel && $arItem["DEPTH_LEVEL"] < $previousLevel):?> <?=str_repeat("</ul></li>", ($previousLevel - $arItem["DEPTH_LEVEL"]));?> <?endif?> <?if ($arItem["IS_PARENT"]):?> <?if ($arItem["DEPTH_LEVEL"] == 1):?> <li><a href="<?=$arItem["LINK"]?>" class="<?if ($arItem["SELECTED"]):?>root-item-selected<?else:?>root-item<?endif?>"><?=$arItem["TEXT"]?></a> <ul> <?else:?> <li<?if ($arItem["SELECTED"]):?> class="item-selected"<?endif?>><a href="<?=$arItem["LINK"]?>" class="parent"><?=$arItem["TEXT"]?></a> <ul> <?endif?> <?else:?> <?if ($arItem["PERMISSION"] > "D"):?> <?if ($arItem["DEPTH_LEVEL"] == 1):?> <li><a href="<?=$arItem["LINK"]?>" class="<?if ($arItem["SELECTED"]):?>root-item-selected<?else:?>root-item<?endif?>"><?=$arItem["TEXT"]?></a></li> <?else:?> <li<?if ($arItem["SELECTED"]):?> class="item-selected"<?endif?>><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li> <?endif?> <?else:?> <?if ($arItem["DEPTH_LEVEL"] == 1):?> <li><a href="" class="<?if ($arItem["SELECTED"]):?>root-item-selected<?else:?>root-item<?endif?>" title="<?=GetMessage("MENU_ITEM_ACCESS_DENIED")?>"><?=$arItem["TEXT"]?></a></li> <?else:?> <li><a href="" class="denied" title="<?=GetMessage("MENU_ITEM_ACCESS_DENIED")?>"><?=$arItem["TEXT"]?></a></li> <?endif?> <?endif?> <?endif?> <?$previousLevel = $arItem["DEPTH_LEVEL"];?> <?endforeach?> <?if ($previousLevel > 1)://close last item tags?> <?=str_repeat("</ul></li>", ($previousLevel-1) );?> <?endif?> </ul> <div class="menu-clear-left"></div> <?endif?> |