중첩 된 목록이 비뚤어진 부모와 일치하도록하십시오.

Question

비뚤어진 부모 div에있는 세로 방향 탐색을 만들려고합니다. 내 목표는 모든 목록 항목을 부모 div의 가장자리와 동일한 경로를 따르도록하는 것입니다. 그 방법에 대해서는 확실하지 않습니다.

기본 동작을 보여주는 코드 펫으로 샘플을 타이프했습니다.

http://codepen.io/anon/pen/YWYQmd

<div class="parent"> 
    <ul class="navigation"> 
    <li><a>text</a></li> 
    <li><a>text</a></li> 
    <li><a>menu</a> 
     <ul class="submenu"> 
     <li><a>text</a></li> 
     <li><a>text</a></li> 
     <li><a>menu</a> 
      <ul class="submenu"> 
      <li><a>text</a></li> 
      <li><a>text</a></li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
    <li>text</li> 
    <li>text</li> 
    <li>text</li> 
    </ul> 
</div> 

.parent { 
    background: rgba(123,23,55,0.2); 
    width: 500px; 
    text-align: right; 
    transform: skew(-20deg); 
} 
ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
li { 
    transform: skew(20deg); 
} 
.submenu{ 
    transform: skew(-20deg); 
} 

모든 팁

내가 원하는 것처럼 줄을 만들려면? 감사!

Answer 1

li 요소의 'unskewing'에서 문제가 발생합니다. li 요소가 다른 ul 인 경우 전체 블록이 unskewed가됩니다.

해야 할 일은 li이 아닌 li의 콘텐츠 만 '비공개'하는 것입니다. 가정의 모든 텍스트는 단지와 함께 'unskew'교체 a 태그 내에있을 것입니다 : 여기

li a{ 
    display: inline-block; 
    transform: skew(20deg); 
} 

참조 결과 : http://codepen.io/anon/pen/VjyzYq