Меню Аккордион

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

sheynhjk

Илья
#1/06.01.2014 10:57
0

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

Карма: +2

Здравствуйте, хотим воткнуть меню-аккордион вместо меню категорий слева, в маркете, портфолио и проектах.

В каких файлах искать это боковое меню категорий?, поподробнее пожалуйста

Спасибо!

Сообщения: 20

Lion

Суровый модератор
#2/06.01.2014 18:35
0

Модераторы

Карма: +50

Посмотри в шаблонах этих модулей, там есть шаблоны с именем *.tree.tpl

Сообщения: 497

sheynhjk

Илья
#3/20.01.2014 00:25
0

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

Карма: +2

Спасибо!!!

Сообщения: 20

vesser

#4/20.01.2014 00:41
0

Аватар

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

Карма: 0

#2311 sheynhjk:

Спасибо!!!

Здравствуйте, не подскажите, как реализовали меню аккордион на своем сайте? Я вот тоже пытаюсь, но что не получается.

Сообщения: 10

sheynhjk

Илья
#5/20.01.2014 01:03
0

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

Карма: +2

ниповерешь, перерыл все, выслушал всех, камекал, кумекал, в итоге обратился на фриланс.ру и проблема решена за 300 рублей =)))

Интересует, пеши на почту, дам контакты чела

Сообщения: 20

vesser

#6/21.01.2014 01:02
0

Аватар

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

Карма: 0

Кому интересно, как сделано меню аккордион. Меню реализовано так, скачиваете файл uaccodeon.js отсюда кидаете его в папку js. Далле в файле header.tpl перед тегом </head> вставить

<script type="text/javascript" src="js/uaccordeon.js"></script>
<style>
     .nav-list>li>ul>li{
       margin: 5px 0;
    }
</style>

Я пока делал только для проектов поэтому в файле projects.tree.tpl, строку 

<ul<!-- IF {LEVEL} == 0 --> class="nav nav-list"<!-- ENDIF -->>

поменять на

<ul class="nav nav-list">

И все, у меня покрайне мере работает.

Сообщения: 10

k05054

#7/15.03.2014 04:04
0

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

Карма: +2

Вношу уточнение: если делать так как описано в посте выше то в пунктах меню "Фрилансеры" и "Работодатели" перестает работать поиск по категориям фрилансеров и работодателей. для того чтобы поиск работал придется либо копировать структуру из проектов и вносить изменеия в выбор категории фрилансера и работодателя, либо оставлять поиск по разделам. 

Для того чтобы поиск фрилансеров и работодателей по разделам работал код 

<script type="text/javascript" src="js/uaccordeon.js"></script>
<style>
     .nav-list>li>ul>li{
       margin: 5px 0;
    }
</style>

нужно вставлять не в header.tpl а в projects.tree.tpl перед тегом <ul class="nav nav-list">

Если подменю открывается и сразу закрывается можно вставлять код после тега <!-- IF {ROW_SUBCAT} -->

 

Сообщения: 57

MaximKornilov

#8/08.04.2014 16:48
0

Аватар

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

Карма: +1

Спасибо большое, сделал как написано и заметил такой баг. Не открывается категории и неработает категория "Все", то есть при выборее категории ничего не отображается, пока не выберешь подкатегорию, как с этим бороться? 
 

<!-- BEGIN: MAIN -->
<ul class="nav nav-list">
	<!-- IF {ROW_LEVEL} == 0 -->
	<li><a href="{PHP|cot_url('projects')}">{PHP.L.All}</a></li>		
	<!-- ENDIF -->
	<!-- BEGIN: CATS -->
	<li<!-- IF {ROW_SELECTED} --> class="active"<!-- ENDIF -->><a href="{ROW_HREF}">{ROW_TITLE} ({ROW_COUNT})</a>
		<!-- IF {ROW_SUBCAT} -->
		{ROW_SUBCAT}
		<script type="text/javascript" src="js/uaccordeon.js"></script>
		<style>
			.nav-list>li>ul>li{
			margin: 5px 0;
			}
		</style>
		<!-- ENDIF -->
	</li>
	<!-- END: CATS -->
</ul>
<!-- END: MAIN -->

 

Сообщения: 16

Rybak85

Алекс
#9/14.04.2014 10:11
0

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

Карма: 0

#3362 MaximKornilov:

Не открывается категории и неработает категория "Все", то есть при выборее категории ничего не отображается, пока не выберешь подкатегорию, как с этим бороться?

Такая же проблема. Так никто и не знает, как решить данную проблему?

Сообщения: 13

k05054

#10/14.04.2014 12:44
0

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

Карма: +2

Не понимаю как я сделал все в тот раз когда писал свои посты. Судя по всему какой то баг был. СЕйчас пришлось удалить кнопочку "все" и убрать возможность совать проекты именно в категории. Только в подкатегории можно. 

Сообщения: 57

Rybak85

Алекс
#11/15.04.2014 11:03
0

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

Карма: 0

#3417 k05054:

Не понимаю как я сделал все в тот раз когда писал свои посты. Судя по всему какой то баг был. СЕйчас пришлось удалить кнопочку "все" и убрать возможность совать проекты именно в категории. Только в подкатегории можно. 

Можете поделиться как вы это сделали? Кнопочку "Все" из БД напрямую удаляли или она где-то в файле прописана - искал, не нашел. Как смогли убрать возможность совать проекты именно в категории?

Сообщения: 13

MaximKornilov

#12/16.04.2014 09:20
0

Аватар

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

Карма: +1

Так а смысл ее удалять, лучше ведь решить эту проблему.

Сообщения: 16

Rybak85

Алекс
#13/17.04.2014 11:56
0

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

Карма: 0

#3431 MaximKornilov:

Так а смысл ее удалять, лучше ведь решить эту проблему.

Вы знаете, как ее решить?

Сообщения: 13

Cmsworks

Булат
#14/18.04.2014 09:33
0

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

Карма: +678

Позволил себе изменить пример, который был указан выше:

Измените файл uaccordeon.js:

$().ready(function() {

	$('.nav-list > li ul')
		.click(function(event){
			event.stopPropagation();
		})
		.hide();

	$('.active').parent().addClass('active');
	
	$('.active').parent().show();
	$('.active').parent().parent().show();
	
	$('.well-small>ul>li>a, .well-small>ul>li>ul>li>a').click(function(event){
		var ulelement = $(this).parent('li').children('ul').is('ul');
		if(ulelement)
		{
			event.preventDefault();
		}
	});


	$('.nav-list > li, .nav-list > li > ul > li').click(function(){
		var selfClick = $(this).find('ul:first').is(':visible');
		if(!selfClick) {
			$(this)
				.parent()
				.find('> li ul:visible')
				.slideToggle();
		}

		if($(this).hasClass('active')){
			$(this).removeClass('active');
		}
		else{
			$('.well-small>ul>li').removeClass('active');
		}

		$(this)
			.find('ul:first')
			.stop(true, true)
			.slideToggle();
	});
	
});

В css добавьте такую строчку:

.nav li.active a{ background:  none!important; font-weight: bold; color: #000000; }

 

Сообщения: 2388

Rybak85

Алекс
#15/18.04.2014 11:25
0

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

Карма: 0

Спасибо, Булат! Все заработало как надо, теперь попробую сделать тоже самое для меню магазина и портфолио.

Сообщения: 13

Cmsworks

Булат
#16/18.04.2014 12:09
0

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

Карма: +678

Тут мы поправили только что для магазина и портфолио. В девелоперсокй версии сборки самые последние правки выкладываются.

Сообщения: 2388

k05054

#17/18.04.2014 18:38
0

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

Карма: +2

Все работает, извините)))

Сообщения: 57

Rybak85

Алекс
#18/22.04.2014 11:43
0

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

Карма: 0

Кстати, а нельзя ли сделать, как на http://www.weblancer.net/projects/ чтобы меню раскрывалось только при переходе на сам пункт. Ну то есть чтобы можно было попасть в сам главный раздел, например, "Анимация/Графика/Фотография" и при этом открылись бы его подразделы?

Сообщения: 13

lanry

Андрей
#19/31.05.2014 01:09
0

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

Карма: +3

Для вывода меню аккордион использовал функции Bootstrap. В шаблон projects.tree.tpl внес такие изменения:

<!-- BEGIN: MAIN -->
<!-- IF {LEVEL} == 0 --> <div class="accordion" id="accordion"><!-- ENDIF -->	
<!-- BEGIN: CATS -->
	<div class="accordion-group">
	  <div class="accordion-heading">
		<a class="accordion-toggle" href="{ROW_HREF}">{ROW_TITLE} ({ROW_COUNT})</a>				
	  </div>
		<span class="element-point-menu accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse{ROW_JJ}"><i class="icon-chevron-down"></i>
		</span>
	  <div id="collapse{ROW_JJ}" class="accordion-body collapse" style="height: 0px;">
		<div class="accordion-inner">

		<!-- IF {ROW_SUBCAT} -->	
			{ROW_SUBCAT}
		<!-- ENDIF -->
		
		</div>
	  </div>
	</div>
	<!-- END: CATS -->

<!-- IF {LEVEL} == 0 --> </div><!-- ENDIF -->

<!-- END: MAIN -->

Подскажите, как вывести подменю не используя {ROW_SUBCAT}

Сообщения: 36

CrazyFreeMan

Ярослав
#20/15.06.2014 01:18
0

Модераторы

Карма: +317

Аккордион работает да немного не так :) Отлично если кликак по чекбоксу, но если по тексту возле него - кошмар получается :) мелочь а не приятная то

Сообщения: 1240

pligin

#21/21.07.2014 11:23
0

Аватар

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

Карма: +1

Посмотрите на сайте fjob.by. Если Вам нужно именно так, подскажу бесплатно. Нужно добавить 2 слова в исходный код.
Сообщения: 25

nurik

Nurlan Kenzhegulov
#22/21.07.2014 11:40
0

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

Карма: +7

#4194 pligin:
Посмотрите на сайте fjob.by. Если Вам нужно именно так, подскажу бесплатно. Нужно добавить 2 слова в исходный код.

Поделитесь, и нам этот код пригодиться. 

Сообщения: 68

pligin

#23/25.07.2014 17:29
0

Аватар

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

Карма: +1

#4196 nurik:
#4194 pligin:
Посмотрите на сайте fjob.by. Если Вам нужно именно так, подскажу бесплатно. Нужно добавить 2 слова в исходный код.

Поделитесь, и нам этот код пригодиться. 

Создал тему https://cmsworks.ru/forums/apps/freelance2/topic779#4245

Сообщения: 25

flreeman

Петр
#24/26.06.2015 13:54
0

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

Карма: 0

#3439 devkont:

Позволил себе изменить пример, который был указан выше:

Измените файл uaccordeon.js:

$().ready(function() {

	$('.nav-list > li ul')
		.click(function(event){
			event.stopPropagation();
		})
		.hide();

	$('.active').parent().addClass('active');
	
	$('.active').parent().show();
	$('.active').parent().parent().show();
	
	$('.well-small>ul>li>a, .well-small>ul>li>ul>li>a').click(function(event){
		var ulelement = $(this).parent('li').children('ul').is('ul');
		if(ulelement)
		{
			event.preventDefault();
		}
	});


	$('.nav-list > li, .nav-list > li > ul > li').click(function(){
		var selfClick = $(this).find('ul:first').is(':visible');
		if(!selfClick) {
			$(this)
				.parent()
				.find('> li ul:visible')
				.slideToggle();
		}

		if($(this).hasClass('active')){
			$(this).removeClass('active');
		}
		else{
			$('.well-small>ul>li').removeClass('active');
		}

		$(this)
			.find('ul:first')
			.stop(true, true)
			.slideToggle();
	});
	
});

В css добавьте такую строчку:

.nav li.active a{ background:  none!important; font-weight: bold; color: #000000;

 

После нажатия на пункт меню подпункты открываются и зразу же закрывается, в чем может быть проблема?

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

 

Сообщения: 6

yaspis

Екатерина
#25/01.11.2015 20:34
0

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

Карма: 0

#3853 lanry:

Для вывода меню аккордион использовал функции Bootstrap. В шаблон projects.tree.tpl внес такие изменения:

<!-- BEGIN: MAIN -->
<!-- IF {LEVEL} == 0 --> <div class="accordion" id="accordion"><!-- ENDIF -->	
<!-- BEGIN: CATS -->
	<div class="accordion-group">
	  <div class="accordion-heading">
		<a class="accordion-toggle" href="{ROW_HREF}">{ROW_TITLE} ({ROW_COUNT})</a>				
	  </div>
		<span class="element-point-menu accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse{ROW_JJ}"><i class="icon-chevron-down"></i>
		</span>
	  <div id="collapse{ROW_JJ}" class="accordion-body collapse" style="height: 0px;">
		<div class="accordion-inner">

		<!-- IF {ROW_SUBCAT} -->	
			{ROW_SUBCAT}
		<!-- ENDIF -->
		
		</div>
	  </div>
	</div>
	<!-- END: CATS -->

<!-- IF {LEVEL} == 0 --> </div><!-- ENDIF -->

<!-- END: MAIN -->

Подскажите, как вывести подменю не используя {ROW_SUBCAT}

Топорно, конечно, но если убрать некоторые классы и элементы, то работает и так...

	$('#accordion > div').addClass('category-menu accordion-group');
	$('#accordion > .category-menu > div:nth-child(2) > div:nth-child(1)').addClass('accordion-inner');       
	$('#accordion > div.category-menu > div:nth-child(2) > div:nth-child(1) > div > div:nth-child(2), #accordion > div.category-menu > div:nth-child(2) > div:nth-child(1) > div > div:nth-child(1) > h4:nth-child(1) > a:nth-child(1)').detach();

 

Сообщения: 11