پیشنمایش زنده
کد HTML
<div class="tab-container">
<input class="tab tab--1" id="tab1" name="tab" type="radio" />
<label for="tab1" class="tab_label">Profile</label>
<input class="tab tab--2" id="tab2" name="tab" type="radio" />
<label for="tab2" class="tab_label">Settings</label>
<input class="tab tab--3" id="tab3" name="tab" type="radio" />
<label for="tab3" class="tab_label">Notifications</label>
<div class="indicator"></div>
<div class="scroller"></div>
</div>
کد CSS
.component-title {
width: 100%;
position: absolute;
z-index: 999;
top: 30px;
left: 0;
padding: 0;
margin: 0;
font-size: 1rem;
font-weight: 700;
color: #888;
text-align: center;
}
.tab-container {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 2px;
border-radius: 9px;
}
.scroller {
content: "";
width: 15px;
height: 135px;
opacity: 0.4;
background: #888;
position: absolute;
top: 5px;
right: -17px;
border: 0.5px solid rgba(0, 0, 0, 0.04);
border-radius: 7px;
}
.indicator {
content: "";
width: 10px;
height: 28px;
background: #ffa500;
position: absolute;
top: 8px;
right: -15px;
z-index: 9;
border: 0.5px solid rgba(0, 0, 0, 0.04);
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.12), 0px 3px 1px rgba(0, 0, 0, 0.04);
border-radius: 7px;
transition: all 0.2s ease-out;
}
.tab {
width: 130px;
height: 28px;
position: absolute;
z-index: 99;
outline: none;
opacity: 0;
}
.tab_label {
width: 200px;
height: 50px;
position: relative;
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
border: 0;
font-size: 1rem;
cursor: pointer;
}
.tab--1:checked ~ .indicator {
top: 8px;
}
.tab--2:checked ~ .indicator {
top: calc(28px * 2 + 2px);
}
.tab--3:checked ~ .indicator {
top: calc(26.5px * 4 + 1px);
}