Jump to content
Дизайн и модификация IPS Community

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

RuB@N
 Share

Recommended Posts

RuB@N Newbie

RuB@N

Posted
Posted

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

Автор: Я

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

 

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

<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

 

На здоровье!

 

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

  • Upvote 2
Link to comment
Share on other sites
Fisana Newbie

Fisana

Posted
Posted

http://ipbskins.ru/ipcontent/

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

Спасибо

 

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

  • Upvote 2
Link to comment
Share on other sites
  • 2 years later...
Атаман Rookie

Атаман

Posted
Posted

Для новых версий 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

  • Upvote 2
Link to comment
Share on other sites
  • 5 months later...
Атаман Rookie

Атаман

Posted
Posted

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

 

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

 

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

Link to comment
Share on other sites
Dmitriy427 Newbie

Dmitriy427

Posted
Posted

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

  • Upvote 1
Link to comment
Share on other sites
  • 1 month later...
Атаман Rookie

Атаман

Posted
Posted

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

Link to comment
Share on other sites
Dmitriy427 Newbie

Dmitriy427

Posted
Posted

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

 

В блоке "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>

  • Upvote 2
Link to comment
Share on other sites
Dmitriy427 Newbie

Dmitriy427

Posted
Posted

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

<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-й уровень вложенности меню.

  • Upvote 1
Link to comment
Share on other sites
Атаман Rookie

Атаман

Posted
Posted 

<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>

 

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

Link to comment
Share on other sites
Dmitriy427 Newbie

Dmitriy427

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

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

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

post-47391-0-21032800-1382195804_thumb.jpg

  • Upvote 1
Link to comment
Share on other sites
  • 7 months later...
Desme Newbie

Desme

Posted
Posted

Всем привет!

 

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

 

 

Статьи

База знаний

 

 

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

 

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

 

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

 

Спасибо!

 

 

К слову пункт

 

Показать список статей в этой категории? ДаНет

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

Отключен

 

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...