이전 포스트에서는 네비게이션을 만드는 Walker를 살펴봤습니다.

종류별로 아이콘 만들기

이제는 종류별로 아이콘을 붙이기 위해 워커의 start_el()을 개조합니다. Font Awesome 4.7.0를 사용했습니다. Font Awesome의 CDN을 cdnjs에서 찾아 CSS에 추가했습니다.

아이콘은 Font Awesome Icon에서 찾아볼 수 있습니다.

다음 내용을 start_el()에 추가했습니다.

if ( in_array( 'front-item', $classes ) ) :
  if ( in_array( 'menu-item-object-custom' , $classes ) ) :
    $item_icon = "fa-link";
  elseif ( in_array( 'menu-item-object-post' , $classes ) ) :
    $item_icon = "fa-file-text-o";
  elseif ( in_array( 'menu-item-object-page' , $classes ) ) :
    $item_icon = "fa-file-o";
  elseif ( in_array( 'menu-item-object-category' , $classes ) ) :
    $item_icon = "fa-list";
  endif;
else :
  $item_icon = "";
endif;

$item_output = $args->before;
$item_output .= '';
// 아이콘 추가
$item_output .= '';
$item_output .= $args->link_before . $title . $args->link_after;
$item_output .= '';
$item_output .= $args->after;

서브메뉴 아코디언으로 만들기

start_el과 start_lvl를 손봐서 서브메뉴를 아코디언으로 만드려고 합니다.

아코디언 구조

아코디언 메뉴는 .accordion클래스 아래에 .accordion-header와 .accordion-body를 두어 자바스크립트를 이용해 제어합니다. 제가 만드려고 하는 구조는 대략 이렇습니다.

메뉴 1


    메뉴 2



메뉴 2-1

메뉴 2-2




    메뉴 3



메뉴 3-1

메뉴 3-2

원래 숨겨져 있는 .accordion-body는 .accordion-header를 누르면 펼쳐집니다. .accordion 아래 들어있는 다른 .accordion-body들은 숨깁니다.

네비게이션 워커

start_lvl는 .accordion-body와 .accordion 클래스를 담아둡니다. .accordion은 서브 메뉴에 있는 하위 아코디언 메뉴를 클릭했을 때 부모 아코디언까지 닫이버리는 오작동을 피하기 위해 추가하기 위한 것 입니다.

";
}

자바스크립트

문서를 로드한 후 .accordion-header 클래스의 요소에 드롭다운 아이콘을 추가합니다. 아이콘은 material icons에서 제공하는 것을 이용했습니다. 이 함수는 jQuery 기반으로 작성되었습니다.

var $document = $(document);
var $accordion_header = $('.accordion-header');

$document.ready(function(){
  html = $accordion_header.html();
  html += 'arrow_drop_down';
  $accordion_header.html(html);
});

이 아이콘은 활성화 되어있을 때 뒤집힙니다. 아코디언 헤더(.accordion-header)를 눌러 활성화 시키는 경우 해당 요소는 .accordion-active를 새로 얻도록 클릭 이벤트를 작성할 것입니다. 스타일을 이렇게 작성할 수 있습니다.

.accordion-header .accordion-icon {
  transition: transform .4s;
}
.accordion-header.accordion-active .accordion-icon {
  transform: rotate(180deg);
}

클릭 이벤트 를 작성합니다.

$accordion_header.click(function() {
  var $this = $(this);
  var $body = $this.next('.accordion-body');
  var $root = $this.closest('.accordion');
  var $others = $root.find($accordion_header).not($this);

  $others.next('.accordion-body').slideUp(200);
  $others.removeClass('accordion-active');
  $this.toggleClass('accordion-active');
  $body.slideToggle(200);
});

jQuery의 몇 가지 함수를 알아야 이 스크립트를 이해하기 편합니다. 우선 $( A ).next( B )는 A 선택자 바로 다음에 오는 B선택자 요소를 가져옵니다. $body의 경우 헤더요소 바로 뒤에 있는 몸통 요소를 불러오게 됩니다. $( A ).closest( B )은 A요소와 가장 가까운 B 부모를 가져옵니다. $root는 한 아코디언으로 묶인 헤더와 몸통을 가져오기 위한 것입니다. $( A ).find( B )는 A를 부모로 가진 B 선택자를 가져옵니다. .not( C )를 붙이면 선택된 것 중 C를 제외합니다.

이제 동작 부분입니다. 처음, .slideUp(200)으로 선택한 요소를 제외한 나머지 몸통을 슬라이드 0.2초 동안 애니메이션으로 숨깁니다. 그리고 .accordion-active 클래스가 있다면 제거하죠. 다음에는 toggleClass( A )를 이용해 A가 있다면 지우고, 없다면 추가하도록 만듭니다. 마지막으로 slideToggle(200)을 이용해 선택한 요소 바로 다음의 몸통을 열려있으면 닫고 닫혀있으면 열도록 합니다.

결과

[IMAGE: https://steemitimages.com/DQmS1cr2wYCVkPU9cXQbwwcptYLi6JPw3V814pXjQq2V2dM/soma0sd.local_.png]

실제 동작은 제가 작성한 CodePen에서 확인하실 수 있습니다.