1

 

[HTML/CSS] 슬라이딩 메뉴

 

 

 

See the Pen XWKmagK by junheeleeme (@junheeleeme) on CodePen.

 

 

1. [JQuery] addClass로 클릭된 <li>요소에 'on' 클래스 속성 부여

 

2. [CSS] li:nth-child(n).on ~ span{ left: Xpx; } 

 

  ul#slide_menu li:nth-child(1).on ~ span#highlight { left: 5px; }
  ul#slide_menu li:nth-child(2).on ~ span#highlight { left: 130px; }
  ul#slide_menu li:nth-child(3).on ~ span#highlight { left: 255px; }
  ul#slide_menu li:nth-child(4).on ~ span#highlight { left: 380px; }

 

클래스에 'on'이 부여될때마다 'span#highlight'의 위치가 이동

 

저작자표시