[jQuery] ul 메뉴를 브랜드크럼 메뉴( breadcrumb ) 스타일로 표현하기.

브랜드크럼 메뉴 breadcrumb
현재의 위치를 홈 > 서비스 > 서비스 상세 같이 표시하는 것을 브랜드크럼이라고 부릅니다. 빵조각이라는 뜻으로 '헨젤과 그레텔'이야기에서 빵조각으로 돌아갈 길을 표시한다는 의미에서 유래되었습니다.

CSS

    .listStyle{padding:20px; display:inline;}
    .listStyle::before {padding-right:15px; content:">"; font-size:0.75em; color:#266FEF;  }
    .ulListStyle {list-style: none; display:inline; margin:0; padding:0;}

jQuery

    $(document).ready(function(){
      $('ul').addClass('ulListStyle');
  	$('ul li ul li').addClass('listStyle');
    });

소스 실행보기

See the Pen breadcrumb menu by daeyun (@daeyun) on CodePen.