Раскрытие и свертывание меню на WordPress

Добрый день.

Реализовал на сайте вывод рубрик с миниатюрами (миниатюры задавал плагином Taxonomy Images). Собираюсь использовать их в качестве главного меню со списком основных категорий. На практике это выглядит так:

Реализовывал с помощью следующего кода:

<?php $args = array(
   'parent' => 0,
   'hide_empty' => 0,
   'exclude' => '14,5,2,12,8,11,7,13', // ID рубрики, которую нужно исключить
   'number' => '0',
   'taxonomy' => 'category', // таксономия, для которой нужны изображения
   'pad_counts' => true
);
$categories = get_categories($args); // получаем все категории в виде массива

$images_raw  = get_option( 'taxonomy_image_plugin' ); // получаем все изображения в виде массива
$term_taxonomy_string = '';
foreach ($categories as $category) {    // перебираем массив полученных категорий
	$term_taxonomy_id = $category->term_taxonomy_id; // узнаем ID категории
	$term_taxonomy_name = $category->name;    // узнаем имя категории
	$term_taxonomy_image = wp_get_attachment_image( $images_raw[ $term_taxonomy_id ], 'full' );    // получаем прикрепленное изображение
	 $term_taxonomy_link = get_term_link((int)$term_taxonomy_id, 'category' );    // получаем ссылку на соответствующую рубрику

	$term_taxonomy_string .= '<div class="subcategory-category-card">

			<div class="thumbnail"><a rel="nofollow" href="'.$term_taxonomy_link.'">'.$term_taxonomy_image.'</a></div>
			<span class="category-title"><a href="'.$term_taxonomy_link.'">'.$term_taxonomy_name.'</a></span>
		</div>'; // формируем полученные данные и записываем в строку
}
echo $term_taxonomy_string;    // выводим сформированную ранее строку - рубрики с изображениями
?>

На главной странице сайта такое меню будет выглядеть вполне достойно, как рубрикатор. А вот на всех остальных довольно громоздко, так как 3 ряда это многовато.

Вот в чем вопрос. Надеюсь, что подскажете.

Нужно сделать так, чтобы показывался лишь 1 ряд (заданное количество рубрик), а все остальное скрывалось и снизу ряда присутствовала ссылка (например, показать все разделы), при нажатии на которую происходит раскрытие полного меню.

Пытался добавить реализовать с помощью jquery. Вот пример функции, которую использовал:

jQuery('.primer').hide()

jQuery('.vce_razdely').click(function()
{
	jQuery('.vce').slideDown(400);
	jQuery(this).hide()
});

Yо проблема в том, что там получается скрыть только конкретный текст, разместив его внутри соответствующего блока в шаблоне.

Нужно же сделать, чтобы автоматически скрывалось все, что идет после n-й (например, после 4й) рубрикой в данной реализации меню. Т.е. функция должна сама все определять и скрывать.

Обращаюсь к вам, как к знающему человеку. Надеюсь, что хоть что-то подскажете. Если не с этой функцией, то может быть с другой.

Заранее спасибо за ответ.
С уважением, Константин.

Kama9735

Оберни все в div пусть будет .wrap. Задай ему стили: overflow:hidden; height:200px;. Высоту подбери, там миниатюры наверняка конкретной высоты, значит можно подобрать.

Далее добавь кнопку, пусть будет с классом .vce_razdely и используй примерно такой код:

!fnction($){

	var originHeight,
		$wrap = $('.wrap');

	$('.vce_razdely').click(function(){
		if( ! originHeight )
			originHeight = $wrap.height();

		if( $wrap.css('overflow') == 'hidden' ){
			$wrap.css({ overflow:'visible', height:'auto' });
		}
		else{
			$wrap.css({ overflow:'hidden' }).height(originHeight);
		}
	});

}(jQuery)

9 лет назад #

Комментировать