Как сделать выпадающие разделы товаров при клике на категорию?

Question

[midas34]

Задача состоит в том что бы на странице отображались категории, (Заголовок/под ним изображение) в ряду 3 категории, 3 колонки, сам вывод осуществляется через foreach категорий и foreach субкатегорий, функция работате отлично всё выводит, необходимо сделать так что бы при клике на категорию внизу появлялся блок с субкатегориями, на данный момент всё расползайется

Сделал пример на jsfiddle

Comments

[PetrPo]

Выложи пример html на codepen без php. Как ты хочешь чтобы тебе с js помогли, если визуально ничего не видно

[midas34]

Сделал пример на jsfiddle, сможешь помочь? new-vid-razdel ещё надо сделать во всю ширину, разделов много

[PetrPo]

Как-то так?
ссылка

[midas34]

PetrPo, огромное спасибо, всё подошло, я где то 3 недели ломал голову над этим, скинь номер телефона или карты отблагодарю по братски, реализовал так:

<?php
	$args = array(
        'taxonomy'   => 'product_cat',
        'hide_empty' => false,
        'parent'   => 0,      );
      $product_categories = get_terms( $args );
      $count = count($product_categories);
    echo '<div id="new-vid-category" data-open_parent="1">';
      if ( $count > 0 ){
        foreach ( $product_categories as $product_category ) {
         $thumbnail_id = get_woocommerce_term_meta( $product_category->term_id, 'thumbnail_id', true );
		  echo '<article class="new-vid-catalog" data-open="1">';
		   echo '<a href="' . get_term_link( $product_category ) . '" title=""><h2>' . $product_category->name . '</h2></a>';
		   echo  '<div class="btn"><img src="'.  wp_get_attachment_url( $thumbnail_id ) .'" style="border:0;"></div>';
           echo '<nav id="menu-item-cat" class="new-vid-razdel" data-open_child="1">';
             echo  '<a href="' . get_term_link( $product_category ) . '" title="" class="new-vid-title-m"><h2>' . $product_category->name . '</h2></a>';
             echo  '<div class="image-cat-item"><img src="'.  wp_get_attachment_url( $thumbnail_id ) .'" style="border:0;"></div>';
             echo  '<ul class="new-parent-title-overlay">';
			$args = array(
                'taxonomy'   => 'product_cat',
                'hide_empty' => false,
                'parent'   => $product_category->term_id,);
              $product_categories = get_terms( $args );
              $count = count($product_categories);
              if ( $count > 0 ){
                foreach ( $product_categories as $product_category ) {
                  $thumbnail_id = get_woocommerce_term_meta( $product_category->term_id, 'thumbnail_id', true );
                 echo '<li class="new-parent-desc">';
                 echo  '<a href="' . get_term_link( $product_category ) . '" title="">';
                  echo '<img src="'.  wp_get_attachment_url( $thumbnail_id ) .'" style="width: 150px; height: 150px; border:0;">';
                  echo  '<h4>' . $product_category->name . '</h4></a>'; 
                 echo  '</li>';}}
		  echo  '</ul>';
		  echo  '</nav>';
      echo  '</article>';} }
 echo  '</div>';
?>

/*Каталог Новый START*****************************************************************************************/
@media screen and (max-width: 1440px) {
	.new-vid-catalog h2 {
		font-size: 16px;
	}
	.new-vid-razdel ul {
	margin: 10px 50px 15px 310px;;
}
}
@media screen and (max-width: 1024px) {
	.new-vid-razdel ul {
	margin: 10px 10px 15px 310px;;
}
}
body {
	margin:0;
	/*min-height:100vw;*/
}
#new-vid-category {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	vertical-align: top;
	text-align: center;
}
.new-vid-catalog {
	vertical-align: top;
	flex-grow:0;
	flex-shrink:0;
	width:33.33333%;
}
.new-vid-catalog a {
	margin-bottom: 10px;
	text-decoration: none;
}
.new-vid-catalog a:hover {
	text-decoration: underline;
}
.new-vid-catalog h2 {
	font-size: 22px;
}
.new-vid-catalog h2:hover {
	color: #09612c;
}
.btn {
	cursor: pointer;
	margin-top: 10px;
	margin-bottom: 10px;
}
.btn img:hover {
	border-radius: 10px;
	background: rgba(23, 140, 52, 0.75);
	box-shadow: 0 0 10px #444;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}
/*.btn:active {
	background: rgba(23, 140, 52, 0.75);	
}*/
#menu-item-cat {
	border: solid 1px #09612c;
	background-image: url(https://alligator.myfounder.online/wp-content/uploads/2020/01/romby.svg);
  background-repeat: no-repeat;
  background-position-x: right;
  background-position-y: top;
  background-size: 20%;
	text-align: left;
}
.image-cat-item {
	height: 100%;
	vertical-align: middle!important;
	text-align: center;
}
.new-vid-razdel {
	width:300%;
	box-sizing:border-box;
	display:none;
	background:#FFF;
	position:relative;
}
.new-vid-catalog:nth-child(3n+2) .new-vid-razdel {
	margin-left:-100%;
}
.new-vid-catalog:nth-child(3n+3) .new-vid-razdel {
	margin-left:-200%;
}
.new-vid-catalog.active  .new-vid-razdel {
	z-index:2;
}
#menu-item-cat .new-vid-title-m {
	display: block;
	margin-bottom: 10px;
	text-align: center;
}
.new-vid-title-m h2 {
	font-size: 22px;
}
.new-vid-razdel h2:hover {
    color: #09612c;
}
.image-cat-item img {
  height: 200px;
	margin-top: 20%;
}
#menu-item-cat .image-cat-item {
	display: flex;
	float: left;
	height: auto;
	margin: 10px;
}
.new-vid-razdel ul {
	display: block;
	list-style: none;
	margin: 10px 100px 15px 310px;
	padding: 0;
}
li.new-parent-desc {
  display: inline-block;
  width: 200px;
  text-align: center;
	vertical-align: top;
}
.new-vid-razdel a {
	text-decoration: none;
}
.new-vid-razdel a:hover {
	text-decoration: underline;
}
.new-vid-razdel h4:hover {
	color: #09612c;
}
/*Каталог Новый ******************************************************************************************END*/

тестовая страница

[midas34]

PetrPo, А можно ли в скрипт добавить что при выборе категории и раскрытия списка, Активная категория меняет background, как при на ведении?

[PetrPo]

midas34, про активную категорию, скриптом к классу new-vid-catalog добавляется класс active, в css можешь от этого класса плясать как хочешь, типа

.new-vid-catalog.active .btn img {
    background: rgba(23, 140, 52, 0.75);
    box-shadow: 0 0 10px #444;
}

В благодарность, плюсани просто мой ответ, продублирую его)

[PetrPo]

midas34, вот тебе и благодарность, даже ответ не отметил решением((

[midas34]

PetrPo, сорян видать 2 раза нажал, отметил? поставил код который ты прислал, но почему то выдвигаться не хочет
Ссылка

Answer 1

[PetrPo]

Как-то так?
ссылка

Answer 2

[Сергей Горячев]

Бррр... Формировать хтмл на бэкэнде...
Имхо, надо формировать многомерный массив, который отдавать в js. И там уже формировать меню.
Так и сервер и клиент будут заниматься тем, что им положено.
Реализаций меню на js гуглится вагон...

Comments

[midas34]

добрый день, а есть ссылка на аналог? гуглю то пока нужного не нашёл

[Сергей Горячев]

Ну... ТУТ
А вообще, забиваете в поиск jquery menu... Можно с добавками multilevel, dropdown

[midas34]

благодарю

Answer 3

[midas34]

Огромное спасибо автору PetrPo вот его решение Ссылка

Answer 4

[k4sus]

в коде у тебя бардак, лучше сделай какую то переменнную и весь код туда отдай, кроме массива естественно.
Например.
$menugator = '';
$menugator. ='';
$menugator.="code code code..........";

$menugator.= "";

Comments

[midas34]

бардак? что можете тогда предложить? а выше что это?