使用纯CSS在菜单下滑动箭头

Question

当我在菜单上徘徊时，我希望箭头从左侧滑动到我目前正在盘旋的菜单项。

在JavaScript中我将事件绑定到悬停并使用箭头元素＆＃34;左边＆＃34;属性，但我想知道我是否可以拥有一个纯粹的css3动画解决方案。

箭头与此线程类似 - Show border triangle in navbar using CSS

但我不希望它出现并隐藏 - 我希望箭头始终可见，并且它会从右向左滑动，具体取决于我目前正在悬停的菜单。

如果我在JS中完成它，那就是它的样子：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Sample JSFiddle

Answer 1

随着标记的更改，您可以这样做。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

 <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>

＆＃13;

＆＃13;

＆＃13;

仅限CSS

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;