Перейти к содержимому


eugenemsa

Регистрация: 15 May 2012
Offline Активность: Jun 21 2015 02:21 PM
-----

Мои сообщения

В теме: Делаем развернутое меню на jQuery

11 December 2013 - 12:34 AM

Умное меню

В продолжении выпадающего меню. Учим меню понимать вложенность.

Создаем файл к примеру: menu_li.tpl.html с содержимым:

{* шаблон блока развернутого дерева категорий *}

{if $big_categories_tree && $big_categories_tree_count>0}
{assign var="oldnumber" value=0}
[list]
{section name=h loop=$big_categories_tree}
  {if $big_categories_tree[h].categoryID != 1}
	  {if $big_categories_tree[h.index].level lt $big_categories_tree[h.index_next].level}{* вывод категорий *}
		[*][url="{if%20$smarty.const.CONF_MOD_REWRITE%20eq%201}category_{$big_categories_tree[h].categoryID}.html{else}index.php?categoryID={$big_categories_tree[h].categoryID}{/if}"]{$big_categories_tree[h].name}[/url]
	
[list]
		{else} {* вывод подкатегорий или категорий без вложенности *}
		[*][url="{if%20$smarty.const.CONF_MOD_REWRITE%20eq%201}category_{$big_categories_tree[h].categoryID}.html{else}index.php?categoryID={$big_categories_tree[h].categoryID}{/if}"]{$big_categories_tree[h].name}[/url]
	  {/if}
	  {if $big_categories_tree[h.index].level gt $big_categories_tree[h.index_next].level}
		
[/list]			  {/if}
  {/if}
  {/section}
[/list]

{else}
{$smarty.const.STRING_NO_CATEGORIES}

{/if}


Кладем в core/tpl/user/blocks/ваш шаблон, и подключаем его из админки.

создаем отдельный файл css. Как подключать знаете... В нем:


.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 220px; /* Width of Menu Items */
border-bottom:;
}
	
.suckerdiv ul li{
position: relative;
}
	
/*Sub level menu items */
.suckerdiv ul li ul{
background: #cccccc;
position: absolute;
width: 220px; /*sub menu width*/
top: 0;
}

/* Sub level menu links style */
.suckerdiv ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: black;
text-decoration: none;
text-align: left;
background: #cccccc;
padding: 3px 10px 3px 5px;
border: 1px solid #fff;
border-bottom: 0;
}

.suckerdiv ul li a:visited{
color: black;
}

.suckerdiv ul li a:hover{
background-color: yellow;
text-decoration: none;
}

.suckerdiv .subfolderstyle{
background: url(ваша картинка.gif) no-repeat center right;
}

	
/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */

Файл изображения (сами рисуете, желательно 5px Х 5px) кладем в data/ваш шаблон
Далее создаем файл ваше_имя.js, и кладем его также в data/ваш шаблон (соответственно также подключаем его), с содержимым:


var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus(){
for (var i=0; i   var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
	for (var t=0; t 	ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
		if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
			ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
		else //else if this is a sub level submenu (ul)
		  ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
	ultags[t].parentNode.onmouseover=function(){
	this.getElementsByTagName("ul")[0].style.display="block"
	}
	ultags[t].parentNode.onmouseout=function(){
	this.getElementsByTagName("ul")[0].style.display="none"
	}
	}
		for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
		ultags[t].style.visibility="visible"
		ultags[t].style.display="none"
		}
  }
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)


Вот и все, теперь пользователь видит где есть вложенные категории, и где нет их.


Странно но все равно ничего не выходит.