2016-07-15 8 views
2

Ich versuche, eine vertikale Navigation, die in einem verzerrten Elternteil div ist. Mein Ziel ist es, dass alle Listenelemente dem gleichen Pfad wie der Rand des Eltern-Divs folgen. Ich bin mir nicht ganz sicher, wie ich das anstellen soll.Haben verschachtelte Listen mit verzerrten Eltern ausgerichtet

Ich tippte ein Beispiel in Codepen, das das Standardverhalten zeigt.

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); 
} 

irgendwelche Tipps, um es nach oben machen Linie wie ich will? Vielen Dank!

Antwort

2

Das Problem kommt von 'unskawing' li Elemente: in dem Fall das li Element hat eine andere ul, dann wird der gesamte Block entkernt.

Was Sie tun müssen, ist nur den Inhalt der li, nicht die li selbst "entsichern". Unter der Annahme, alle Text wird innerhalb eines a Tag sein, dann ersetzen Sie einfach Ihre 'unskew' mit:

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

See Ergebnis hier: http://codepen.io/anon/pen/VjyzYq

+0

Einfach und effektiv. Vielen Dank! – Michael

Verwandte Themen