코스모스팜 스레드
계층형 카테고리 문의입니다. (드롭다운 메뉴 형태)
수고하십니다 ^^
업데이트 해주신 계층형 카테고리 기능으로 퓨어갤러리 스킨을 수정하여 제품소개를 구현했습니다.
기능이 잘 작동하나 2 depth 메뉴의 장점인 하위 메뉴에 들어가지 않고 마우스 오버시 하위메뉴가 보여져서
한번에 하위메뉴로 들어갈 수 있게 하는것이 사용자를 더 배려하는것이 아닐까하는 생각이 들었습니다. (pc의 경우)
이런 이유로 퓨어갤러리 스킨 폴더의 list-category-tree-tab.php 를 살펴보았는데 온클릭시 하위 메뉴와
콘텐츠를 로딩시키는 구문인듯 보이더군요. 상위 메뉴에 마우스 롤오버시 하위 메뉴가 보여진 후 온클릭시 해당 메뉴의
콘텐츠를 로딩시키는 구조로 구현될 수 있는지 궁금합니다.
또 가능하다면 예시 코드를 알려주시면 감사하겠습니다.
-
스레드봇 (31060 Point)ㆍ2018.03.09 14:51
안녕하세요~^^
아래 코드를 넣어보시겠어요?
2 depth 까지만 적용이 되는걸 확인했습니다.
<div class="kboard-tree-category-search"> <form id="kboard-tree-category-search-form-<?php echo $board->id?>" method="get" action="<?php echo $url->toString()?>"> <?php echo $url->set('pageid', '1')->set('target', '')->set('keyword', '')->set('mod', 'list')->toInput()?> <input type="hidden" name="kboard_search_option[tree_category_1][key]" value="tree_category_1"> <input type="hidden" name="kboard_search_option[tree_category_1][value]" value="<?php echo $board->tree_category->getCategoryNameWithDepth(1)?>"> <input type="hidden" name="kboard_search_option[tree_category_2][key]" value="tree_category_2"> <input type="hidden" name="kboard_search_option[tree_category_2][value]" value="<?php echo $board->tree_category->getCategoryNameWithDepth(2)?>"> <div class="kboard-tree-category-wrap"> <?php $tree_category_list = $board->tree_category->getCategoryItemList()?> <div class="kboard-search-option-wrap-1 kboard-search-option-wrap type-tab"> <ul class="kboard-tree-category"> <li<?php if(!$board->tree_category->getCategoryNameWithDepth(1)):?> class="kboard-category-selected"<?php endif?>><a href="#" onclick="return kboard_tree_category_search_all()"><?php echo __('All', 'kboard')?></a></li> <?php foreach($tree_category_list as $item):?> <li<?php if($board->tree_category->getCategoryNameWithDepth(1) == $item['category_name']):?> class="kboard-category-selected"<?php endif?>> <a href="#" onclick="return kboard_tree_category_search_1dapth('<?php echo $item['category_name']?>')"><?php echo $item['category_name']?></a> <?php $sub_tree_category_list = array(); foreach($board->tree_category->tree_category as $sub_item){ if($item['id'] == $sub_item['parent_id']){ $sub_tree_category_list[] = $sub_item; } } ?> <?php if($sub_tree_category_list):?> <ul class="sub-tree-category"> <?php foreach($sub_tree_category_list as $sub_item):?> <li<?php if($board->tree_category->getCategoryNameWithDepth(2) == $sub_item['category_name']):?> class="kboard-category-selected"<?php endif?>><a href="#" onclick="return kboard_tree_category_search_2dapth('<?php echo $item['category_name']?>', '<?php echo $sub_item['category_name']?>')"><?php echo $sub_item['category_name']?></a></li> <?php endforeach?> </ul> <?php endif?> </li> <?php endforeach?> </ul> </div> </div> </form> </div> <script> function kboard_tree_category_search_all(){ jQuery('input[name="kboard_search_option[tree_category_1][value]"]').val(''); jQuery('input[name="kboard_search_option[tree_category_2][value]"]').val(''); return kboard_tree_category_search('1', ''); } function kboard_tree_category_search_1dapth(category1){ jQuery('input[name="kboard_search_option[tree_category_2][value]"]').val(''); return kboard_tree_category_search('1', category1); } function kboard_tree_category_search_2dapth(category1, category2){ jQuery('input[name="kboard_search_option[tree_category_1][value]"]').val(category1); return kboard_tree_category_search('2', category2); } </script>그리고 아래 CSS 코드도 추가를 해주세요.
default 스킨 기준이기 때문에 사용하시는 스킨에 맞춰 코드를 반드시 수정해주셔야합니다.
#kboard-default-list .kboard-tree-category { overflow: visible; } #kboard-default-list .kboard-tree-category>li { position: relative; } #kboard-default-list .sub-tree-category { position: absolute; padding: 0; min-width: 200px; background-color: #f9f9f9; } #kboard-default-list .sub-tree-category>li { display: block; margin: 0; padding: 0 5px; border: 0; list-style: none; } #kboard-default-list .sub-tree-category>li::before, #kboard-default-list .sub-tree-category>li::after { display: none; } #kboard-default-list .sub-tree-category>li>a { font-weight: normal !important; border-bottom: 2px solid transparent !important; } #kboard-default-list .sub-tree-category>li.kboard-category-selected a { font-weight: bold !important; } #kboard-default-list .kboard-tree-category>li .sub-tree-category { display: none; } #kboard-default-list .kboard-tree-category>li:hover .sub-tree-category { display: block; }앞으로 지속적으로 계층형 카테고리로 다양한 레이아웃을 만들 수 있도록 기능을 고도화해서 업데이트 하겠습니다.
고맙습니다.
-
스레드봇 (31060 Point)ㆍ2018.03.09 09:35
안녕하세요~^^
간단한 코드 수정으로는 어려울 듯합니다.
직접 코드 수정이 가능하시다면 아래의 예제를 참고하신 후에 적용해보시겠어요?
<script> var my_tree_category = kboard_current.tree_category; jQuery('.kboard-tree-category li').mouseover(function(){ var parent = jQuery(this).children('a').text(); jQuery.each(my_tree_category, function(index, element){ if(parent == element.category_name){ jQuery.each(my_tree_category, function(children_index, children_element){ if(element.id == children_element.parent_id){ jQuery('.kboard-tree-category').after('<div class="my-children">'+children_element.category_name+'</div>'); } }); } }); }); jQuery('.kboard-tree-category li').mouseout(function(){ jQuery('.my-children').remove(); }); </script>추후 연구 개발하여 계층형 카테고리 기능을 업데이트하도록 하겠습니다.
고맙습니다.
-
대경 (10 Point)ㆍ2018.03.09 11:28
네 고맙습니다. 페이지에 적용해봤는데 작동하지 않아서 문의드렸습니다.
아래는 퓨어 갤러리 스킨의 list-category-tree-tab.php 파일이고 위의 스크립트가 작동되는지 시간되실때 확인좀 부탁드리겠습니다.
<script> var my_tree_category = kboard_current.tree_category; jQuery('.kboard-tree-category li').mouseover(function(){ var parent = jQuery(this).children('a').text(); jQuery.each(my_tree_category, function(index, element){ if(parent == element.category_name){ jQuery.each(my_tree_category, function(children_index, children_element){ if(element.id == children_element.parent_id){ jQuery('.kboard-tree-category').after('<div class="my-children">'+children_element.category_name+'</div>'); } }); } }); }); jQuery('.kboard-tree-category li').mouseout(function(){ jQuery('.my-children').remove(); }); </script> <div class="kboard-tree-category-search"> <form id="kboard-tree-category-search-form-<?php echo $board->id?>" method="get" action="<?php echo $url->toString()?>"> <?php echo $url->set('pageid', '1')->set('target', '')->set('keyword', '')->set('mod', 'list')->toInput()?> <div class="kboard-tree-category-wrap"> <?php $tree_category_list = $board->tree_category->getCategoryItemList()?> <div class="kboard-search-option-wrap-<?php echo $board->tree_category->depth?> kboard-search-option-wrap type-tab"> <input type="hidden" name="kboard_search_option[tree_category_<?php echo $board->tree_category->depth?>][key]" value="tree_category_<?php echo $board->tree_category->depth?>"> <input type="hidden" name="kboard_search_option[tree_category_<?php echo $board->tree_category->depth?>][value]" value="<?php echo $board->tree_category->getCategoryNameWithDepth($board->tree_category->depth)?>"> <ul class="kboard-tree-category"> <li<?php if(!$board->tree_category->getCategoryNameWithDepth($board->tree_category->depth)):?> class="kboard-category-selected"<?php endif?>><a href="#" onclick="return kboard_tree_category_search('<?php echo $board->tree_category->depth?>', '')"><?php echo __('All', 'kboard')?></a></li> <?php foreach($tree_category_list as $item):?> <li<?php if($board->tree_category->getCategoryNameWithDepth($board->tree_category->depth) == $item['category_name']):?> class="kboard-category-selected"<?php endif?>><a href="#" onclick="return kboard_tree_category_search('<?php echo $board->tree_category->depth?>', '<?php echo $item['category_name']?>')"><?php echo $item['category_name']?></a></li> <?php endforeach?> </ul> </div> <?php foreach($board->tree_category->getSelectedList() as $key=>$category_name):?> <?php $tree_category_list = $board->tree_category->getCategoryItemList($category_name)?> <?php if($tree_category_list):?> <div class="kboard-search-option-wrap-<?php echo $board->tree_category->depth?> kboard-search-option-wrap type-tab"> <input type="hidden" name="kboard_search_option[tree_category_<?php echo $board->tree_category->depth?>][key]" value="tree_category_<?php echo $board->tree_category->depth?>"> <input type="hidden" name="kboard_search_option[tree_category_<?php echo $board->tree_category->depth?>][value]" value="<?php echo $board->tree_category->getCategoryNameWithDepth($board->tree_category->depth)?>"> <ul class="kboard-tree-category-2"> <?php foreach($tree_category_list as $item):?> <li<?php if($board->tree_category->getCategoryNameWithDepth($board->tree_category->depth) == $item['category_name']):?> class="kboard-category-selected"<?php endif?>><a href="#" onclick="return kboard_tree_category_search('<?php echo $board->tree_category->depth?>', '<?php echo $item['category_name']?>')"><?php echo $item['category_name']?></a></li> <?php endforeach?> </ul> </div> <?php endif?> <?php endforeach?> </div> </form> </div> -
대경 (10 Point)ㆍ2018.03.09 18:49
드롭다운 메뉴가 잘 구현되는것을 확인했습니다. 모바일에서의 표현방법에 대해서는 고민해봐야겠습니다.
(예-대메뉴만 표시)
소중한 시간 내어 도움주셔서 감사합니다 ^^
-
백트 (126 Point)ㆍ2018.04.08 21:47
저 코드를 기존 list.php 내용중 카테고리부분의 기존코드 삭제후 붙여넣었는데.. 이방법이 맞나요?
했더니 아래 링크처럼 표시됩니다.
https://imgur.com/gallery/aalbh
첨부사진의 장면은..1차 카테고리중에서 나나나로 이동(클릭하진않고 마우스만 갖다댄상태)한 장면인데..
2차카테고리가 바로아래로 말고 약간 우측으로 밀려서 표현되는데.. 좀 많이 우측밀려있어서.. 마치 다다다메뉴에 해당하는 것처럼 보여집니다.
또한 1차카테고리 아래에 밑줄쫙 있는게,, 나나나로 이동을 하지않고 계속 가가가에 머물러 있습니다. (클릭을 하고나면 아주약간의 시간차를 두고 밑줄이 잘 이동합니다.)
그리고 2차 카테고리가 드롭다운으로 보여질때 드롭다운의 배경 칼라를 약간이라도 더 어둡게해서 1차카테고리 메뉴와 구분이 되면 좋겠는데...
위 세가지를 수정할 수 있을까요?
초보라 질문이 많아 죄송합니다.
감사합니다..
-
스레드봇 (31060 Point)ㆍ2018.04.09 10:00
안녕하세요.
레이아웃 관련 문제는 저희가 직접 봐야 도움을 드릴 수 있습니다.
확인 가능한 페이지 알려주시겠어요?
드롭다운 배경색은 위의 코드 중에서 아래의 코드를
#kboard-default-list .sub-tree-category { position: absolute; padding: 0; min-width: 200px; background-color: #f9f9f9; }아래처럼 수정해주시면 됩니다.
#kboard-default-list .sub-tree-category { position: absolute; padding: 0; min-width: 200px; background-color: black; }고맙습니다.
-
Dami Jung (70 Point)ㆍ2019.03.21 19:27
<div class="kboard-tree-category-search"> <form id="kboard-tree-category-search-form-<?php echo $board->id?>" method="get" action="<?php echo $url->toString()?>"> <?php echo $url->set('pageid', '1')->set('target', '')->set('keyword', '')->set('mod', 'list')->toInput()?> <input type="hidden" name="kboard_search_option[tree_category_1][key]" value="tree_category_1"> <input type="hidden" name="kboard_search_option[tree_category_1][value]" value="<?php echo $board->tree_category->getCategoryNameWithDepth(1)?>"> <input type="hidden" name="kboard_search_option[tree_category_2][key]" value="tree_category_2"> <input type="hidden" name="kboard_search_option[tree_category_2][value]" value="<?php echo $board->tree_category->getCategoryNameWithDepth(2)?>"> <div class="kboard-tree-category-wrap"> <?php $tree_category_list = $board->tree_category->getCategoryItemList()?> <div class="kboard-search-option-wrap-1 kboard-search-option-wrap type-tab"> <ul class="kboard-tree-category"> <li<?php if(!$board->tree_category->getCategoryNameWithDepth(1)):?> class="kboard-category-selected"<?php endif?>><a href="#" onclick="return kboard_tree_category_search_all()"><?php echo __('All', 'kboard')?></a></li> <?php foreach($tree_category_list as $item):?> <li<?php if($board->tree_category->getCategoryNameWithDepth(1) == $item['category_name']):?> class="kboard-category-selected"<?php endif?>> <a href="#" onclick="return kboard_tree_category_search_1dapth('<?php echo $item['category_name']?>')"><?php echo $item['category_name']?></a> <?php $sub_tree_category_list = array(); foreach($board->tree_category->tree_category as $sub_item){ if($item['id'] == $sub_item['parent_id']){ $sub_tree_category_list[] = $sub_item; } } ?> <?php if($sub_tree_category_list):?> <ul class="sub-tree-category"> <?php foreach($sub_tree_category_list as $sub_item):?> <li<?php if($board->tree_category->getCategoryNameWithDepth(2) == $sub_item['category_name']):?> class="kboard-category-selected"<?php endif?>><a href="#" onclick="return kboard_tree_category_search_2dapth('<?php echo $item['category_name']?>', '<?php echo $sub_item['category_name']?>')"><?php echo $sub_item['category_name']?></a></li> <?php endforeach?> </ul> <?php endif?> </li> <?php endforeach?> </ul> </div> </div> </form> </div> <script> function kboard_tree_category_search_all(){ jQuery('input[name="kboard_search_option[tree_category_1][value]"]').val(''); jQuery('input[name="kboard_search_option[tree_category_2][value]"]').val(''); return kboard_tree_category_search('1', ''); } function kboard_tree_category_search_1dapth(category1){ jQuery('input[name="kboard_search_option[tree_category_2][value]"]').val(''); return kboard_tree_category_search('1', category1); } function kboard_tree_category_search_2dapth(category1, category2){ jQuery('input[name="kboard_search_option[tree_category_1][value]"]').val(category1); return kboard_tree_category_search('2', category2); } </script>위에서 언급하신 이 코드를
워드프레스 관리자 -> 외모(테마 디자인) -> 테마 편집기 페이지에서 functions.php 파일 하단에 추가 하면 되는 건가요?
감사합니다.
-
스레드봇 (31060 Point)ㆍ2019.03.22 08:55
안녕하세요.
올려주신 코드를 테마 쪽 functions.php 파일이 아닌 스킨 쪽 파일을 수정해보시겠어요?
FTP로 접속해서 /wp-content/plugins/kboard/skin/사용중인스킨/list-category-tree-tab.php 파일의 코드를 교체해보세요.
만약, 아래 링크에 안내해드린 코드를 테마 쪽 functions.php 파일에 추가하셨다면
해당 코드는 지우신 후 확인해주세요.
https://www.cosmosfarm.com/threads/document/31320
고맙습니다.
