jquery css实现鼠标滑过导航菜单栏动画效果
目录
对于导航栏的实现对于前端人员来说再简单不过了,但是如何让我们的导航看起来生动,给用户一种很高大上的感觉,却需要我们好好设计一下。今天我给大家带来的是我自己在项目中用到的一个例子,当我们鼠标滑过导航栏时 li 下会出现一个下划线动画效果,一起看一下具体效果是什么样子的:
jquery css 实现鼠标滑过导航菜单栏动画效果
是不是很牛掰的样子,不着急,源码马上呈上来:
HTML 代码
<div class="header"> <div class="logo"> <img src="https://mybj123.com/img/logo.png" alt=""> <span>码云笔记</span> </div> <div class="nav"> <ul> <li><a href="javascript:;">HTML/CSS</a><span></span></li> <li><a href="javascript:;">JavaScript</a><span></span></li> <li><a href="javascript:;">Node.js</a><span></span></li> <li><a href="javascript:;">手机移动</a><span></span></li> <li><a href="javascript:;">前端安全</a><span></span></li> <li><a href="javascript:;">性能优化</a><span></span></li> <li><a href="javascript:;">类库框架</a><span></span></li> <li><a href="javascript:;">开发调试</a><span></span></li> <li><a href="javascript:;">浏览器</a><span></span></li> <li><a href="javascript:;">面试经验</a><span></span></li> </ul> </div> </div>
css 代码
*{ margin:0; padding:0; list-style:none;} .header{ width:100%; background:#3E4147;height:50px;} .logo{float:left;height:50px;margin:0 25px;} .logo img{display:block;width:60px;height:40px;float:left;margin:5px 0;} .logo span{display:block;float:left;font-size:22px;color:#fff;line-height:50px;margin-left:15px;cursor:pointer;} .nav{width:767px;height:50px;float:left;overflow:hidden;} .nav ul{width:767px;height:50px;} .nav ul li{ height:30px; line-height:30px; float:left; padding:10px 5px; margin:0px 5px;position:relative;} .nav ul li a{ color:#cbcbcb; font-family:'Microsoft Yahei'; font-size:14px; text-decoration:none;} .nav ul li a:hover{ color:#6bc30d;} .nav ul li span{ display:block; position:absolute; width:0px; height:0px; background:#6bc30d; top:48px; left:50%;}
jQuery 代码
$(function(){ $('.nav li').hover(function(){ $(this).find('span').stop().css('height','2px'); $(this).find('span').animate({ left:'0', width:'100%', },200); },function(){ $(this).find('span').stop().animate({ left:'50%', width:'0' },200); }); });
注意:记得引入 jQuery 库哦!
整个实现流程代码都在这里了,用到的时候直接拿去就可以用,项目亲测相当给力,当然还有更好的设计大家可以根据自己的需要在修改。
当然上面只是我的实现思路,当然你也可以纯 css hover 加伪元素也是可以做到的,更多的方法欢迎留言讨论。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » jquery css实现鼠标滑过导航菜单栏动画效果
码云笔记 » jquery css实现鼠标滑过导航菜单栏动画效果