码云笔记前端博客
Home > JavaScript > jquery css实现鼠标滑过导航菜单栏动画效果

jquery css实现鼠标滑过导航菜单栏动画效果

2018-09-17 分类:JavaScript 作者:码云 阅读(203)

本文共计1467个字,预计阅读时长需要4分钟。

对于导航栏的实现对于前端人员来说再简单不过了,但是如何让我们的导航看起来生动,给用户一种很高大上的感觉,却需要我们好好设计一下。今天我给大家带来的是我自己在项目中用到的一个例子,当我们鼠标滑过导航栏时li下会出现一个下划线动画效果,一起看一下具体效果是什么样子的:

jquery css实现鼠标滑过导航菜单栏动画效果

jquery css实现鼠标滑过导航菜单栏动画效果

是不是很牛掰的样子,不着急,源码马上呈上来:

HTML代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="header">
            <div class="logo">
                  <img src="http://mdszn.cn/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代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
*{ 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代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(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加伪元素也是可以做到的,更多的方法欢迎留言讨论。

「除特别注明外,本站所有文章均为码云笔记原创,转载请保留出处!」

赞(2) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
2

觉得文章有用就打赏一下文章作者

支付宝
微信
标签:

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - jquery css实现鼠标滑过导航菜单栏动画效果

博客简介

码云笔记 mybj123.com,一个专注Web前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记有你更精彩!
更多博客详情请看关于博客

精彩评论

站点统计

  • 文章总数: 458 篇
  • 分类数目: 13 个
  • 独立页面: 8 个
  • 评论总数: 215 条
  • 链接总数: 14 个
  • 标签总数: 1011 个
  • 建站时间: 495 天
  • 访问总量: 8648080 次
  • 最近更新: 2019年10月21日