세로 탭 메뉴 만들기

Question

다음 탭 메뉴를 만들어야합니다. 몇 가지 팁을 주시거나 바이올린에 대한 몇 가지 예를 보여 주시겠습니까? 어떤 제안을 주셔서 감사합니다.

편집 .. 나는 위쪽과 아래쪽 화살표

.tabs { 
 
    list-style: none; 
 
    } 
 

 
.tabs a { 
 
    display: block; 
 
    width:110px; 
 
    padding: 10px 25px 10px 15px; 
 
    text-decoration: none; 
 
    background-color: #dde2e4; 
 
    color: #19305a; 
 
    font-weight: bold; 
 
    font-family: Lato; 
 
    font-size: 13px; 
 
    border-bottom: 1px solid #ccc; 
 
} 
 

 
.tabs a.active { 
 
    background: #fff; 
 
    border-right: none; 
 
}

<ul class="tabs"> 
 
    <li><a href="#tab1">Process Data</a></li> 
 
    <li><a href="#tab2" class="active">Requested Information</a></li> 
 
    <li><a href="#tab3">General Structure</a></li> 
 
    <li><a href="#tab4">Client Details</a></li> 
 
</ul>

Answer 1

나는 순수 CSS (와 필러 요소) 활용에 표시되는 문제가 함께 상단과 하단 모두 화살표를 만드는 것입니다 ... 도움이되지 않습니다 국경. 일반적으로 경계가있는 화살표의 솔루션은 :before 및 :after 가상 클래스를 사용합니다. 당신은 화살표 중 하나를 포기하고자하는 경우

, 가능한 해결책은 여기에서 볼 수 있습니다 :

http://codepen.io/rkieru/pen/grRqXq

Answer 2

그런 일을 만들 필요가? 당신에게 몇 가지 코드를주는 것은

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 200px; 
 
    background-color: #f1f1f1; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: #000; 
 
    padding: 8px 0 8px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a.active { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
} 
 

 
li a:hover:not(.active) { 
 
    background-color: #555; 
 
    color: white; 
 
}

<ul> 
 
    <li><a class="active" href="#process">Process Data</a></li> 
 
    <li><a href="#request">Requested Information</a></li> 
 
    <li><a href="#general">General Structure</a></li> 
 
    <li><a href="#client">Client Details</a></li> 
 
</ul>