Question

我有一个功能垂直菜单。在悬停状态下，它有一条垂直线，它从相同的背景颜色变为特定的颜色，但我想要的是创建一条跟随所选菜单的线路。

附上我的实际代码和我正在努力实现的GIF示例，有人可以帮助我吗？

HTML

<div id="nav">
    <ul>
        <li><a href="#">Example 1</a></li>
        <li><a href="#">Example 2</a></li>
    </ul>
</div>

CSS

#nav ul{
    margin:0;
    padding:0;
    list-style-type:none;
    position:absolute; left:200px; top:200px;
}

#nav ul li{display: inline;}

#nav ul li a{
    display:block;
    background:#fff;
    width:200px;
    text-decoration:none;
    padding:4px 7px ;
    border-bottom:1px solid #eeeeee;
    border-top:1px solid #cccccc;
    border-left:5px solid #333333;
    color:#333333;
}

#nav ul li a:hover{
    border-left-color:#0099FF;
    color:#0066FF;
    background:#c4c4c4;
}

Answer 1

您可以在ul隐藏中使用after伪元素，并使用simnple过渡和jquery，您可以使用top属性进行游戏。

像这样：

$('.upli').hover(function () {
    $(this).parent('ul').toggleClass('up');
});
$('.downli').hover(function () {
    $(this).parent('ul').toggleClass('down');
});

#nav ul{
margin:0;
padding:0;
list-style-type:none;
position:absolute; left:200px; top:200px;}

#nav ul li{display: inline;}

#nav ul li a{
display:block;
background:#fff;
width:200px;
text-decoration:none;
padding:4px 7px ;
border-bottom:1px solid #eeeeee;
border-top:1px solid #cccccc;
border-left:5px solid #333333;
color:#333333;
}


#nav ul:after {
  content:'';
  width:5px;
  height:28px;
  display:block;
  position:absolute;
  opacity:0;
  top:14px;
  left:0;
  background-color:#0099FF;
  transition: top 0.5s ease;
}
#nav .up:after {
  top:0px;
  opacity:1;
}
#nav .down:after {
  top:28px;
  opacity:1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="nav">
       <ul class="">
           <li class="upli"><a href="#">Example 1</a></li>
           <li class="downli"><a href="#">Example 2</a></li>
       </ul>
 </div>

Answer 2

这个非常好的和干净的解决方案怎么样（也可以扩展到无限量的<li>个项目;）

＆＃13;

$('li').hover(function() {
  $(".verticalLine").css("top", $(this).position().top);
}, function() {
  $(".verticalLine").css("top", "0px");
});

＆＃13;

body {
  margin: 0;
}

.nav {
  position: relative;
}

.verticalLine {
  background: coral;
  height: 60px;
  width: 5px;
  position: absolute;
  top: 0;
  transition: top ease .5s;
  left: 0;
}

ul {
  margin: 0;
}

ul li {
  list-style: none;
  height: 60px;
  line-height: 60px;
  vertical-align: center;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
  <div class="verticalLine"></div>
  <ul>
    <li>Something</li>
    <li>Something else</li>
    <li>Something more</li>
    <li>Aaaand more</li>
  </ul>
</div>

＆＃13;

修改如果要使用click（）元素，这会将悬停部分更改为此代码：

$(".nav2Li").click(function() { $(".verticalLine").css("top", $(this).position().top); })

跟随线的垂直演示

2 个答案: