Выпадающее меню категорий

Автор Сообщение

novlove

#1/14.01.2016 13:19
0

Аватар

Пользователи

Карма: +5

Привет всем. Интересует вопрос реалиации выпадающего меню категорий проектов. При добавлении подкатегорий, они сразу видны пользователю и занимают достаточно много места, нужно реализовать функцию "выпадения" подкатегорий, тоесть при наведении (нажатии) на основную категорию должны поялвляться подкатегории.

 

Подскажите как это реализовать на данном движке.

 

Заранее спасибо.

Сообщения: 44

Cmsworks

Булат
#2/14.01.2016 13:28
0

Администраторы

Карма: +683

Поиском по форуму пользуйтесь. Уже обсуждался этот вопрос.

Сообщения: 2416

Опытный веб-разработчик, фрилансер.
Разрабатываю сайты любой сложности на профессиональных фреймворках.

------

Почта для связи: developer@cmsworks.ru

Spoken

#3/14.01.2016 13:31
0

Пользователи

Карма: +3

При создании категории, выставляешь основная категория 001. Его подкатегория будет 001.1 и т.д.

Сообщения: 42

CrazyFreeMan

Ярослав
#4/14.01.2016 13:31
+1

Модераторы

Карма: +317

Сообщения: 1248

novlove

#5/14.01.2016 13:34
0

Аватар

Пользователи

Карма: +5

#12327 CrazyFreeMan:

Catselector ?

Благодарю!))) +1 к карме

Добавлено 33 минуты спустя:

#12326 Spoken:

При создании категории, выставляешь основная категория 001. Его подкатегория будет 001.1 и т.д.

В том и дело, что когда выставляю подкатегории, они не скрываются под основной, а остаются видимыми. При том занимают много места (подкатегорий около 200). Нужно что бы они выпадали когда нажимаешь на основную. Тут подсказали плагин, но проделав все шаги, результатов не получено, всё как было. есть ещё другой вариант, нашел на форуме, но тут разобраться не могу, т.к. новичок.

 

Вот вариант который нашел

 

Пример на основе projects.tree.tpl:

В код вставлен JS:

<script type="text/javascript">
$(document).ready(function(){
 $('.spoiler_links').mouseenter(function(){
if($(this).children('div.spoiler_body').css('display') == 'none') $(this).children('div.spoiler_body').slideDown('normal');
 });
 $('.spoiler_links').mouseleave(function(){
  $(this).children('div.spoiler_body').slideUp('normal');
  clearTimeout(animationTimer);
 });
});
</script>
<!-- BEGIN: MAIN -->
<script type="text/javascript">
$(document).ready(function(){
 $('.spoiler_links').mouseenter(function(){
if($(this).children('div.spoiler_body').css('display') == 'none') $(this).children('div.spoiler_body').slideDown('normal');
 });
 $('.spoiler_links').mouseleave(function(){
  $(this).children('div.spoiler_body').slideUp('normal');
  clearTimeout(animationTimer);
 });
});
</script>
<ul<!-- IF {LEVEL} == 0 --> class="nav nav-list"<!-- ENDIF -->>
	<!-- IF {ROW_LEVEL} == 0 -->
	<div class="catList">
	<li><a href="{PHP|cot_url('projects')}">{PHP.L.All}</a></li>
	</div>
	<!-- ENDIF -->
	<!-- BEGIN: CATS -->
<div class="spoiler_links">
	<div class="catList">
	<li<!-- IF {ROW_SELECTED} --> class="active"<!-- ENDIF -->><a href="{ROW_HREF}">{ROW_TITLE}<span class="label-cat">{ROW_COUNT}</span></a>
	</div>
	<!-- IF {ROW_SUBCAT} -->
	<div class="spoiler_body">
	{ROW_SUBCAT}
		</div>	
</div>
	<!-- ENDIF -->
	</li>
	<!-- END: CATS -->
</ul>
<!-- END: MAIN -->

в CSS добавить:

.catList{background:#FFF;padding:5px;font-size:12px;border:1px solid #ddd;margin-bottom:-1px}
.catList a{display:block;height:100%;color:#666}
.catList:hover{background:#ddd}
.catList a:hover{background:#ddd;text-decoration:none}
.catList > a:visited{background:#ddd}
.spoiler_body{display:none;cursor:pointer;text-align:left;z-index:99}
.spoiler_body a{padding:0 10px}

 

Сообщения: 44