How jQuery implements the effect of the mouse hover navigation underline sliding out-JS Tutorial-php.cn

How jQuery implements the effect of the mouse hover navigation underline sliding out

黄舟

Release： 2017-09-30 11:23:35

Original

1612 people have browsed it

This article mainly introduces the jquery mouse hover navigation underline slide-out effect in detail. The menu underline appears when the mouse hovers and expands to both sides. It has certain reference value. Interested friends can refer to it.

The example in this article shares the specific code for the underline slide-out effect of jquery mouse hover navigation for your reference. The specific content is as follows

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery鼠标悬停导航下划线滑出效果</title>
<style>
*{ margin:0; padding:0; list-style:none;}
img{ border:0;}

.header{ width:100%; background:#F5F5F5;}
.nav{ width:1000px; margin:0 auto; overflow:hidden;}
.nav ul li{ height:40px; line-height:40px; float:left; padding:10px 5px; margin:0px 5px;position:relative;}
.nav ul li a{ color:#666; font-family:&#39;Microsoft Yahei&#39;; font-size:14px; text-decoration:none;}
.nav ul li a:hover{ color:#000; text-decoration:none;}
.nav ul li span{ display:block; position:absolute; width:0px; height:0px; background:#1FAEFF; top:58px; left:50%;}
</style>
</head>
<body>
<p class="header">
<p class="nav">
<ul>
<li><a>首页</a><span></span></li>
<li><a>菜单导航</a><span></span></li>
<li><a>时间日期</a><span></span></li>
<li><a>焦点图</a><span></span></li>
<li><a>tab标签</a><span></span></li>
<li><a>jquery特效</a><span></span></li>
<li><a>相册代码</a><span></span></li>
<li><a>图片特效</a><span></span></li>
<li><a>名站特效</a><span></span></li>
</ul>
</p>
</p>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function(){
$(&#39;.nav li&#39;).hover(function(){
$(&#39;span&#39;,this).stop().css(&#39;height&#39;,&#39;2px&#39;);
$(&#39;span&#39;,this).animate({
left:&#39;0&#39;,
width:&#39;100%&#39;,
right:&#39;0&#39;
},200);
},function(){
$(&#39;span&#39;,this).stop().animate({
left:&#39;50%&#39;,
width:&#39;0&#39;
},200);
});
});
</script>
</body>
</html>

Copy after login

The above is the detailed content of How jQuery implements the effect of the mouse hover navigation underline sliding out. For more information, please follow other related articles on the PHP Chinese website!