移动边界下一个李动画

Question

我创建4 Li和活动类

现在，当我在第二李徘徊，我想，动画我的下边框的举动从第一李书福第二李

一个导航栏

这是我的导航栏代码：

.top-bar { 
 
background:#0d0d0d; 
 
width:100%; 
 
height:85px; 
 
position:fixed; 
 
top:0; 
 
z-index:99999; 
 
} 
 

 
.menu { 
 
    float: right; 
 
    margin: 16px 50px; 
 
} 
 
.menu li { 
 
    float: right; 
 
    color: #FFF; 
 
    list-style: none; 
 
    font-size: 18px; 
 
    padding: 15px; 
 
    -webkit-transition: all 0.5s ease-in-out; 
 
    -moz-transition: all 0.5s ease-in-out; 
 
    -ms-transition: all 0.5s ease-in-out; 
 
    -o-transition: all 0.5s ease-in-out; 
 
    transition: all 0.5s ease-in-out; 
 
    height: 36px; 
 
} 
 

 
.menu li:hover {color:#8cc152;} 
 

 
.active { 
 
border-bottom:3px solid #8cc152; 
 
color:#8cc152 !important; 
 
} 
 
.hvr { 
 
position:relative; 
 
} 
 
.hvr:before { 
 
    content: ''; 
 
    width: 5px; 
 
    height: 5px; 
 
    background: #8cc152; 
 
    position: absolute; 
 
    margin-top: 48px; 
 
    transform: rotate(45deg); 
 
\t right:50%; 
 
}

<div class="top-bar"> 
 
<div class="menu"> 
 
<a href="#"><li class="active hvr"> Menu </li></a> 
 
<a href="#"><li> Menu </li></a> 
 
<a href="#"><li> Menu </li></a> 
 
<a href="#"><li> Menu </li></a> 
 
</div> 
 
<div class="logo"></div> 
 
</div>

我没有任何演示或示例。你可以帮我吗？

Answer 1

试试这个代码

$(function(){ 
 
\t var menu = $(".menu"); 
 
    var indicator = $('<span class="indicator"></span>'); 
 
    menu.append(indicator); 
 
    position_indicator(menu.find("li.active")); 
 
    setTimeout(function(){indicator.css("opacity", 1);}, 500); 
 
    menu.find("li").mouseenter(function(){ 
 
    \t position_indicator($(this)); 
 
    }); 
 
    menu.find("li").mouseleave(function(){ 
 
    \t position_indicator(menu.find("li.active")); 
 
    }); 
 
    
 
    function position_indicator(ele){ 
 
    \t \t var left = ele.offset().left - 10; 
 
     var width = ele.width(); 
 
     indicator.stop().animate({ 
 
     left: left, 
 
     width: width 
 
     }); 
 
    } 
 
});

.menu{background: #111;position: relative;} 
 
.menu ul{list-style: none;text-align: right;} 
 
.menu li{display: inline-block;} 
 
.menu a{display: inline-block;text-decoration: none;color: #fff;padding: 15px 10px;text-align: center;} 
 
.menu .indicator{border-bottom: 5px solid green;position: absolute;bottom: 0;width: 0;opacity: 0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="menu"> 
 
\t <ul> 
 
\t \t <li><a href="">Menu 1</a></li> 
 
\t \t <li><a href="">Menu 2</a></li> 
 
\t \t <li class="active"><a href="">Menu 3</a></li> 
 
\t \t <li><a href="">Menu 4</a></li> 
 
\t \t <li><a href="">Menu 5</a></li> 
 
\t </ul> 
 
</div>

此处演示https://jsfiddle.net/sasikumar3/j5jczkyn/

Answer 2

使用.hover jquery的函数在特定菜单项悬停的菜单项上应用主动效果。

请检查下面的工作片段。

$(".menu a").hover(function(){ 
 
    $(".menu").find('li').removeClass('active').removeClass('hvr'); 
 
    $(this).find('li').addClass('active').addClass('hvr'); 
 
},function(){ 
 
    $(this).find('li').removeClass('active').removeClass('hvr'); 
 
});

.top-bar { 
 
background:#0d0d0d; 
 
width:100%; 
 
height:85px; 
 
position:fixed; 
 
top:0; 
 
z-index:99999; 
 
} 
 

 
.menu { 
 
    float: right; 
 
    margin: 16px 50px; 
 
} 
 
.menu li { 
 
    float: right; 
 
    color: #FFF; 
 
    list-style: none; 
 
    font-size: 18px; 
 
    padding: 15px; 
 
    -webkit-transition: all 0.5s ease-in-out; 
 
    -moz-transition: all 0.5s ease-in-out; 
 
    -ms-transition: all 0.5s ease-in-out; 
 
    -o-transition: all 0.5s ease-in-out; 
 
    transition: all 0.5s ease-in-out; 
 
    height: 36px; 
 
} 
 

 
.menu li:hover {color:#8cc152;} 
 

 
.active { 
 
border-bottom:3px solid #8cc152; 
 
color:#8cc152 !important; 
 
} 
 
.hvr { 
 
position:relative; 
 
} 
 
.hvr:before { 
 
    content: ''; 
 
    width: 5px; 
 
    height: 5px; 
 
    background: #8cc152; 
 
    position: absolute; 
 
    margin-top: 48px; 
 
    transform: rotate(45deg); 
 
\t right:50%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="top-bar"> 
 
<div class="menu"> 
 
<a href="#"><li class="active hvr"> Menu </li></a> 
 
<a href="#"><li> Menu </li></a> 
 
<a href="#"><li> Menu </li></a> 
 
<a href="#"><li> Menu </li></a> 
 
</div> 
 
<div class="logo"></div> 
 
</div>

Answer 3

nav { 
 
    text-align:center; 
 
} 
 
ul { 
 
    list-style:none; 
 
    margin:0; 
 
    padding:0; 
 
    display:inline-block; 
 
    position:relative; 
 
    font-size:0px; 
 
} 
 
ul li { 
 
    display:inline-block; 
 
    padding:8px 0; 
 
    width:80px; 
 
    text-align:center; 
 
    font-size:15px; 
 
    cursor:pointer; 
 
} 
 
span.border { 
 
    height:2px; 
 
    background:red; 
 
    width:80px; 
 
    position:absolute; 
 
    left:80px; 
 
    bottom:0; 
 
    transition: .5s linear; 
 
} 
 
li:nth-child(1):hover ~ span.border { 
 
    left:0px; 
 
} 
 
li:nth-child(2):hover ~ span.border { 
 
    left:80px; 
 
} 
 
li:nth-child(3):hover ~ span.border { 
 
    left:160px; 
 
} 
 
li:nth-child(4):hover ~ span.border { 
 
    left:240px; 
 
}

<nav> 
 
    <ul> 
 
     <li>one</li> 
 
     <li class="active">two</li> 
 
     <li>three</li> 
 
     <li>four</li> 
 
     <span class="border"></span> 
 
    </ul> 
 
</nav>