순수한 CSS를 사용하여 메뉴 아래에있는 화살표를 슬라이드

Question

메뉴에서 마우스를 가져 가면 화살표가 왼쪽에서 왼쪽으로 이동하여 현재 마우스로 가리키고있는 메뉴 항목으로 이동합니다.

JavaScript에서는 화살표 요소의 "왼쪽"속성으로 마우스를 가져와 재생할 수있는 이벤트를 바인딩 하겠지만 순수한 CSS3 애니메이션 솔루션을 사용할 수 있는지 궁금합니다.

화살표는이 스레드 - Show border triangle in navbar using CSS

유사하지만, 나는 그것을 표시하지 않는 내가 화살표가 항상 표시 할 hide-하고 나는 '메뉴에 따라 오른쪽에서 왼쪽으로 밀어 것 현재 movering.

이것은 내가 JS에서 일을했던 경우는 어떻게 보일지입니다 : 마크 업의 변화와

var arrEle = $("#indication-mark-wrap"); 
 
var startHover = $(arrEle).css("left"); 
 
$("li").mouseenter(function() { 
 
    var left = $(this).position().left; 
 
    $(arrEle).css("left", left+30); 
 
}); 
 

 
$("li").mouseleave(function() { 
 
    $(arrEle).css("left", startHover); 
 
});

ul { 
 
    list-style-type: none; 
 
    padding: 0px; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
    width: 80px; 
 
    color: white; 
 
    background-color: black; 
 
    height: 50px; 
 
} 
 

 
#indication-mark-wrap { 
 
    position: absolute; 
 
    left: 38px; 
 
    top: 56px; 
 
    background: wheat; 
 
    -webkit-transition: all 1000ms cubic-bezier(0.000, 0.000, 0.330, 0.990); 
 
    -moz-transition: all 1000ms cubic-bezier(0.000, 0.000, 0.330, 0.990); 
 
    -o-transition: all 1000ms cubic-bezier(0.000, 0.000, 0.330, 0.990); 
 
    transition: all 1000ms cubic-bezier(0.000, 0.000, 0.330, 0.990); 
 
    /* custom */ 
 
    -webkit-transition-timing-function: cubic-bezier(0.000, 0.000, 0.330, 0.990); 
 
    -moz-transition-timing-function: cubic-bezier(0.000, 0.000, 0.330, 0.990); 
 
    -o-transition-timing-function: cubic-bezier(0.000, 0.000, 0.330, 0.990); 
 
    transition-timing-function: cubic-bezier(0.000, 0.000, 0.330, 0.990); 
 
    /* custom */ 
 
} 
 

 
.indication-mark { 
 
    position: relative; 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="menu"> 
 
    <ul> 
 
    <li>Selection1</li> 
 
    <li>Selection2</li> 
 
    <li>Selection2</li> 
 
    </ul> 
 
</div> 
 

 
<div id="indication-mark-wrap"> 
 
    <canvas width="20" height="20" class="indication-mark"></canvas> 
 
</div>

Sample JSFiddle

Answer 1

, 당신은 이런 식으로 할 수 있습니다.

$(function(){ 
 
$("li").click(function(){ 
 
    $(".active").removeClass("active"); 
 
    $(this).addClass("active"); 
 
}) 
 
});

ul { 
 
    list-style-type: none; 
 
    padding: 0px; 
 
} 
 

 
li { 
 
    background-color: black; 
 
} 
 

 
li:nth-child(-n+3) { 
 
    display: inline-block; 
 
    width: 80px; 
 
    color: white; 
 
    height: 50px; 
 
} 
 

 
#indication-mark-wrap { 
 
    position: absolute; 
 
    left: 35px; 
 
    top: 56px; 
 
    background: wheat; 
 
    -webkit-transition: all 1000ms cubic-bezier(0.000, 0.000, 0.330, 0.990); 
 
    -moz-transition: all 1000ms cubic-bezier(0.000, 0.000, 0.330, 0.990); 
 
    -o-transition: all 1000ms cubic-bezier(0.000, 0.000, 0.330, 0.990); 
 
    transition: all 1000ms cubic-bezier(0.000, 0.000, 0.330, 0.990); 
 
    /* custom */ 
 
    -webkit-transition-timing-function: cubic-bezier(0.000, 0.000, 0.330, 0.990); 
 
    -moz-transition-timing-function: cubic-bezier(0.000, 0.000, 0.330, 0.990); 
 
    -o-transition-timing-function: cubic-bezier(0.000, 0.000, 0.330, 0.990); 
 
    transition-timing-function: cubic-bezier(0.000, 0.000, 0.330, 0.990); 
 
    /* custom */ 
 
} 
 

 
.indication-mark { 
 
    position: relative; 
 
    display: block; 
 
} 
 

 
li:nth-child(2):hover ~ li #indication-mark-wrap { 
 
    left: 118px; 
 
} 
 
li:nth-child(3):hover ~ li #indication-mark-wrap { 
 
    left: 200px; 
 
} 
 
    
 
li:nth-child(1).active ~ li #indication-mark-wrap { 
 
    left: 35px; 
 
} 
 

 
li:nth-child(2).active ~ li #indication-mark-wrap { 
 
    left: 118px; 
 
} 
 
li:nth-child(3).active ~ li #indication-mark-wrap { 
 
    left: 200px; 
 
} 
 

 
#indication-mark-wrap:before, 
 
#indication-mark-wrap:after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 15px; 
 
    width: 0; 
 
    height 0; 
 
    border-left: 15px solid transparent; 
 
    border-right: 15px solid transparent; 
 
    border-bottom: 15px solid white; 
 
} 
 
#indication-mark-wrap:before { 
 
    top: 14px; 
 
    border-bottom-color: black; 
 
} 
 
.active { 
 
    background-color: darkcyan; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="menu"> 
 
    <ul> 
 
    <li class="active">Selection1</li> 
 
    <li>Selection2</li> 
 
    <li>Selection2</li> 
 
    <li class="test"><div id="indication-mark-wrap"></div></li> 
 
    </ul> 
 
</div>

은

ul { 
 
    list-style-type: none; 
 
    padding: 0px; 
 
} 
 
li { 
 
    background-color: black; 
 
} 
 
li:nth-child(-n+3) { 
 
    display: inline-block; 
 
    width: 80px; 
 
    color: white; 
 
    height: 50px; 
 
} 
 
li:nth-child(-n+3) label { 
 
    display: inline-block; 
 
    width: 100%; 
 
    height: 100%; 
 
    cursor: inherit; 
 
} 
 

 
#indication-mark-wrap { 
 
    position: absolute; 
 
    left: 35px; 
 
    top: 56px; 
 
    background: wheat; 
 
    -webkit-transition: all 1000ms cubic-bezier(0.000, 0.000, 0.330, 0.990); 
 
    -moz-transition: all 1000ms cubic-bezier(0.000, 0.000, 0.330, 0.990); 
 
    -o-transition: all 1000ms cubic-bezier(0.000, 0.000, 0.330, 0.990); 
 
    transition: all 1000ms cubic-bezier(0.000, 0.000, 0.330, 0.990); 
 
    /* custom */ 
 
    -webkit-transition-timing-function: cubic-bezier(0.000, 0.000, 0.330, 0.990); 
 
    -moz-transition-timing-function: cubic-bezier(0.000, 0.000, 0.330, 0.990); 
 
    -o-transition-timing-function: cubic-bezier(0.000, 0.000, 0.330, 0.990); 
 
    transition-timing-function: cubic-bezier(0.000, 0.000, 0.330, 0.990); 
 
    /* custom */ 
 
} 
 

 
.indication-mark { 
 
    position: relative; 
 
    display: block; 
 
} 
 

 
#s1, #s2, #s3 { 
 
    display: none; 
 
} 
 
#s1:checked ~ ul #indication-mark-wrap { 
 
    left: 35px; 
 
} 
 
#s2:checked ~ ul #indication-mark-wrap { 
 
    left: 118px; 
 
} 
 
#s3:checked ~ ul #indication-mark-wrap { 
 
    left: 200px; 
 
} 
 
li:nth-child(-n+3):hover { 
 
    background: darkgray; 
 
    cursor: pointer; 
 
} 
 
#s1:checked ~ ul li:nth-child(1), 
 
#s2:checked ~ ul li:nth-child(2), 
 
#s3:checked ~ ul li:nth-child(3) { 
 
    background-color: darkcyan; 
 
    cursor: auto; 
 
} 
 

 
#indication-mark-wrap:before, 
 
#indication-mark-wrap:after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 15px; 
 
    width: 0; 
 
    height 0; 
 
    border-left: 15px solid transparent; 
 
    border-right: 15px solid transparent; 
 
    border-bottom: 15px solid white; 
 
} 
 
#indication-mark-wrap:before { 
 
    top: 14px; 
 
    border-bottom-color: black; 
 
}

<div class="menu"> 
 
    <input type="radio" id="s1" name="s123" checked="checked"> 
 
    <input type="radio" id="s2" name="s123"> 
 
    <input type="radio" id="s3" name="s123"> 
 
    <ul> 
 
    <li><label for="s1">Selection1</label></li> 
 
    <li><label for="s2">Selection2</label></li> 
 
    <li><label for="s3">Selection3</label></li> 
 
    <li class="test"><div id="indication-mark-wrap"></div></li> 
 
    </ul> 
 
</div>