FAQ: Сворачиваемые категории

Подписчики

10 февраля 201115 г

И так,активно использую этот форум,решил поделиться полезной модификацией.

Автор: Я

После данных изменений, наши подкатегории станут сворачиваться.

В блоках, вставляем в блок категорий этот код

<div id='category_list' class='general_box clearfix'>        <h3>Категории <a href='{$this->_database_url}?view=categories' class='right'>Все →</a></h3><ul class="menu">  <if test="is_array( $this->_categories ) && count( $this->_categories )"><foreach loop="$this->_categories[0] as $r">            <li>                  <a href='{$this->registry->ccsFunctions->returnDatabaseUrl( $r['category_database_id'], $r['category_id'] )}'>{$r['category_name']}</a>  <if test="count( $this->_categories[ $r['category_id'] ] )">                <ul class="subnav"> <foreach loop="$this->_categories[ $r['category_id'] ] as $sub">                    <li><a href='{$this->registry->ccsFunctions->returnDatabaseUrl( $sub['category_database_id'], $sub['category_id'] )}'><img src='http://ipbskins.ru/forum/public/style_images/ipbskins/bullet.png' alt='>' /> {$sub['category_name']}</a></li>                     </foreach></ul> </if>            </li> </foreach></if>                </ul>   </div>

В <head></head> (если работает IPBWRAPPER):

Перед :

<script type='text/javascript'>			Loader.boot();		</script>

Вставляем:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script>!window.jQuery && document.write('<script src="http://ipbskins.ru/forum/public/style_images/ipbskins/_http://ipbskins.ru/forum/public/js/jquery-1.4.2.min.js"><\/script>')</script><script type="text/javascript">jQuery.noConflict(); jQuery(document).ready(function($){	$(document).ready(function(){     $("ul.menu li a").mouseover(function() {                   $(this).parent().find("ul.subnav").slideDown('fast').show();         $(this).parent().hover(function() {        }, function(){                $(this).parent().find("ul.subnav").slideUp('slow');         });        });   }); });</script>

Ну и в CSS вставляем:

ul.menu li {    position: relative; }ul.menu li ul.subnav {    display: none;    }

Загрузить: jquery-1.4.2.min_.rar

На здоровье!

Нажмите здесь для просмотра статьи

10 февраля 201115 г

http://ipbskins.ru/ipcontent/

Сделала тут вроде для субкатегорий.

Спасибо

Первую тему пришлось удалить. Она продублировалась. Кроме того, комментарии возможны только из тем :)

2 года спустя...

19 марта 201313 г

Для новых версий IP.Content 2.3.x

В блоке ищем: Articles Menu

<div id='category_list' class='general_box clearfix'>
<h3>{$this->lang->words['ab__categories']} <a href='{$this->_database_url}?view=categories'>{$this->lang->words['ab__seealllink']}</a></h3>
<ul>
	<if test="is_array( $this->_categories ) && count( $this->_categories )">
		<foreach loop="$this->_categories[0] as $r">
			<li>
				<a href='{$this->registry->ccsFunctions->returnDatabaseUrl( $r['category_database_id'], $r['category_id'] )}'>{$r['category_name']}</a>
				<if test="count( $this->_categories[ $r['category_id'] ] )">
					<ul>
						<foreach loop="$this->_categories[ $r['category_id'] ] as $sub">
							<li>
								<a href='{$this->registry->ccsFunctions->returnDatabaseUrl( $sub['category_database_id'], $sub['category_id'] )}'>{$sub['category_name']}</a>
							</li>
						</foreach>
					</ul>
				</if>
			</li>
		</foreach>
	</if>
</ul>
</div>

Заменяем:

<div id='category_list' class='general_box clearfix'>
<h3>{$this->lang->words['ab__categories']} <a href='{$this->_database_url}?view=categories'>{$this->lang->words['ab__seealllink']}</a></h3>
<ul class="menu"> 
	<if test="is_array( $this->_categories ) && count( $this->_categories )">
		<foreach loop="$this->_categories[0] as $r">
			<li>
				<a href='{$this->registry->ccsFunctions->returnDatabaseUrl( $r['category_database_id'], $r['category_id'] )}'>{$r['category_name']}</a>
				<if test="count( $this->_categories[ $r['category_id'] ] )">
					<ul class="subnav"> <foreach loop="$this->_categories[ $r['category_id'] ] as $sub">
                   <li>
								<a href='{$this->registry->ccsFunctions->returnDatabaseUrl( $sub['category_database_id'], $sub['category_id'] )}'><img src='{style_images_url}/bullet.png' alt='>' />{$sub['category_name']}</a>
							</li>
						</foreach>
					</ul>
				</if>
			</li>
		</foreach>
	</if>
</ul>
</div>

Внейшний вид: globalTemplate

Ищем:

<script type='text/javascript'>

Вставляем перед: Но не забудьте изменить ссылку на путь к JS "Ваш сайт"

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="http://Ваш сайт/js/jquery-1.4.2.min.js"><\/script>')</script>
<script type="text/javascript">
jQuery.noConflict(); 
jQuery(document).ready(function($){	
$(document).ready(function(){
    $("ul.menu li a").mouseover(function() {           
       $(this).parent().find("ul.subnav").slideDown('fast').show(); 
       $(this).parent().hover(function() {
       }, function(){    
           $(this).parent().find("ul.subnav").slideUp('slow'); 
       });
       });
  }); 

});
</script>

В ipb_styles.css добавляем

ul.menu li {
   position: relative; 
}

ul.menu li ul.subnav {
   display: none;

}

Скачать: jquery-1.4.2.min_.rar

5 месяцев спустя...

30 августа 201312 г

Столкнулся с такой проблемой.

Форум лицензия, шаблон родной, все чисто гладко. JAVA скрипты вкл и откл. Создал в портале категорий 10-15 и в некоторых категориях подкатегорий по шт 20. И решил, чтоб не было длинное меню сделать сворачивание. Все сделал, настроил не 1вый раз. Открываю портал, а подкатегории не скрыты, а только мышку наведешь на категорию где подкатегории, сразу менюшка начинает работать.

По стандарту при открытие портала все должно быть скрыто, а тут наоборот).

31 августа 201312 г

В новом контенте библиотека JQuery версии 1.7.1 используется в модуле управления главным меню. Если вы грузите еще и 1.4.2, то возможен конфликт версий.

31 августа 201312 г

Я изменил на 1.7.1 меню, плавнее стало, но как было все так и осталась(

31 августа 201312 г

:D проблема была простая, в css в конце кода не добавил }

1 месяц спустя...

18 октября 201312 г

Кто знает, каким свойством можно сделать так, чтоб справа от категории была кнопка раскрыть-скрыть категорию? То плавное разворачивание надоело. Спасибо

18 октября 201312 г

Кто знает, каким свойством можно сделать так, чтоб справа от категории была кнопка раскрыть-скрыть категорию? То плавное разворачивание надоело. Спасибо

В блоке "Articles Menu":

<div id='category_list' class='general_box clearfix'>
<h3>{$this->lang->words['ab__categories']} <a href='{$this->_database_url}?view=categories'>{$this->lang->words['ab__seealllink']}</a></h3>
<ul class='menu'>
	<if test="is_array( $this->_categories ) && count( $this->_categories )">
		<foreach loop="$this->_categories[0] as $r">
			<li>
				<span class='plus'><img src='{style_images_url}/btn-expand.png' /></span>
				<span class='minus' style='display: none;'><img src='{style_images_url}/btn-collapse.png' /></span>
				<span class='categories'>{$r['category_name']}</span>
				<if test="count( $this->_categories[ $r['category_id'] ] )">
					<ul class='subnav'>
						<foreach loop="$this->_categories[ $r['category_id'] ] as $sub">
							<li>
								<a href='{$this->registry->ccsFunctions->returnDatabaseUrl( $sub['category_database_id'], $sub['category_id'] )}'>{$sub['category_name']}</a>
							</li>
						</foreach>
					</ul>
				</if>
			</li>
		</foreach>
	</if>
</ul>
</div>

Скрипт:

<script type="text/javascript">
jQuery.noConflict(); 
jQuery(document).ready(function($){	
$(document).ready(function(){
    $("ul.menu li span").click(function() {
        $(this).parent().find("span.plus").toggle();
        $(this).parent().find("span.minus").toggle();
        $(this).parent().find("ul.subnav").slideToggle("normal");
      });
   });
});
</script>

CSS меню и иконки кнопок на ваше усмотрение (btn-expand.png, btn-collapse.png заливаются в папку с графикой актуального стиля). Пример.

Ссылка на родительскую категорию тут вырезана, клик на ней разворачивает-сворачивает категорию. Если хотите оставить активной только кнопку и вернуть ссылку, то нужно заменить:

<span class='categories'>{$r['category_name']}</span>

на:

<a href='{$this->registry->ccsFunctions->returnDatabaseUrl( $r['category_database_id'], $r['category_id'] )}'>{$r['category_name']}</a>

Выравнивание кнопок по правому краю меню:

<span class='plus right'><img src='{style_images_url}/btn-expand.png' /></span>
<span class='minus right' style='display: none;'><img src='{style_images_url}/btn-collapse.png' /></span>

19 октября 201312 г

Спасибо сделал, а можно сделать + и - возле тех категорий ы которых подкатегории.

19 октября 201312 г

Спасибо сделал, а можно сделать + и - возле тех категорий ы которых подкатегории.

<style>
span.minus, span.sub_minus, ul.subnav, ul.sub_subnav {
 display: none;
}
ul.sub_subnav li a { 
padding-left: 35px !important;
}
#category_list ul li a { 
display: inline-block !important;
padding-right: 0 !important;
width: 155px;
}
</style>
<div id='category_list' class='general_box clearfix'>
   <h3>{$this->lang->words['ab__categories']} <a href='{$this->_database_url}?view=categories'>{$this->lang->words['ab__seealllink']}</a></h3>
   <ul class='menu'>
       <if test="is_array( $this->_categories ) && count( $this->_categories )">
           <foreach loop="$this->_categories[0] as $r">
               <li>
                   <a href='{$this->registry->ccsFunctions->returnDatabaseUrl( $r['category_database_id'], $r['category_id'] )}'>{$r['category_name']}</a>
                   <if test="count( $this->_categories[ $r['category_id'] ] )">
                       <span class='plus right'><img src='{style_images_url}/btn-expand.png' /></span>
                       <span class='minus right'><img src='{style_images_url}/btn-collapse.png' /></span>
                       <ul class='subnav'>
                           <foreach loop="$this->_categories[ $r['category_id'] ] as $sub">
                               <li>
                                   <a href='{$this->registry->ccsFunctions->returnDatabaseUrl( $sub['category_database_id'], $sub['category_id'] )}'>{$sub['category_name']}</a>
                                   <if test="count( $this->_categories[ $sub['category_id'] ] )">
                                       <span class='sub_plus right'><img src='{style_images_url}/btn-expand.png' /></span>
                                       <span class='sub_minus right'><img src='{style_images_url}/btn-collapse.png' /></span>
                                       <ul class='sub_subnav'>
                                           <foreach loop="$this->_categories[ $sub['category_id'] ] as $sub_sub">
                                               <li>
                                                   <a href='{$this->registry->ccsFunctions->returnDatabaseUrl( $sub_sub['category_database_id'], $sub_sub['category_id'] )}'>{$sub_sub['category_name']}</a>
                                               </li>
                                           </foreach>
                                        </ul>
                                   </if>
                               </li>
                           </foreach>
                       </ul>
                   </if>
               </li>
           </foreach>
       </if>
   </ul>
</div>

<script type="text/javascript">
jQuery.noConflict(); 
jQuery(document).ready(function($){ 
$(document).ready(function(){
	$("ul.menu li span").click(function() {
		$(this).parent().find("span.plus").toggle();
		$(this).parent().find("span.minus").toggle();
		$(this).parent().find("ul.subnav").slideToggle("normal");
	});
	$("ul.subnav li span").click(function() {
		$(this).parent().find("span.sub_plus").toggle();
		$(this).parent().find("span.sub_minus").toggle();
		$(this).parent().find("ul.sub_subnav").slideToggle("normal");
	});
});
});
</script>

Примерно так, но скрипт надо проверять, возможна накладка. Кнопки нужно под условие опустить, что бы не парсились, если нет подкатегорий. Плюс добавлен 3-й уровень вложенности меню.

19 октября 201312 г

<div id='category_list' class='general_box clearfix'>
<h3>{$this->lang->words['ab__categories']} <a href='{$this->_database_url}?view=categories'>{$this->lang->words['ab__seealllink']}</a></h3> 
              <if test="$this->_database_url">
<br />
               <ul class="menu">
	<if test="is_array( $this->_categories ) && count( $this->_categories )">
		<foreach loop="$this->_categories[0] as $r">
			<li>
                                       <span class='plus right'><img src='{style_images_url}/btn-expand.png' /></span>
<span class='minus right' style='display: none;'><img src='{style_images_url}/btn-collapse.png' /></span>
				<a href='{$this->registry->ccsFunctions->returnDatabaseUrl( $r['category_database_id'], $r['category_id'] )}'>{$r['category_name']} ({$r['category_records']})</a>
				<if test="count( $this->_categories[ $r['category_id'] ] )">
					<ul class="subnav"> <foreach loop="$this->_categories[ $r['category_id'] ] as $sub">
                   <li>
								<a href='{$this->registry->ccsFunctions->returnDatabaseUrl( $sub['category_database_id'], $sub['category_id'] )}'><img src='{style_images_url}/bullet.png' alt='>' />{$sub['category_name']}({$r['category_records']})</a>
							</li>
						</foreach>
					</ul>
				</if>
			</li>
		</foreach>
	</if>
</ul>
</div>

У меня не получилось с последним методом, вот мой код. У меня после вставки последнего варианта все съехало.

19 октября 201312 г

У меня не получилось с последним методом, вот мой код. У меня после вставки последнего варианта все съехало.

Это вам нужно стили меню править. В сообщении выше воткнул css в блок, для примера.

Все работает:

19 октября 201312 г

Спасибо все супер.

В ксс добавил, код полностью заменил)). Спасибо.

7 месяцев спустя...

14 июня 201412 г

Всем привет!

Есть категории:

Статьи
База знаний

В категории "База знаний" есть под категория - "Рыбки" и еще одна под категория "Барбусы" в этим самых "Рыбках".

Проблема в том, что при наведении курсора на "Рыбки" не выпадает список под категорий этой под категории и при нажатии на странице не отображается список под категорий.

Как быть? Где править?

Спасибо!

К слову пункт

Показать список статей в этой категории? ДаНет
Если 'нет', в этой категории будут отображены только подкатегории. Если 'да', в этой категории будут отображены подкатегории и статьи.

Отключен

Стоит IP.Content v2.3.6 и хук (CSN-IPB34) jQuery v1.1.0

Создайте аккаунт или войдите в него для комментирования

Зарегистрировать аккаунт

Войти сейчас

Подписчики

Перейти к списку тем

FAQ: Сворачиваемые категории

Рекомендованные сообщения

Создайте аккаунт или войдите в него для комментирования

Важная информация

Аккаунт

Навигация

Поиск

Настроить push-уведомления браузера

Chrome (Android)

Chrome (компьютер)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (компьютер)

Firefox (Android)

Firefox (компьютер)